Созданные, как описано в статье: Создание коллажа изображений, изображения можно использовать при помощи этого компонента.
Компонент выводит в шапке коллаж. Элементы коллажа появляются постепенно и по очереди, а также активны при наведении мыши.
Выборка картинок проводится случайно.
Ссылка с элемента-изображения может вести либо на большую картинку, либо на страницу картинки, создаваемую по заданному адресу плагином taggallery.
Скачать: taggallery_header.zip
В архиве находится файл компонента и css стили, необходимые для работы компонента.
Настройки компонента
$source_dir = 'header_collage'; // директорий в uploads, где картинки $startx = 20; // начальная точка вывода элементов $pointy = 20; // где будут выведены элементы по высоте $stepx = 170; // шаг вывода элементов $count = 5; // кол-во эллементов $n = 10; //максимальный номер существующей картинки-элемента //!!!Не должно превышать кол-во созданных в админке taggallery // два варианта вывода ссылок с миниатюр коллажа // 1 - картинка с большим изображением // 2 - ссылка на страницу $out_type = 2;// или 2
Файлы опций, чтобы опции попадали в админку, я создавать не стал.
Поверки нижеуказанного соответствия не проводятся $count должно быть не более $n $n доожно быть не более реально существующих картинок
Пути и файлы
Картинка шапки находится в uploads/header_collage/header.jpg
Изображения-элементы с именами 1,2, ... n.png - в uploads/header_collage/mini-rotate.
Исходные изображения с именами 1,2, ... n.jpg - в uploads/header_collage/.
Если $out_type = 2, то ссылка с элемента ведет на персональную страницу. Для связи НОМЕР -> Адрес используется массив (созданный при создании набора картинок), извлекаемый из float-опций.
Конструкция
Для плавного появления используется функция:
$(function(){$("#tgcoll1").delay(500).fadeIn(1000) })
Для перемещения на передний план при нажатии мышки:
topLevel=5 // top z-index lastID="" function changeZindex(obj){ id=obj.id document.getElementById(id).style.zIndex=topLevel if(lastID==""){ lastID=id } if(lastID==id){ document.getElementById(id).style.zIndex=topLevel } else{ document.getElementById(lastID).style.zIndex="" } lastID=id }
Элемент выводится так:
<div id= "tgcoll' . $i . '" onMouseOver="changeZindex(this)" style="display:none; position: absolute; top: ' . $pointy . 'px; left: ' . $pointx . 'px; z-index:' . $i . '"> <a class="' . $class . '" href="' . $url . '"><img src="' . $path_url . 'mini-rotate/' . $num . '.png' . '" title="Перейти"/></a> </div>