Lightbox2 - Отличная галерея для сайта

Отличная галерея для сайта - Lightbox2 с двумя режимами слайд-шоу

Представляю вашему вниманию очередной слайдер для сайта - Lightbox2 на jQuery. Легкий кроссбраузерный слайдер подойдет для любого функционала, где требуется организовать красивое увеличение фотографий или слайд-шоу. При нажатии на миниатюру изображение увеличивается без никаких дерганий, плавно и размеренно.

Установка этого слайдера на сайт проста:

1. Распаковываем архив

2. Заливаем в корень сайта папки css, images, js со всем содержимым

3. Вставляем следующий код в вашу html страницу между <head> и </head>:

<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />	
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/lightbox.js"></script>

Тем самым мы подключили скрипты и стили к нашему слайдеру

4. Вставляем этот html код в место, где вы хотите видеть вашу галерею изображений:

  <div class="imageRow">
  	<div class="set">
  	  <div class="single first">
  		  <a href="images/examples/image-3.jpg" rel="lightbox[plants]" title="Click on the right side of the image to move forward."><img src="images/examples/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb" /></a>
  		</div>
      <div class="single">
  		  <a href="images/examples/image-4.jpg" rel="lightbox[plants]" title="Alternately you can press the right arrow key." ><img src="images/examples/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb" /></a>
      </div>
      <div class="single">
  		  <a href="images/examples/image-5.jpg" rel="lightbox[plants]" title="The script preloads the next image in the set as you're viewing."><img src="images/examples/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb" /></a>
      </div>
      <div class="single last">
  		  <a href="images/examples/image-6.jpg" rel="lightbox[plants]" title="Click the X or anywhere outside the image to close"><img src="images/examples/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb" /></a>
      </div>
  	</div>
  </div>

 

5. Вставляем этот html код в место, где вы хотите видеть отдельно открывающиеся изображения:

  <div class="imageRow">
  	<div class="single">
  		<a href="images/examples/image-1.jpg" rel="lightbox"><img src="images/examples/thumb-1.jpg" alt="" /></a>
  	</div>
  	<div class="single">
  		<a href="images/examples/image-2.jpg" rel="lightbox" title="Optional caption."><img src="images/examples/thumb-2.jpg" alt="" /></a>
  	</div>
  </div>

 

Галерея установлена!

Еще несколько лет назад Lightbox считался одной из стабильных, правильно работающих, галерей. И по сей день Lightbox доказывает свою актуальность! Считаю, что эксперименты с "увеличетилем" изображений на сайте не имеют место быть, пока существуют стабильные библиотеки организации галерей на сайте Lightbox и Fancybox.

До следующего топика! Пока!

Похожие статьи