Наверх

Вы тут » Главная » Архив »

    Textpattern

    Галерея Lightbox (Slimbox) для Textpattern

    (CMS Textpattern) позволяет быстро и без всяких плагинов добавить галерею с эффектом Light (Slim) box в статью или страницу. Для этого в начале нужно скачать и установить скрипты галереи в хедер страницы. Делается это просто:

    Для Lightbox (сайт со скриптами и примерами тут )

    
    <script type="text/javascript" src="<txp:site_url />js/prototype.js"></script>
    <script type="text/javascript" src="<txp:site_url />js/scriptaculous.js?load=effects,builder"></script><script type="text/javascript" src="<txp:site_url />js/lightbox.js"></script>
    <link rel="stylesheet" href="<txp:site_url />css/lightbox.css" type="text/css" media="screen" />
    

    Для Slimbox (сайт со скриптами и примерами тут )

    
    <script type="text/javascript" src="<txp:site_url />js/mootools.js"></script>
    <script type="text/javascript" src="<txp:site_url />js/slimbox.js"></script>
    <link rel="stylesheet" href="<txp:site_url />css/slimbox.css" type="text/css" media="screen" />
    

    Что устанавливать Light- или Slimbox? – это зависит от ваших предпочтений, эффект, по сути дела, один и тот же. Slimbox – легче и имеет меньше файлов.

    Второй шаг заключается в том, что бы прописать, какие изображения будут показаны. Для этого изображения нужно распределить по категориям картинок. Создадим категорию изображений для галереи, которая будет находится в отдельной статье. К примеру, в секции Фото будут находиться разные статьи, а каждой в статье – галерея из картинок. Назовем категорию, к примеру, minsk-2012, затем при загрузке картинок привязываем их к категории minsk-2012. Затем создадим статью, к примеру, Фото Минска в 2012, где и будет галерея картинок про Минск, снятых в 2012 году.

    Воспользуемся тэгом, который поместим в публикуемой статье:

    
    <txp:images  thumbnail="1" category="minsk-2012" form="my-pics"  limit="25"  /> 
    

    Тэг показывает, что мы выводим картинки –

    1. из категории minsk-2012
    2. в виде миниатюр
    3. в форме my-pics, которую создадим,
    4. количеством не больше 25.

    Третий шаг – создадим форму (в разделах панели администратора Оформление – Формы) my-pics (выберем тип misc), где опишем, как будет показываться картинка.

    Чтобы работал Light / Slim – box нужно в ссылке на большее изображение добавить

    rel=”lightbox”
    

    Поэтому, пишем:

    
    <div style=”стиль задаём по своему усмoтрению и выносим в Оформление - Стили”><a rel="lightbox" href="<txp:image_url />"> <txp:thumbnail  /> </a> </div>
    

    Галерея будет представлена в виде миниматюр (thumbnails), после нажатия на которые, всплывает полное изображение с космическими эффектами Light / Slim – box.

    Таким образом, тэг в статье связан с формой в Формах. Нужно иметь ввиду, если использовать галерею со скриптами Jquery, то может возникнуть конфликт, который проявится в том, что будет работать, либо Jquery либо Box. Здесь воспользуемся немного другими скриптами. Но об этом речь в другой статье.