Компонент taggallery-collage для галереи изображений на MaxSite CMS.
Компонент taggallery-collage для галереи изображений на MaxSite CMS.
2 декабря 2011 г.
Sadovnik
Просмотров: 263
RSS
MaxSite CMS компоненты » Компоненты для шапки
MaxSite, Taggallery, Компоненты, ПлагиныСозданные, как описано в статье: Создание коллажа изображений, изображения можно использовать при помощи этого компонента.
Компонент выводит в шапке коллаж. Элементы коллажа появляются постепенно и по очереди, а также активны при наведении мыши.
Выборка картинок проводится случайно.
Ссылка с элемента-изображения может вести либо на большую картинку, либо на страницу картинки, создаваемую по заданному адресу плагином taggallery.
В архиве находится файл компонента и 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>
Компонент для MaxSite CMS, создающий в header коллаж из изображений
Для плагина Taggallery задумал вывод n изображений (случайных, лучших, ... ) в шапке ...
Выводим картинки в div-ах: одна поверх другой, с эффектами, в компоненте для MaxSite CMS
Продолжим на примере создания компонента для MaxSite CMS изучать CSS. Сейчас ...
Новая версия плагина галерей для MaxSite CMS Taggallery-2.1
Следующая версия. Скачать: taggallery21.zip Изменения: 1. При добавлении картинки в ...
Группировка меток для плагина галереи изображений Taggallery
Группировка меток Возникла задача группировки меток альбомов. Эта задача ...
Галерея изображений для MaxSite CMS Taggallery-2-0
Надоело юзать многомерные массивы во флоат-опциях. Решил сделать хранение ...