Прозрачная, фиксированная, оформленная с использованием CSS фотогалерея и вызываемая нажатием на кнопку Включения/Выключения.
Листинг
<div id="left_bar" style="height: 342px; display: block">
<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="../image/11.jpg" id="1" width="100">
</div>
<div class="box">
<img src="../image/10.jpg" id="2" width="100">
</div>
<div class="box">
<img src="../image/9.jpg" id="3" width="100">
</div>
</div>
</div>
<div id="top_bar" style="width: 570px; display: block">
<div id="top_boxes" style="display: block">
<!-- copy large image name in id of image without extension .
We will get this id and show big image -->
<div class="box">
<img src="../image/8.jpg" id="4" width="100">
</div>
<div class="box">
<img src="../image/7.jpg" id="5" width="100">
</div>
<div class="box">
<img src="../image/6.jpg" id="6" width="100">
</div>
<div class="box">
<img src="../image/5.jpg" id="7" width="100">
</div>
<div class="box">
<img src="../image/4.jpg" id="8" width="100">
</div>
</div>
</div>
<div id="right_bar" style="height: 342px; display: block">
<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="../image/3.jpg" id="9" width="100">
</div>
<div class="box">
<img src="../image/2.jpg" id="10" width="100">
</div>
<div class="box">
<img src="../image/1.jpg" id="11" width="100">
</div>
</div>
</div>
<div id="imagePlacer" style="display: block">
<span>
<!-- use image name as id of image without extension -->
<img src="../image/11.jpg" width="606" height="413" id="1b" style="display: none">
<img src="../image/10.jpg" width="606" height="413" style="display: none" id="2b">
<img src="../image/9.jpg" width="606" height="413" style="display: none" id="3b">
<img src="../image/8.jpg" width="606" height="413" style="display: none" id="4b">
<img src="../image/7.jpg" width="606" height="413" style="display: none" id="5b">
<img src="../image/6.jpg" width="606" height="413" style="display: none" id="6b">
<img src="../image/5.jpg" width="606" height="413" style="display: none" id="7b">
<img src="../image/4.jpg" width="606" height="413" style="display: none" id="8b">
<img src="../image/3.jpg" width="606" height="413" style="display: inline" id="9b">
<img src="../image/2.jpg" width="606" height="413" style="display: none" id="10b">
<img src="../image/1.jpg" width="606" height="413" style="display: none" id="11b">
</span>
<!-- images captions -->
<div id="captions" style="bottom: 6px">
<span id="caption-1b" style="display: none"> Тут можно поместить описание показываемого изображения. </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" style="display: inline"> Тут можно поместить описание показываемого изображения. </span>
<span id="caption-10b"> Тут можно поместить описание показываемого изображения. </span>
<span id="caption-11b"> Тут можно поместить описание показываемого изображения. </span>
</div>
</div>
