Как установить Slimbox у себя на сайте?

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

Так и я. Решил, что не стоит останавливаться на одном, а нужно пробовать что-то новое.

Мой выбор пал на Slimbox.

Недавно знакомый забрал с ремонта iPad. Ребята из remmob.com все быстро починили и гарантию дали. Круто, чо!

Почему именно 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>

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

Комментарии:

  1. Andrey опубликовал комментарий 17 Январь 2013, 22:49 #

    Хорошее решение с атрибутом rel в слимбокс и валидностю.
    Спасибо, возьму на вооружение ;)

    | Ответить
  2. tina_x опубликовал комментарий 31 Январь 2013, 12:25 #

    Спасибо за урок :)
    Но у меня возникла проблемка, никак не могу найти в чем дело. Когда открывается фото, то темнеет не под, а над ним, и никаких кнопок “закрыть”, “прев”, “некст” и подписей нету, т.е. галерея не работает. В чем может быть загвоздка?

    | Ответить
    • admin опубликовал комментарий 18 Февраль 2013, 17:05 #

      Это из-за jQuery. Попробуйте версию jQuery v1.7.2

      | Ответить
  3. Лев опубликовал комментарий 19 Март 2013, 13:50 #

    у меня упорно плагин wp-slimbox2 не хочет работать, скорее всего конфликт версий jQuery, но разрешить проблему не удаётся, картинки просто открываются, как обычно в новом окне, плагин не срабатывает, пример: http://geometrica.pro/ofis-kompanii-vsk/
    помогите пожалуйста, именно с используемой темой проблемы, на других сайта всё работает

    | Ответить
  4. =Priz= опубликовал комментарий 7 Апрель 2013, 12:11 #

    Кто знает как с помощью slimbox2 создать одну галерею, которая расположена в одной категории, но на двух или более страницах.Что бы при просмотре картинок с помощью slimbox2 можно было просматривать все картинки – которые относятся к одной группе, а не те – которые находятся на данной странице сайта???

    | Ответить
Имя
e-mail
Сайт
Текст комментария: