В этом посте я хочу познакомить вас с замечательной галереей для ваших фотографий. Установка её проста, а вид крайне привлекателен. Прекрасно подойдёт для портфолио или своеобразной реализации модуля фотоальбома. Не будем долго расхваливать все плюсы, а лучше перейдём к конкретному разбору установки.
Скачав архив по ссылке внизу поста и открыв его вы увидите там 5 файлов и папку с 2мя демо фото. Всё это следует залить в корень вашего сайта. Рассмотрим что нужно, чтобы галерея отображала наши фотки. Открываем блокнотом файл gallery.xml и находим там код:
Code
<image>
<url>images/wide.jpg</url>
<caption><![CDATA[<font size="50">Example Gallery</font><br>An example large format <u><a href="http://www.airtightinteractive.com/projects/autoviewer">AutoViewer</a></u> gallery.]]></caption>
<width>700</width>
<height>465</height>
</image>
Разбираем:
Тег <image> </image> является основой, блоком для отображения каждого фото, открывается в начале всей конструкции и закрывается по её завершению. Дальше идёт <url> </url> этот тег отвечает за путь к отображаемой фотографии. Тег <caption> </caption> выводит описание поверх фото, причём описание может быть в виде форматированного текста, содержать ссылки, переносы и т.д. Перед началом вашего текста описания необходимо указывать <![CDATA[ а по завершении ]].Далее идут <width> </width> в котором указывается ширина фото и <height> </height> где указывается высота фото. Вот пожалуй и всё. Такими блоками и создаём набор ваших фото в галерее. Блоки помещаются в один общий объединяющий всех их тег <gallery> </gallery> таким образом:
Code
<gallery frameColor="0xFFFFFF" frameWidth="15" imagePadding="20" displayTime="6" enableRightClickOpen="true">
...блоки image...
</gallery>
Теперь перейдём к тому, как всё это устанавливается непосредственно на страницу. Для этого необходимо добавить на страницу следующий скрипт:
Code
<script type="text/javascript">
var fo = new SWFObject("autoviewer.swf", "autoviewer", "100%", "100%", "8", "#181818");
//Optional Configuration
//fo.addVariable("langOpenImage", "Open Image in New Window");
//fo.addVariable("langAbout", "About");
//fo.addVariable("xmlURL", "gallery.xml");
fo.write("flashcontent");
</script>
Вставляется он между тегами <body> </body>
Между тегами <head> </head> вставляем эту строчку:
Code
<script type="text/javascript" src="swfobject.js"></script>
Вот и всё что нужно для того, чтобы иметь очень красивую и удобную галерею фотографий на вашем сайте.
2326
Твиттер эфир
