Главная » Файлы » Прочие скрипты » jQuery

Lightbox 2 - замечательный плагин для увеличения изображений на jQuery для uCoz
[ Скачать с сервера (15.6 Kb) ] 05.11.14, 09:06:03



Ещё помню первую версию этого плагина и она мне очень нравилась. Вторая версия вообще классная - и под монитор картинка подстраивается, и плагин не нагружен кучей настроек, а работает всё плавненько и шустренько

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

После < /head > на нужных страницах вставляйте:
Код
<link rel="stylesheet" href="/css/lightbox.css">  
  <script src="/js/lightbox.js"></script>


Примеры использования:
Код
<!-- Одиночная картинка -->  
  <a href="Ссылка на большую картинку" data-lightbox="example-1" data-title="Описание к картинке">  
<img width="150px" src="Ссылка на миниатюру" />  
  </a>  

  <!-- Группа картинок: мини-галерея -->  
  <a href="Ссылка на большую картинку" data-lightbox="group" data-title="Описание к картинке">  
<img width="150px" src="Ссылка на миниатюру" />  
  </a>  
  <a href="Ссылка на большую картинку" data-lightbox="group" data-title="Описание к картинке">  
<img width="150px" src="Ссылка на миниатюру" />  
  </a>


В общем, суть очень проста - все картинки с одинаковым значением атрибута data-lightbox объединяются в мини-галерею и, если открыть любое изображение из этой группы, между соседними картинами можно будет переходить при помощи стрелочек

Скрипт из прикреплённого архива залейте в папку js, файл стиля в папку css, все картинки в папку img

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse
Просмотров: 745 | Загрузок: 173 | Комментарии: 2 | Рейтинг: 1.0/2
Всего комментариев: 2
0
по идеи можно делать ссылки на картинки одинаковыми, так как миниатюра всё ровно ограничена в размере 150px smile Ну я это говорю для ленивых, чтобы не мучились создавая миниатюры)

0
Если на странице таких изображений 2 или 3 - это да, но если речь идёт о десятке, то 10 миниатюр по 20 килобайт явно выигрывают по отношению к 10 картинам по 500 килобайт

Имя *:
Email: