jQuery lightBox plugin - lightBox эффект всплывающих фотографий
Решил написать как делаются эффекты всплывающих фотографий при клике.
Все секреты и технологи я думаю смысла нет рассказывать, если захотите сами поковыряете файлы и думаю разберетесь.
А используется плагин так:
Для начала скачайте архив с скриптами, либо от сюда http://leandrovieira.com/projects/jquery/lightbox/ , это сайт разработчиков, либо от сюда (ТЫЦ)
Потом подключаем на страничку, сначала в хедер
Скрипты:
-
<script type="text/javascript" src="js/jquery.js"></script>
-
<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" />
Теперь еще нужно указать каким картинкам присваивать эффект
-
<script type="text/javascript">
-
$(function() {
-
$('a[@rel*=lightbox]').lightBox(); //все ссылки где содержится лайтбокс атрибут
-
// или...
-
$('#gallery a').lightBox(); //все ссылки содержащимися в контейнере с айдишником gallery
-
// или...
-
$('a.lightbox').lightBox(); //все ссылки содержащие класс lightbox
-
// или...
-
$('a').lightBox(); // или все ссылки
-
// ... или какие то другие свойства, фантазируйте и изобретайте :)
-
});
-
</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 - кнопка (ключ) для просмотра следующего изображения.
Пример:
-
<script type="text/javascript">
-
$(function() {
-
$('a[@rel*=lightbox]').lightBox({
-
overlayBgColor: '#FFF',
-
overlayOpacity: 0.6,
-
imageLoading: '/images/loading.gif',
-
imageBtnClose: '/images/close.gif',
-
imageBtnPrev: '/images/prev.gif',
-
imageBtnNext: '/images/next.gif',
-
containerResizeSpeed: 350,
-
txtImage: 'Imagem',
-
txtOf: 'de'
-
});
-
});
-
</script>
drazice okc 1000 ntr 1 mpa.
Комментарии
LightBox конфликтует со слайдером SharpSlider
Здравстуйте! Очень надеюсь, что сможете мне помочь! LightBox конфликтует со слайдером SharpSlider из-за jQuery. Получается как бы двойное подключение бибилиотеки. Как это исправить? Чтобы и слайдер и лайтбокс работали одновременно?
У меня на блоге есть статья
У меня на блоге есть статья про конфликты с джейквери, я думаю она вам поможет. Или в гугле поищите "ноконфликт джейквери"
спасибо, а то мой старый
спасибо, а то мой старый скрипт Лайтбокса конфликтил с Google translate гаджетом на сайте, изза оного неделался перевод страниц. Новая версия - все ОК!