textpattern belarus

jQuery галерея для Textpattern без плагинов

Textpattern позволяет создавать интересные вещи без всяких плагинов благодаря своей гибкости и специальному языку, который состоит из особых тэгов. Многие другие CMS для создания подобных вещей нуждались бы в добавлении модулей и плагинов.

Сегодня распространены разновидности jQuery галерей. Рассмотрим, как можно быстро создать галерею из сменяющихся картинок, с уменьшенными изображениями. Такой виджет из сменяющихся изображений обычно ставят на главной странице. Вместо уменьшенных изображений могут быть кнопочки, циферки, квадратики и т. д. Изображения могут сменять друг друга по-разному – и как fade , и как rotator, и как slider – это уже зависит от скрипта. Нас интересует, как внедрить такую галерею в Textpattern, да и еще что б она обновлялась автоматически – нажатием всего лишь одной кнопки Publish.

Для начала нужно подумать, если что представляет собой эта галерея. Это не просто набор картинок, это картинки, которые представляют собой ссылки на соответствующие статьи. Следовательно – это список статей, где вместо заголовков в виде текста мы имеем дело с изображениями. Для Textpattern нет разницы, что будет представлено в списке статей в качестве заголовка – картинка или текст. Просто нужно указать системе, что делать.

К примеру, возьмем галерею типа этой.

Подключим необходимые скрипты:

<head>
<script type="text/javascript" 
src="<txp:site_url />js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" 
src="<txp:site_url />js/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#slideshow').cycle({
        fx:     'fade',
        speed:  'slow',
        timeout: 5000,
        pager:  '#slider_nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#slider_nav li:eq(' + (idx) + ') a';
        }
    });
});
</script>
</head>

HTML-код галереи таков:

<div id="slider">
<div id="slideshow">
<div class="slider-item"><!-- картинка 2 -->
<a href="http://site.com/section/article-1">
<img src="http://site.com/images/1.jpg" alt="Image 1" /></a>
</div>
<div class="slider-item"><!-- картинка 2 -->
<a href="http://site.com/section/article-2">
<img src="http://site.com/images/2.jpg" alt="Image 2" /></a>
</div>
<!-- и так далее -->
</div>
<!-- уменьшенные изображения -->
<div id="slider_controls">
<ul id="slider_nav"> <li><a href="http://site.com/section/article-1">
<img src="http://site.com/images/1t.jpg" 
alt="image 1 thumbnail" width="60" height="30" /></a></li>
<li><a href="http://site.com/section/article-2">
<img src="http://site.com/images/2t.jpg" 
alt="image 2 thumbnail" width="60" height="30" /></a></li>
<!-- и так далее -->
<div class="clear"></div>
</ul>
</div>
</div>

В блоке галереи, вначале идет блок с большими изображениями, затем с уменьшенными.

Создадим категорию для статей, на которые будут ссылать изображения галереи. К примеру, назовем категорию статей – gallery. Затем создадим соответствующие изображения, загрузим в Textpattern, сгенерируем уменьшенные изображения. Когда будем создавать статью, привяжем к ней соответствующее изображение в форме Изображение к статье. И добавим в категорию gallery.

Теперь вернемся к HTML-коду галереи. Принимая во внимание CSS (блоки и списки) пропишем такие тэги:

<txp:article_custom form="bigpicturesform" category="gallery" limit="4" /> 

Это означает, что мы обращаемся к Textpattern: Эй, послушай txp! Изображения, которые привязаны к статьям из категории gallery выводи в форме bigpicturesform.

А в форме bigpicturesform, которую предварительно создадим в разделе Формы, напишем:

<txp:permlink><txp:article_image thumbnail="0" /></txp:permlink>

То есть выводятся целые изображения.

Аналогично создадим такой же список и для уменьшенных изображений. Все то же самое, только добавим

thumbnai="1"

Это значит, что вместо большого изображение в этом блоке будут уменьшенные.

<txp:article_custom form="thumbsform" category="gallery" limit="4" />

B форме thumbsform для уменьшенных изображений напишем:

<li><a href="#"><txp:article_image thumbnail="1" /></a></li> 

Для Textpattern код будет таков:

<div id="slider">
<div id="slideshow">
<div class="slider-item">
<txp:article_custom form="bigpicturesform" category="gallery" limit="4" />
</div>
</div>
<div id="slider_controls">
<ul id="slider_nav"> <txp:article_custom form="thumbsform" category="gallery" limit="4" />
<div class="clear"></div>
</ul>
</div>
</div>

Готово. По такому же принципу делаются подобные галереи с разными эффектами – fade, rotator, и slider.