Выводим картинки в div-ах: одна поверх другой, с эффектами, в компоненте для MaxSite CMS
Выводим картинки в div-ах: одна поверх другой, с эффектами, в компоненте для MaxSite CMS
30 ноября 2011 г.
Sadovnik
Просмотров: 503
RSS
MaxSite CMS компоненты » Компоненты для шапки
MaxSite, Коллаж, КомпонентыПродолжим на примере создания компонента для MaxSite CMS изучать CSS. Сейчас попробуем вывести одни изображения поверх других с заданным позиционированием.
Оживим наложенные изображения при помощи изменения свойства z-index средствами java-script.
На момент написания статьи компонент висит в шапке этого блога.
В предыдущем компоненте из картинок в заданном директории генерировался прикольный коллаж из изображений. Результат коллажа записывался в .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 дефолтного шаблона. Эта функция должна быть подключена.
Компонент для MaxSite CMS, создающий в header коллаж из изображений
Для плагина Taggallery задумал вывод n изображений (случайных, лучших, ... ) в шапке ...
Компонент taggallery-collage для галереи изображений на MaxSite CMS.
Скачать: taggallery_header.zip Созданные, как описано в статье: Создание коллажа ...
Компонент для MaxSite CMS, выводящий последние комменты и твиты в футер.
Скачать: footer-twcomm.zip Сделал эту наработку давно. Поделиться же решил только ...
Создание коллажа изображений в галерее изображений Taggallery на MaxSite CMS.
Логическое завершение серии компонентов: picture-links и header_collage. В админке ...
Модернизация плагина Модули для MaxSite.
Плагин «Модули» входит в стандартный набор поставки MaxSite и его описание ...
Оригинально =)
Хотелось бы узнать, как можно сделать следующее.
В слайдере картинки отображаются или рандомно или по порядку или же только какая то заданная.
Как сделать так, чтобы можно было задать для каждой рубрики/страницы сайта отдельную картинку.
То есть зашел в рубрику 1 наверху в слайдере картинка подходящая к теме рубрики и т.д.
И то же самое со статичными страницами. Было бы круто сделать такую функцию. Я не программер, но думаю понадобится новые опции вносить в шаблон.
Макс на своей сайте мне отвечал на этот вопрос. Но я ничего толком из его ответа не вынес http://maxsite.org/page/ispolzovanie-css-stilej-v-shablone-default#comment-8454
Ясно одно - это нужно делать компонентом на основе существующих.
Я бы сделал так.
В каком-нибудь каталоге uploads заранее подготовил бы картинки для шапки.
С именами, как слуги у категорий.
И в компоненте сразу выбирается картинка
$picture_url = getinfo('uploads_url') . 'my_dir/' . mso_segment(2) . '.jpg';Но...
Видал я сайты где дизайн меняется в зависимости от раздела - жуть.
Глаз только настроился на определенное восприятие - перехожу на другую страницу и на секунду как будто ослеплен.
не нужно весь диз перекраивать. Только шапки. У вас в принципе тоже самое происходит. Но рандомно и коллажем.
Можно как вы предложили заранее переименовать и цеплять через слуги.
Но я не программист. Поэтому могу лишь подкидывать энтузиастам вроде вас подкидывать идеи
А вариант который предложил Макс не лучше?
Так там вроде то же самое.
А сделать проще простого.
Берете компонент image-select.php, копируете его в свой (без опций).
И там код
$subdir = mso_get_option('default_header_image', 'templates', '-template-'); if ($subdir == '-template-') // каталог шаблона $subdir = getinfo('template_url') . 'images/headers/'; else $subdir = getinfo('uploads_url') . $subdir . '/'; // каталог в uploads if (is_type('category')) $image_fn = mso_segment(2) . '.jpg'; //или if (mso_segment(1) == 'category' ) $image_fn = mso_segment(2) . '.jpg'; else $image_fn = 'default.jpg'; $img = $subdir . $image_fn; // вывод блока изображения //..как в исходном компонентевроде как теперь все ясно =)
Но как я понял, описанное выше будет иметь силу только для категорий(рубрик).
А как сделать "свои" картинки для статичных страниц и для главной.
Все в этой строчке:
if (is_type('category')) $image_fn = mso_segment(2) . '.jpg';Можете так:
если мы в категории и есть картинка для конкретной категории, то выводим
иначе выводим дефолтную для категории
дефолтные картинки для home, категории , ...
будут иметь home.jpg , category.jpg ...
$image_fn = mso_segment(2) . '.jpg'; if (!file_exists($subdir . $image_fn)) { $image_fn = mso_segment(1) . '.jpg'; if (!file_exists($subdir . $image_fn)) { $image_fn = 'home.jpg'; } }