Помогите выиграть конкурс.
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>
Комментарии
спасибо, а то мой старый
спасибо, а то мой старый скрипт Лайтбокса конфликтил с Google translate гаджетом на сайте, изза оного неделался перевод страниц. Новая версия - все ОК!