HTML-pedia
Веб-строительство
Сообщество
Веб-потребителей
Навигация
Скрипты
GreyBox - фотогалереи и всплывающие окна
1. Для начала скачайте последнюю версию GreyBox с официального сайта проекта.
2. В распакованном архиве находим папку greybox и помещаем ее в корневую папку своего сайта.
3. В html-код сайта, между html-тегами <head>...</head>, помещаем код:
<script type="text/javascript">
var GB_ROOT_DIR = "http://Ваш_сайт/greybox/";
</script>
<script type="text/javascript" src="/greybox/AJS.js"></script>
<script type="text/javascript" src="/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="/greybox/gb_scripts.js"></script>
<link href="/greybox/gb_styles.css" rel="stylesheet" type="text/css">
HTML-код ссылки, для вывода одиночной картинки с помощью GreyBox, выглядит так:
<a href="photo/konrad_green1.jpg" rel="gb_image[]" title="Konrad Green">
<img src="photo/k_g.jpg" alt="">
</a>
HTML-код, для отображения превьюшек (минифото) и вывода нескольких картинок с помощью GreyBox, выглядит так:
<a href="photo/konrad_green1.jpg" rel="gb_imageset[CATEGORY]" title="Konrad Green1">
<img src="photo/k_g1.jpg">
</a>
<a href="photo/konrad_green2.jpg" rel="gb_imageset[CATEGORY]" title="Konrad Green2">
<img src="photo/k_g2.jpg">
</a>
<a href="photo/konrad_green3.jpg" rel="gb_imageset[CATEGORY]" title="Konrad Green3">
<img src="photo/k_g3.jpg">
</a>
HTML-код, без отображения превьюшек (минифото) выглядит так:
<a href="photo/konrad_green1.jpg" rel="gb_imageset[nice_pics]" title="Konrad Green 1">
<img src="photo/k_g1.jpg" alt="">
</a>
<a href="photo/konrad_green2.jpg" rel="gb_imageset[nice_pics]" title="Konrad Green 2">
</a>
<a href="photo/konrad_green3.jpg" rel="gb_imageset[nice_pics]" title="Konrad Green 3">
</a>
Помимо увеличения картинки и изготовления фотогалерей greybox можно использовать для всплывающих окон, в которых могут отображаться формы для отправки писем и гостевой книги.
Чтобы посмотреть как это работает нажмите на ссылку "Прокомментировать".
При использовании материалов «HTML-pedia» ссылка на сайт html-pedia обязательна.
© 2009 «html-pedia»