Продолжим на примере создания компонента для MaxSite CMS изучать CSS. Сейчас попробуем вывести одни изображения поверх других с заданным позиционированием.
Оживим наложенные изображения при помощи изменения свойства z-index средствами java-script.
Скачать компонент: picture-links.zip
В предыдущем компоненте из картинок в заданном директории генерировался прикольный коллаж из изображений. Результат коллажа записывался в .jpg файл, и затем, его можно было использовать для вывода в header-е.
Вычисления проводились один раз после сброса кеша, что обеспечивало малую нагрузку компонентом.
Теперь мы поступим по-другому.
Изображения, наложенные на рамку и повернутые, мы не будем накладывать на основу, а сохраним в файлах .png в директории mini-rotate относительно рабочего директория.
При выводе header-а мы сделаем изображение-основу фоном div-а, а картинки наложим при помощи блоков с position: absolute.
Кроме того, при наведении мыши, наклоненные картинки будут оживать при помощи java script и z-index.
А при клике на наклоненную картинку будет всплывать окошко с оригиналом, благодаря плагину lightbox (или аналогичным).
В одном углу выведем социальные кнопки, в другом – кнопки: home, sitemap, contact, comments.
Содержание архива
components
Папка, содержимое которой нужно скопировать в каталог components шаблона. В корне этой папке файл компонента, а в подпапке css - стили для компонента.
uploads
Папка, содержимое которой нужно скопировать в uploads сайта. В этой папке подпапка header_collage из предыдущего компонента header-collage. Изменилось лишь то, что в этой папке появилась подпапка mini-rotate, в которую попадут повернутые картинки для наложения.
Конечно, на header_collage и mini-rotate нужно установить права 777. Или создать папки и загрузить все загрузчиком http://forum.max-3000.com/viewtopic.php?f=6&t=3054&start=60
images
Здесь находятся иконки sitemap.png, home.png, contact.png и all-comments.png, которые нужно разместить в каталоге images шаблона.
Использование и настройка компонента picture-links
Все настройки аналогичны предыдущему компоненту header-collage.
Исключение в том, что вычислить и сохранить в uploads/header_collage/mini-rotate/ превьюшки нужно всего лишь один раз. Затем нужно закомментировать строчки:
//коллаж будем производить только один раз после скидывания кеша.
$cache_key = ''; // чтобы вычисление коллажа происходило только после сброса кеша введите ключ
//лучше после создания превьюшек закомментровать вызов функции двумя строчками ниже
if( !$cache_key or !mso_get_cache($cache_key))
{
create_header_collage_images($par);
mso_add_cache($cache_key, true);
}
Не нужной после вычислений миниатюр будет и функция create_header_collage_images, поэтому код ее тоже можно удалить из компонента. правильно было бы подготовительные функции вынести в отдельный файл и подключать один раз при запуске компонента.
Требования
Картинок может быть больше чем нужно для вывода. тогда они будут браться случайно. Определение массива файлов в uploads/header-collage/mini-rotate/ обеспечивает функция get_path_files, которая находится в functions-template.php дефолтного шаблона. Эта функция должна быть подключена.
