jQuery lightBox plugin - lightBox эффект всплывающих фотографий - Блог X3M-Slider(а)

Вверх

Блог
RSS лента

jQuery lightBox plugin - lightBox эффект всплывающих фотографий

Vape Shop Эко Заправка

Решил написать как делаются эффекты всплывающих фотографий при клике.
Все секреты и технологи я думаю смысла нет рассказывать, если захотите сами поковыряете файлы и думаю разберетесь.
А используется плагин так:
Для начала скачайте архив с скриптами, либо от сюда http://leandrovieira.com/projects/jquery/lightbox/ , это сайт разработчиков, либо от сюда (ТЫЦ)
Потом подключаем на страничку, сначала в хедер

Скрипты:

  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

Стиль:
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

Теперь еще нужно указать каким картинкам присваивать эффект

  1. <script type="text/javascript">
  2. $(function() {
  3.         $('a[@rel*=lightbox]').lightBox(); //все ссылки где содержится лайтбокс атрибут
  4.         // или...
  5.         $('#gallery a').lightBox(); //все ссылки содержащимися в контейнере с айдишником gallery
  6.         // или...
  7.         $('a.lightbox').lightBox(); //все ссылки содержащие класс lightbox
  8.         // или...
  9.         $('a').lightBox(); // или все ссылки
  10.         // ... или какие то другие свойства, фантазируйте и изобретайте :)
  11. });
  12. </script>

Так же вы можете настроить лайтбокс.

overlayBgColor - Используется для определения цвета фона наложения. #000 (black), по умолчанию черный.
overlayOpacity - Используется для определения наложения непрозрачности 0,8 по умолчанию.
imageLoading - Изображение загрузки GIF Animator. images/lightbox-ico-loading.gif.
imageBtnClose - Изображение кнопки закрытия изображения. images/lightbox-btn-close.gif. imageBtnPrev - The previous image button. imageBtnPrev - Изображение переключение предыдущей фотографии. images/lightbox-btn-prev.gif
imageBtnNext - The next image button. imageBtnNext - Изображение переключение далее фотографии. images/lightbox-btn-next.gif.
keyToClose - кнопка (ключ) закрытие изображения.
keyToPrev - кнопка (ключ) для просмотра предыдущего изображения.
keyToNext - кнопка (ключ) для просмотра следующего изображения.

Пример:

  1. <script type="text/javascript">
  2. $(function() {
  3.    $('a[@rel*=lightbox]').lightBox({
  4.         overlayBgColor: '#FFF',
  5.         overlayOpacity: 0.6,
  6.         imageLoading: '/images/loading.gif',
  7.         imageBtnClose: '/images/close.gif',
  8.         imageBtnPrev: '/images/prev.gif',
  9.         imageBtnNext: '/images/next.gif',
  10.         containerResizeSpeed: 350,
  11.         txtImage: 'Imagem',
  12.         txtOf: 'de'
  13.    });
  14. });
  15. </script>

Ваша оценка: Пусто Средняя: 3.4 (17 votes)
drazice okc 1000 ntr 1 mpa.

Комментарии

LightBox конфликтует со слайдером SharpSlider

Здравстуйте! Очень надеюсь, что сможете мне помочь! LightBox конфликтует со слайдером SharpSlider из-за jQuery. Получается как бы двойное подключение бибилиотеки. Как это исправить? Чтобы и слайдер и лайтбокс работали одновременно?

У меня на блоге есть статья

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

спасибо, а то мой старый

5

спасибо, а то мой старый скрипт Лайтбокса конфликтил с Google translate гаджетом на сайте, изза оного неделался перевод страниц. Новая версия - все ОК!

Главная | Портфолио | Услуги | Контакты | Блог