Почему именно Slimbox?

Когда есть опыт использования подобных вещей, то ищя что-то новое, точно понимаешь что тебе нужно. Поэтому я искал что-то быстрое, гибкое и легковесное.

Основными достоинствами Slimbox можно назвать:

1. скорость работы;
2. небольшой размер в 4 Кб;
3. много настроек;
4. простота в установке.

Slimbox – это реализация на jQuery знаменитого Lightbox 2, разработанного Lokesh Dhakar.

Посмотреть как это все работает можно здесь

Как установить Slimbox?

Ставиться он просто:

1. Скачиваем SlimBox c официального сайта тут;
2. Берем из загруженного архива файлы slimbox2.js и slimbox2.css и копируем их на свой сайт. У меня все сторонние скрипты лежат в директории /js/, а стили в /css/, поэтому весь код на этой странице приведен согласно такого положения дел. Вместе с подключением jQuery код у меня выглядит так:
   

   <link rel="stylesheet" href="/css/slimbox2.css" type="text/css" media="screen" />
   <script type="text/javascript" src="/js/jquery.js"></script>
   <script type="text/javascript" src="/js/slimbox2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
       $('a.slimbox').slimbox({
   	counterText: "Изображение {x} из {y}"
       });
   });
   </script>

   
   Это подключение немного отличается от того, что предложено на оф. сайте, так как атрибут rel у тега а используется не по стандарту и валидатор ругается на это. Поэтому _rel заменен на class. Единственный нюанс, который возникает при таком способе подключение, это все изображения на странице являются одной галереей. Мудрить с дополнительным JS кодом я не стал, так как собственно это мне не нужно.
3. Для того, чтобы разместить картинку нужно в нужное место воткнуть код:
   

   <a href="images/image-1.jpg" class="slimbox">image-1</a>
   <a href="images/image-2.jpg" class="slimbox">image-2</a>
   <a href="images/image-3.jpg" class="slimbox">image-3</a>

В результате мы получаем, компактный и чистенький код, который не нагружает сайт и делает его намного презентабельнее и современнее.