|
8 июня, 2007
 Многие начинающие веб-мастера при создании какого-нибудь сайта задаются вопросом – «как создать галерею фотографий?». В данной статье, я расскажу как создать просмотр графических файлов (фотографий), при помощи скрипта «Lightbox». В действии можно увидеть в любой записи из раздела «Фотографии» на моём сайте.
Приступим к установке? 
- Качаем дистрибутив скрипта.
- Закачиваем всю папку «lightbox» в корень сайта.
- Теперь необходимо прописать поту к файлам в файлах сайта, так что в шапку сайта, между тэгами HEAD вставляем код:
<script type="text/javascript" src="lightbox/js/prototype.js">
</script>
<script type="text/javascript"
src="lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js">
</script>
А так же и стили галереи, туда же
<link rel="stylesheet" href=" lightbox/css/lightbox.css"
type="text/css" media="screen" />
В файле lightbox/js/lightbox.js, проверьте пути до картинок (~65-66 строка)
var fileLoadingImage = "lightbox/images/loading.gif";
var fileBottomNavCloseImage = "lightbox/images/closelabel.gif";
А так же 199 и 212 строчки проверьте (там уже немного другой код), если что – исправьте.
- Всё! Скрипт установле, теперь для его работы необходимо в ссылки на фотографии добавить небольшой код «rel=”lightbox”»
Пример кода всей ссылки:
<a href="photos/photo1.jpg" rel="lightbox" title="First photos">
Photo #1</a>
Для того чтобы при просмотре полного изображение выводить описание изображения, используйте атрибут «title»
Если фотографий несколько, и хотите чтобы при просмотре был переход на следующее или предыдущее изображение, тогда необходимо вместо «rel=”lightbox”», использовать «rel=”lightbox[сюда название цикла изображений]“»
Пример:
<a href="photos/photo1.jpg" rel="lightbox[myphotos]"
title="First photos">Photo #1</a>
<a href="photos/photo2.jpg" rel="lightbox[myphotos]"
title="Second photos">Photo #2</a>
Вот и всё
|
|
|
Комментарии:
Было бы полезным показать пример работы скрипта.
“В действии можно увидеть в любой записи из раздела «Фотографии» на моём сайте.”
Например -> http://romka.ws/nochnaya-syomka/
Спасибо! Может пригодится 
Спасибо за хэлп. Правда несколько неудобно все это верстать. :/
“Спасибо за хэлп. Правда несколько неудобно все это верстать. :/”
Ну почему же? Если используется какая-нибудь CMS или какой-нибудь другой скрипт, то можно попробовать чтобы при добавлении изображения сразу создавался нужный код ссылки.
А сколько весит код, который подгружается со страницей?
Около 83 килобайт.
Пиркольно, мне понравилось…а главное что совсем не сложно:)
главное что работает!)
А что в этом так сильно Вас удивило?
Добавить комментарий
|
