WeBinstruments

Инструментарий для веб-мастеров

 

Техподдержка и
сопровождение
сайтов


на сайте на всех сайтах для веб разработчиков везде
 
 Скрипты
  PHP скрипты   
  Flash скрипты   
  Javascript скрипты   

 Софт
  Инструменты SEO   
  Разработка сайтов   
  Серверное ПО   

 Документация
  MySQL   
  PHP   
  HTML   
  Протоколы и сервисы Internet   

 Статьи
  PHP   
  MySQL   
  Сервер   
  еще...   

 Услуги и сервисы
  Домены   
  Хостинги   
  Блоки для сайта   

 Новости


 Контакты
  icq: 158325531
  email:
  все контакты: здесь




Atom все поступления
Раздел Статьи
Раздел Файлы
Раздел Новости
Раздел Услуги и сервисы
комментарии



lightbox

Lightbox 2

03.09.2014 (последний раз редактировалось 04.09.2014)
сайт: Lightbox
условия использования: бесплатно

скачать lightbox-2.7.1 Оригинальная версия
скачать lightbox-2.7.1 - модернизированная Добавил кнопку увеличения картинки до оригинального размера и исключение дублей.


Скрипт организует просмотр изображений во всплывающем окне. Просмотр можно организовать либо по одному изображению, либо галереей, пролистывая картинки во всплывающем окне.
Самый простой и самый быстрый в установке скрипт. Устанавливается и настраивается буквально за несколько минут.

Как установить lightbox

Скачиваете архив, распаковываете и закачиваете на сервер.
Далее встраиваете скрипт в свой сайт. В html код страницы прописываете код

<script type="text/javascript" src="/demo_script/lightbox/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/demo_script/lightbox/js/lightbox.js"></script>
<link href="/demo_script/lightbox/css/lightbox.css" rel="stylesheet" />

И последний шаг. Вывод изображений.
Вывод изображений делаете так

<a data-title="Название или описание картинки" data-lightbox="image" href="big.jpg"><img src="small.jpg" /></a>
Стандартный код вывода маленькой картинки и ссылки на большую картинку, только в ссылку добавляется два параметра.
Вот пример данного кода - при клике по картинке всплывает большое изображение.



За такой эффект отвечает параметр data-lightbox="image".
Если у вас на странице много изображений, вы можете сделать открытие изображений без пролистывания во всплывающем окне, а можете объединять изображения и они будут пролистываться во всплывающем окне.
Для объединения изображений нужно использовать одно имя для каждой группы картинок

<a data-title="Название" data-lightbox="image" href="big-1.jpg"><img src="small-1.jpg" /></a>
<a data-title="Название" data-lightbox="image" href="big-2.jpg"><img src="small-2.jpg" /></a>
<a data-title="Название" data-lightbox="image" href="big-3.jpg"><img src="small-3.jpg" /></a>



Как видите, все картинки можно пролистать во всплывающем окне, так как data-lightbox у всех одинаковый.
Если хотите разделить картинки, чтобы они не листались, используйте подобный код

<a data-title="Название" data-lightbox="image-1" href="big-1.jpg"><img src="small-1.jpg" /></a>
<a data-title="Название" data-lightbox="image-2" href="big-2.jpg"><img src="small-2.jpg" /></a>
<a data-title="Название" data-lightbox="asd" href="big-3.jpg"><img src="small-3.jpg" /></a>




Теперь каждая картинка открывается отдельно, то есть нет возможности перелистнуть к следующей.

Что в модернизированной версии

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

И второе мало кому нужное дополнение, это исключение дублей картинок.
По умолчанию выключено, включить можно непосредственно в скрипте, там же где и включается кнопка реального размера.
В обычном применении скрипта данная функция приносит только вред, использовать ее можно только в совсем безвыходных ситуациях.

Например, есть ссылки на картинки, но без маленьких изображений, то есть пустые ссылки

<a data-title="Название" data-lightbox="image" href="big-3.jpg"><img src="small-3.jpg" /></a>
<a data-title="Название" data-lightbox="image" href="1.jpg"></a>
<a data-title="Название" data-lightbox="image" href="2.jpg"></a>
<a data-title="Название" data-lightbox="image" href="2.jpg"></a>



Обратите внимание, три ссылки пустые, то есть они ссылаются на большие изображения, но между тегами <a> </a> ничего нет, а одна ссылка заполнена изображением.
В итоге в браузере видно только одну картинку, при нажатии на нее открывается большая картинка и подтягиваются все картинки из незаполненных ссылок и можно листать.
И вот тут смотрите, в ссылках есть две одинаковые картинки(выделены красным) и когда листаете, то увидите две одинаковых картинки.
Если в конкретном примере включить удаление дублей, то дублирующих картинок не будет.

Конечно, такой ситуации быть не должно, зачем выводить две одинаковые картинки, а затем удалять их. Но как ни странно, я столкнулся с такой ситуацией, в одном интернет-магазине у товара должны были выводиться дублирующие фотки(там были хитрые подмены фоток через скрипты), и при просмотре через lightbox дублирующие фотки выглядели очень не правильно. Вот там то и пригодилось удаление дублей.


Комментарии

RSS комментарии


11.12.2014 Виктор
Скрипт очень хорош. При помощи data-title даже можно описать картинку. Но у меня возникла проблема, у меня на странице стоял скрипт который выдвигал блок сбоку при подключении данного скрипта он у меня пропадает. Причем пропадает он если подключены js скрипты. Думал из-за версии конфликтует нет не из-за них.



23.05.2015 Виктор
У меня не работает, когда
href="http://ikk.secrieru.ru/products/Gallery/000039.jpg?ver=20150523142822"
имеет такой вид. Без ?ver=20150523142822
работает



25.05.2015 kaha
thanks a lot



29.06.2015 Андрей
Большое спасибо, за ваш труд! Все заработало практически с первого раза)



26.08.2015 Александр
перепробовал разные аналоги. без конфликтов этот стал сразу. увеличение до оригин. размера гут.если б еще мышкой брать и сдвигать поле картинки-вообще капец



01.11.2015 Игорь
Здравствуйте!
Отличная галерея. Огромное спасибо.
Только такой вопрос:
В приведённом выше примере (3 картинки)изображения показываются зацикленно. А в скачанной версии lightbox-2.7.1 данная функция не работает. При просмотре последнего изображения кнопка далее не появляется.
Подскажите, пожалуйста, в чем может быть причина?



14.11.2015 Антон
на IOS и Андроиде затемнение экрана происходит не на всю страницу!!! в чём может быть проблема. В обычном ЛайтБокс - всё ОК!



15.11.2015 Антон
на IOS и Андроиде затемнение экрана происходит не на всю страницу!!! в чём может быть проблема. В обычном ЛайтБокс - всё ОК!



15.11.2015 Антон
на IOS и Андроиде затемнение экрана происходит не на всю страницу!!! в чём может быть проблема. В обычном ЛайтБокс - всё ОК!



30.03.2016 Антон
Здравствуйте!
А можно ли сделать так, чтобы картинка открывалась в большем разрешении?



18.11.2016 Юра
Спасибо огромное! Все работает отлично!



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


Ваше имя(* обязательно)


Текст сообщения(* обязательно)









 
 
  запомнить

 
Copyright © 2003-2017 WeBi Constructor
Rambler's Top100