Cliche

Cliche это компонент галереи изображений для MODX Revolution 2.2.

Установка¶

• Установите компонент через Package Manager.
• Перезагрузите страницу
• Выберите Cliche в главном меню Components
• Создайте альбом и загрузите изображения
• Используйте сниппет Cliche для вывода альбомов

Возможности¶

• Простое управление изображениями: компонент ориентирован на простоту
• Множественная загрузка файлов: пакетная загрузка изображений и/или zip-архивов
• Удобная шаблонизация: используйте любую HTML-разметку (в tpl-файле или в чанке через менеджер) и любые CSS-стили
• Javascript-эффекты: подключайте популярные эффекты из библиотеки на ваш выбор

До публичного релиза¶

• Cliche Thumbnail Template variable: простой способ управлять миниатюрой записи для ресурса
• Плагин Gallerific
• Более полная документация

Использование¶

Используйте сниппет Cliche для вывода галерей как вам нужно.

Просто добавьте следующую строку в документ:

[[Cliche]]

Чтобы показать список всех альбомов:

[[Cliche?
    &view=`albums`
]]

Чтобы показать конкретный альбом:

[[Cliche?
    &id=`your_album_id`
    &view=`album`
]]

Чтобы показать одно изображение:

[[Cliche?
    &id=`your_image_id`
    &view=`image`
]]

Доступные параметры¶

Шаблоны¶

По умолчанию все чанки файловые и находятся в: "core/components/cliche/controllers/web/plugins/[plugin]/__[chunkName].tpl"

Однако вы можете использовать любой обычный чанк. Cliche сначала ищет чанк в базе данных, а если его нет, берёт файл из каталога плагина (как *.tpl файл). Вы можете пропустить поиск в базе и использовать только файловые чанки через параметр "use_filebased_chunks"

Плагин default¶

default/albumcover.tpl¶

<dl class="item">
    <dt class="album-icon">
        <a title="[[+albumname]]" href="[[+url]]">
            <img width="[[+width]]" height="[[+height]]" title="[[+albumname]]" alt="[[+description]]" class="attachment-thumbnail" src="[[+thumbnail]]"/>
        </a>
    </dt>
</dl><!-- End .item -->

default/albumcoverzoom.tpl¶

<dl class="item">
    <dt class="album-icon">
        <a class="zoom" title="[[+albumname]]" href="[[+image]]">
            <img width="[[+width]]" height="[[+height]]" title="[[+albumname]]" alt="[[+description]]" class="attachment-thumbnail" src="[[+thumbnail]]"/>
        </a>
    </dt>
</dl><!-- End .item -->

default/albumswrapper.tpl¶

<div class="cliche" id="albums_list">
    [[+items]]
</div><!-- End #albums_list -->

default/albumwrapper.tpl¶

<div class="cliche galleryid-[[+id]]" id="album-[[+id]]">
 [[+items]]
</div><!-- End #album-[[+id]] -->

default/image.tpl¶

<div class="cliche">
    <div class="item">
        <a title="[[+name]]" class="zoom" href="[[+image]]">
            <img width="[[+width]]" height="[[+height]]" title="[[+name]]" alt="[[+description]]" class="attachment-thumbnail" src="[[+thumbnail]]"/>
        </a>
    </div>
</div>

default/item.tpl¶

<dl class="item">
    <dt class="album-icon">
        <a class="zoom" title="[[+name]]" href="[[+image]]">
            <img width="[[+width]]" height="[[+height]]" title="[[+name]]" alt="[[+description]]" class="attachment-thumbnail" src="[[+thumbnail]]"/>
        </a>
    </dt>
</dl><!-- End .item -->

default/itemzoom.tpl¶

<dl class="item">
    <dt class="album-icon">
        <a class="zoom" title="[[+name]]" href="[[+image]]">
            <img width="[[+width]]" height="[[+height]]" title="[[+name]]" alt="[[+description]]" class="attachment-thumbnail" src="[[+thumbnail]]"/>
        </a>
    </dt>
</dl><!-- End .item -->

default/script.tpl¶

$("a.zoom").fancybox();

Плагин Gallerific¶

galleriffic/item.tpl¶

<li>
    <a class="thumb" name="leaf" href="[[+image]]" title="[[+name]]">
        <img src="[[+thumbnail]]" alt="Title #[[+id]]" />
    </a>
    <div class="caption">
        <div class="download">
            <a href="[[+image]]">Download Original</a>
        </div>
        <div class="image-title">[[+name]]</div>
        <div class="image-desc">[[+description]]</div>
    </div>
</li>

galleriffic/script.tpl¶

jQuery(document).ready(function ($) {
    $("div.navigation").css({ width: "220px", float: "left" });
    $("div.content").css("display", "block");

    // Initially set opacity on thumbs and add
    // additional styling for hover effect on thumbs
    var onMouseOutOpacity = 0.67;
    $("#thumbs ul.thumbs li").opacityrollover({
        mouseOutOpacity: onMouseOutOpacity,
        mouseOverOpacity: 1.0,
        fadeSpeed: "fast",
        exemptionSelector: ".selected",
    });

    // Initialize Advanced Galleriffic Gallery
    var gallery = $("#thumbs").galleriffic({
        delay: 2500,
        numThumbs: 15,
        preloadAhead: 10,
        enableTopPager: true,
        enableBottomPager: true,
        maxPagesToShow: 7,
        imageContainerSel: "#slideshow",
        controlsContainerSel: "#controls",
        captionContainerSel: "#caption",
        loadingContainerSel: "#loading",
        renderSSControls: true,
        renderNavControls: true,
        playLinkText: "Play Slideshow",
        pauseLinkText: "Pause Slideshow",
        prevLinkText: "‹ Previous Photo",
        nextLinkText: "Next Photo ›",
        nextPageLinkText: "Next ›",
        prevPageLinkText: "‹ Prev",
        enableHistory: false,
        autoStart: false,
        syncTransitions: true,
        defaultTransitionDuration: 900,
        onSlideChange: function (prevIndex, nextIndex) {
            // 'this' refers to the gallery, which is an extension of $('#thumbs')
            this.find("ul.thumbs")
                .children()
                .eq(prevIndex)
                .fadeTo("fast", onMouseOutOpacity)
                .end()
                .eq(nextIndex)
                .fadeTo("fast", 1.0);
        },
        onPageTransitionOut: function (callback) {
            this.fadeTo("fast", 0.0, callback);
        },
        onPageTransitionIn: function () {
            this.fadeTo("fast", 1.0);
        },
    });
});

galleriffic/wrapper.tpl¶

 <div id="gallery" class="content">
    <div id="controls" class="controls"></div>
    <div class="slideshow-container">
        <div id="loading" class="loader"></div>
        <div id="slideshow" class="slideshow"></div>
    </div>
    <div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="navigation">
    <ul class="thumbs noscript">
        [[+items]]
    </ul>
</div>
<div style="clear: both;"></div>

Ошибки и проблемы¶

Cliche разрабатывается на GitHub по адресу: https://github.com/argnist/Cliche Старая версия автора: https://github.com/lossendae/Cliche