Поиск
по Сайту

Последние
Материалы

Рекомендуемый
Хостинг

MODx Revolution Галерея с использованием ColorBox и JQuery Loader

3.12
1
2
3
4
5

Голосов: 17

Настройка фотогалереи в MODx Revolution довольно таки просто реализуется. Для этого урока мы будем использовать ColorBox (настраиваемый плагин лайтбокса для JQuery) . Что нам понадобится кроме самого MODx Revo это расширения которые вы сможете установить из админки revo Gallery extra for MODX Revolution и IF extra for MODX Revolution и скрипты Colorbox, JAIL .

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

Следующее что мы сделаем это создадим три чанка:

DemoGalAlbumRowTpl

<div class="albumPreview">
    <h3><a href="[ [~148?&`]]">[ [+name]]</a></h3>
    <div class="thumb">
        <a href=" [~148?&=`[ [+id]]`]]"><img src="[ [+image]]" alt="[ [+name]]"/></a>
    </div>
    <div class="desc">
        <p></p>
        <a href="[ [~148?&[ [+albumRequestVar]]=`[ [+id]]`]]" class="view">View gallery</a>
    </div>
</div>

DemoGalItemThumb

DemoGalleryAlbumTpl

<h1>[ [+album_name]]</h1>
<p>[ [+album_description]]</p>
[ [+thumbnails]]

Шаблон

<!doctype html>

<head>
    <meta charset="utf-8">

    <base href="[ [++site_url]]" />

    <title>[ [++site_name]] - [ [*pagetitle]]</title>

    <link rel="stylesheet" href="assets/templates/demo/colorbox/example1/colorbox.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="assets/templates/demo/JqueryAsynchImageLoader.min.js"></script>
    <script src="assets/templates/demo/colorbox/colorbox/jquery.colorbox-min.js"></script>

    <script>
        $(document).ready(function () {
            $('.gal-item img').asynchImageLoader({placeholder : "assets/templates/site/images/loading-thumb.gif"});
            $("a[rel='colorbox']").colorbox();
        });
    </script>

    <style type="text/css">

        body{
            font-family: Arial;
            font-size: 16px;
        }

        #Content{
            width: 600px;
        }

        .gal-item{
            float: left;
            margin: 10px;
            text-align: center;
        }

        .gal-item a{
            display: block;
        }

        .gal-item img{
            border: solid 4px #CCC;
        }

        .gal-item img:hover{
            border: solid 4px #666;
        }

    </style>

</head>

<body>

    <div id="Content">

        <h1>[ [*pagetitle] ]</h1>

        [ [*content] ]

        [ [!GalleryAlbums? &toPlaceholder=`GalleryAlbums` &limit=`0` &albumCoverSort=`rank` &prominentOnly=`0` &rowTpl=`DemoGalAlbumRowTpl` &thumbWidth=`195` &thumbHeight=`140`] ]

        [ [!Gallery? &checkForRequestTagVar=`1` &toPlaceholder=`Gallery` &useCss=`0` &containerTpl=`DemoGalleryAlbumTpl` &thumbWidth=`195` &thumbHeight=`140` &thumbTpl=`DemoGalItemThumb` &imageWidth=`800` &imageHeight=`800`] ]

        [ [!If? &subject=`[ [+Gallery]]` &operator=`isempty` &then=`

            [ [+GalleryAlbums] ]

        ` &else=`



        `]]

    </div>

</body>
</html>