Галерея изображений Lightbox 2 v2.0.4

Есть много разных плагинов с названием Lightbox для увеличения картинок по клику. Этот называется Lightbox 2 и работает он на Prototype JavaScript framework

Для применения необходимо к картинке добавить rel="lightbox[plants]" или rel="lightbox"

Разница в том одиночная ли у нас картинка или галерея. При выборе первого варианта при наведении на картинку мышки появятся стрелочки слева справа ведущие на следующую картинку, если конечно они есть. Теги title и alt выводят описание к картинке

Структура html

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

<div class="thumbnail">
   <a href="images/image-3.jpg" rel="lightbox[plants]" title="Roll over and click right side of image to move forward.">
      <img src="images/thumb-3.jpg" width="100" height="40" alt="Plants: image 1 0f 4 thumb" />
   </a>
</div>
<div class="thumbnail">
   <a href="images/image-4.jpg" rel="lightbox[plants]" title="Alternately you can press the right arrow key.">
      <img src="images/thumb-4.jpg" width="100" height="40" alt="Plants: image 2 0f 4 thumb" />
   </a>
</div>
<div class="thumbnail">
   <a href="images/image-5.jpg" rel="lightbox[plants]" title="The script preloads the next image in the set as you're viewing.">
      <img src="images/thumb-5.jpg" width="100" height="40" alt="Plants: image 3 0f 4 thumb" />
   </a>
</div>
<div class="thumbnail">
   <a href="images/image-6.jpg" rel="lightbox[plants]" title="LightBox 2  YellowLemon.net">
      <img src="images/thumb-6.jpg" width="100" height="40" alt="Plants: image 4 0f 4 thumb" />
   </a>
</div>