<p id="click">
<a class='multi-line-button red' href='#' style='width:10em'>
<span class='titles'>Открыть галерею</span>
</a>
</p>
<div id="left_bar">
<div id="left_boxes">
<!-- copy large image name in id of image without extension . We will get this id and show big image -->
<div class="box"><img src="Ссылка на маленькую картинку" id="3" width="100" /></div>
<div class="box"><img src="Ссылка на маленькую картинку" id="2" width="100" /></div>
<div class="box"><img src="Ссылка на маленькую картинку" id="1" width="100" /></div>
</div>
</div>
<div id="top_bar">
<div id="top_boxes">
<!-- copy large image name in id of image without extension . We will get this id and show big image -->
<div class="box"><img src="Ссылка на маленькую картинку" id="4" width="100" /></div>
<div class="box"><img src="Ссылка на маленькую картинку" id="5" width="100" /></div>
<div class="box"><img src="Ссылка на маленькую картинку" id="6" width="100" /></div>
<div class="box"><img src="Ссылка на маленькую картинку" id="7" width="100" /></div>
<div class="box"><img src="Ссылка на маленькую картинку" id="8" width="100" /></div>
</div>
</div>
<div id="right_bar">
<div id="right_boxes">
<!-- copy large image name in id of image without extension . We will get this id and show big image -->
<div class="box"><img src="Ссылка на маленькую картинку" id="9" width="100" /></div>
<div class="box"><img src="Ссылка на маленькую картинку" id="10" width="100" /></div>
<div class="box"><img src="Ссылка на маленькую картинку" id="11" width="100" /></div>
</div>
</div>
<!-- Image Holder Main -->
<div id="imagePlacer">
<span>
<!-- use image name as id of image without extension -->
<img src="Ссылка на большую картинку" width="606" height="413" id="1b" />
<img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="2b" />
<img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="3b" />
<img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="4b" />
<img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="5b" />
<img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="6b" />
<img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="7b" />
<img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="8b" />
<img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="9b" />
<img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="10b" />
<img src="Ссылка на большую картинку" width="606" height="413" style="display:none" id="11b" />
</span>
<!-- images captions -->
<div id="captions">
<span id="caption-1b">
Описание для картинки
</span>
<span id="caption-2b">
Описание для картинки
</span>
<span id="caption-3b">
Описание для картинки
</span>
<span id="caption-4b">
Описание для картинки
</span>
<span id="caption-5b">
Описание для картинки
</span>
<span id="caption-6b">
Описание для картинки
</span>
<span id="caption-7b">
Описание для картинки
</span>
<span id="caption-8b">
Описание для картинки
</span>
<span id="caption-9b">
Описание для картинки
</span>
<span id="caption-10b">
Описание для картинки
</span>
<span id="caption-11b">
Описание для картинки
</span>
</div>
</div>
<div id="controls">
<!-- Click to hide gallery -->
<img src="/images/close.png" id="hide" title="Close" />
<!-- Play Pause AutoRotate Images -->
<img src="/images/pause.png" id="pause" title="Pause" width="30" />
<img src="/images/play.png" id="play" title="Play" width="30" />
</div>
