slimbox 2 — плагин jQuery для создания галерей

By | 16.05.2013

Почему slimbox 2?:

  • Работает очень быстро
  • Размер всего 4кб
  • Полностью настраиваемый
  • 100% совместимый с оригинальным Lightbox 2 (написанным Lokesh Dhakar-ом)

Расскажу пару тонкостей его использования.

Сам плагин: slimbox 2
Домашняя страничка плагина
Установку очень простая, и она подробно описана на домашней страничке.

Активация
Для одиночных изображений:

Для создания слайдшоу из нескольких изображений:

Но такая разметка валидацию не пройдёт, есть такое решение, вместо rel использовать class:

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

Cоздания мультигалерей (нескольких галерей на одной странице)

Например в head страницы прописать такой код:

и теперь можно изображения разбивать по галереям, например:

Для того, чтобы картинки на сайте были с описанием:

Одна картинка:

Галерея:

Перевод на русский язык

Изначально в окне popup, в котором открывается большое изображение, надписи NEXT, PREV, CLOSE и IMAGE 1 OF 5. Если сайт на русском языке, то такие данные элементы несколько портят всю русификацию.

Как это поправить?

Все достаточно просто, если уметь искать 😉

Кнопки NEXT, PREV, CLOSE реализованы в виде изображений и прячутся в файле slimbox2.css

Для замены подключаемся к серверу по ФТП используя любой доступный фтп-клиент(я пользую total commander). Скачиваем все изображения из данной папки. Правим или делаем свои, желательного такого же размера как оригиналы и заливаем обратно в ту же папку. Имена, соответственно оставляем прежними.

Теперь по поводу надписи IMAGE 1 OF 5.

Данная строка прописана в файле slimbox.js.

Находим там участок строки: counterText:»Image {x} of {y}» и меняем на ,например, counterText:»Изображение {x} из {y}».Обязательно сохранить файл в формате UTF-8, иначе вместо русского языка будут непонятные символы.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

5 thoughts on “slimbox 2 — плагин jQuery для создания галерей

  1. Михаил

    А еще нужно поправить горячие клавиши… На кнопках эти буквы подчеркиваются, N — вперед, P — назад. Как это сделать не подскажите?

    Reply
    1. Николай Post author

      Смотрите в сторону настройки скрипта
      {
      overlayOpacity: 0,6,
      resizeEasing: "easeOutElastic",
      captionAnimationDuration: 1,
      counterText: "Изображение на {X} {Y}"
      closeKeys: [27, 70],
      nextKeys: [39, 83]
      }

      closeKeys: массив ключевых кодов клавиш нужно нажать, чтобы закрыть Slimbox. По умолчанию [27, 88, 67] , что означает Esc (27), «х» (88) и «C» (67).
      previousKeys: массив ключевых кодов клавиш нужно нажать, чтобы перейти к предыдущему изображению. По умолчанию [37, 80] , что означает стрелкой влево (37) и «P» (80).
      nextKeys: массив ключевых кодов клавиш нужно нажать, чтобы перейти к следующему изображению. По умолчанию [39, 78] , что означает вправо (39) и «N» (78).

      Reply
  2. Антон

    А можно ли в slimbox2 добавить фиксированную высоту и ширину изображения (он растягивает к реальным размерам фото) и убрать возможность прокрутки при просмотре изображений. Все это есть в fancybox, но мне нравится как slimbox раскрывается :)

    Reply
  3. АНТОН

    А можно ли в слимбоксе задать фиксированные максимальные размеры фото (чтобы не растягивал до реального размера, а масштабировал)? и можно ли зафиксировать область просмотра при открытии галереи (чтобы не было возможности прокручивать страницу)? И то и другое есть в фенсибоксе, но слимбокс больше нравится как раскрывается. Заранее спасибо!

    Reply
    1. Николай Post author

      Вот ответ разработчика на Ваш вопрос:
      Slimbox не должны использоваться для отображения очень больших изображений. Общее правило заключается в том, что изображения, которые вы хотите показать с Slimbox не должна превышать ширину шаблона сайта. Вам нужно создать уменьшенные версии ваших больших изображений перед выводом их Slimbox.
      Почему?
      Во-первых, очень большие изображения лучше обрабатывается самим при открытии в специальном окне браузера: как правило, в этом случае браузер будет показывать изображение постепенно, пока она загрузка и автоматически изменять размер ее по размеру окна браузера, которое в точности то, что вы хотите.
      Во-вторых, Slimbox загружает изображения и показывает только их, когда они полностью загружены. Для очень больших изображений, это занимает некоторое время, и это плохо для пользователей. Затем, когда изображение в конце концов загружаются и отображаются, следующие и предыдущие изображения галереи начнет предварительной загрузки тоже, даже если пользователь не намерен, чтобы увидеть их, таким образом, он будет использовать много трафика на ваш сайт.
      В-третьих, динамично изменения размеров изображения выглядят зернистыми в большинстве браузеров.
      И, наконец, динамический изменение размеров изображений сделает код Slimbox очень сложная и нет на самом деле никакого способа, чтобы заставить его работать безупречно. Вот быстрый техническое объяснение (вы можете пропустить его, чтобы избежать головной боли):
      Границы вокруг изображений в Slimbox можно свободно регулировать в CSS, так Slimbox не может определить свою собственную ширину или высоту до изменения размера. Но тогда это слишком поздно, потому что мы должны знать размер, чтобы запустить анимацию. И я не хочу, чтобы жестко размеры границ в яваскрипта код, как это делает Лайтбокс, потому что хочу сохранить дизайн в файле CSS.
      Подпись под изображением идеале должны быть полностью открыты тоже. Он имеет переменную высоту и эта высота не может быть вычислено до тех пор, пока не появится (это зависит от используемого шрифта, поля, количество строк текста, и так далее), но опять же это слишком поздно.
      Даже если высота регулируется в конце анимации, так что заголовки полностью видны, то ширина должна быть отрегулирована, чтобы сохранить пропорции изображения. Но если ширина уменьшается, высота подписи может увеличиться из-за чего текст будет иметь меньше свободного пространства и может занять до нескольких строк. В этом случае, для того, чтобы заголовок был полностью виден, высота его должна быть уменьшена (и ширина также), и так далее … в цикле, пока все, наконец, возможность для отображения на экране. Этот эффект будет выглядеть непредсказуемой. Так что мы должны забыть о том, чтобы подпись видна без прокрутки, когда изображение будет автоматически изменено.
      Ссылка на оригинал ответа: Может Slimbox автоматически изменять размер изображений, когда они слишком велики, чтобы содержаться в окне браузера?

      Reply

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.