Созданные, как описано в статье: Создание коллажа изображений, изображения можно использовать при помощи этого компонента.
Компонент выводит в шапке коллаж. Элементы коллажа появляются постепенно и по очереди, а также активны при наведении мыши.
Выборка картинок проводится случайно.
Ссылка с элемента-изображения может вести либо на большую картинку, либо на страницу картинки, создаваемую по заданному адресу плагином 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>
