Примеры

    MaxiGallery: Примеры

    Примеры сниппета MaxiGallery для организации галереи на MODX Evolution.

    Загрузка изображений с помощью FTP

    1. Определяем ID галереи, в которую необходимо закачать изображения. К примеру, эта галерея имеет ID 89.

    2. Создаем папку /assets/galleries/89 если такой папки еще не существует. Если в этой галерее уже существует несколько изображений, загруженных через MaxiGallery то такая папка должна уже существовать.

    3. Права на папку должны быть 777.

    4. Закачиваем в папку 89 изображения с помощью FTP.

    5. Права на изображения должны быть 666.

    6. Переходим к управлению изображениями в MaxiGallery и нажимаем кнопку "Пересинхронизировать Галерею".

    Простой вызов

    Создайте новый документ в дереве документов MODx и поместите в нем вызов сниппета:

    [!MaxiGallery!]

    Примечание: управление изображениями галереи (загрузка, сортировка, удаление) осуществляется не в административной панели а на странице с выводом галереи .

    При таком вызове на странице галереи отобразится кнопка для управления изображениями: "Manage pictures". Эта кнопка будет видна только авторизованным пользователям. Нажав на эту кнопку вы попадете на страницу с формой загрузки изображений. Все изображения загружаются в папку assets/galleries/ID-галереи/ где ID-галереи - это ID документа MODx, в котором помещен вызов галереи.

    Вызов с дополнительными параметрами

    [!MaxiGallery? &lang=`ru-utf8` &display=`embedded` &embedtype=`slimbox` &pics_per_row=`3` &max_thumb_size=`110` &max_pic_size=`0` &thumb_use_dropshadow=`1`!]

    где:

    • &lang=`ru-utf8` - подключаем языковой файл (см. Русский язык в MaxiGallery) По умолчанию en.
    • &display=`embedded` - выбираем тип галереи (по умолчанию normal).
    • &embedtype=`slimbox` - выбираем эффект смены изображений (только для типа галереи embedded).
    • &pics_per_row=`3` - определяем количество эскизов в одном ряду (по умолчанию 4).
    • &max_thumb_size=`110` - выбираем размер эскиза (по умолчанию 130).
    • &max_pic_size=`0` - устанавливаем размер нормального изображения как оригинальное (по умолчанию 450).
    • &thumb_use_dropshadow=`1` - включаем отображение тени у эскизов.

    Добавляем водяные знаки

    [!MaxiGallery?
    &lang=`ru-utf8`
    &pics_per_row=`3`
    &max_thumb_size=`110`
    &max_pic_size=`400`
    &keep_bigimg=`1`
    &big_img_linkstyle=`popup`
    &pic_use_watermark=`1`
    &pic_watermark_type=`image`!]
    

    где:

    • &keep_bigimg=`1` - сохраняем оригинал изображения.
    • &big_img_linkstyle=`popup` - выбираем способ отображения больших изображений.
    • &pic_use_watermark=`1` - включаем использование водяных знаков для изображений нормального размера.
    • &pic_watermark_type=`image` - устанавливаем тип водяного знака для нормальных изображений в виде картинки. Мы можем использовать собственную картинку для водяного знака, указав к ней путь с помощью параметра &pic_watermark_img=`путь к картинке`.

    Вывод дочерних галерей

    Создадим в папке Галереи несколько дочерних галерей Галерея 1, Галерея 2 и т.д. и загрузим фотографии. Мы можем вывести список всех дочерних галерей разместив в родительской папке Галереи такой вызов сниппета.

    [!MaxiGallery? &lang=`ru-utf8` &display=`childgalleries` &childgalleries_ids=`all` &order_by=`random` &childgalleries_order_by=`createdon`!]

    где:

    • &display=`childgalleries` - определяем тип галереи.
    • &childgalleries_ids=`all` - включаем отображение всех дочерних галерей. Мы также можем указать только определенные галереи, указав список ID галерей через запятую.
    • &order_by=`random` - включаем отображение случайного изображения из дочерней галереи.
    • &childgalleries_order_by=`createdon` - поле, по которому сортируются дочерние галереи.

    Вывод заданных дочерних галерей

    [!MaxiGallery? &lang=`ru-utf8`&display=`childgalleries` &childgalleries_ids=`67,5`!]

    где:

    • &childgalleries_ids=`67,5` - задаем ID галерей, которые необходимо вывести.

    Фотоблог с Jot

    1. Создайте новый чанк, например, mgPictureTplComment и поместите в него код из файла maxigallery/templates/picturetpl.html.

    2. В этот шаблон добавьте вызов Jot (вы можете изменять все параметры сниппета, кроме &tagid):

    [[Jot?
    &subscribe=`1`
    &tagid=`[+maxigallery.picture.id+]`
    &pagination=`10`
    &badwords=`something`
    &customfields=`name,email`
    &canmoderate=`Jot Moderators`
    &trusted=`Jot Trusted Users`]]
    

    3. Создайте новую галерею и поместите такой вызов сниппета (добавьте к вызову любые параметры, которые вы хотите):

    [!MaxiGallery? &pictureTpl=`mgPictureTplComment`!]

    Изображения и эскизы на одной странице

    Этот пример показывает, как сделать собственный шаблон, чтобы получить эскизы и картины в одном документе и добавить изменение изображения с помощью JavaScript.

    1. Создаем вызов сниппета, отображающий список эскизов:

    [!MaxiGallery? &galleryPictureTpl=`mgGalleryPicture` &js=`mgJs`!]

    2. Создаем чанк mgGalleryPicture , который будет использоваться при просмотре эскизов:

    <li>
         <a href="javascript:void(0);"onClick="javascript:showPic('[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]','[+maxigallery.picture.title:htmlent+]','[+maxigallery.picture.descr:htmlent+]',[+maxigallery.picture_width_normal+],[+maxigallery.picture_height_normal+]);return false;">
            <img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" title="[+maxigallery.picture.title:htmlent+]" alt="[+maxigallery.picture.title:htmlent+]" />
         </a>
    </li>
    

    3. Создаем чанк mgJs с JavaScript, котрый будем использовать для переключения изображений. (Можно также создать его как внешний файл .js и определить путь к нему в параметре &js):

    <script type="text/javascript">
        function showPic(url,title,descr,width,height) {
            var img = document.getElementById('maxImage');
            var titleHolder = document.getElementById('maxTitle');
            var descrHolder = document.getElementById('maxDescr');
            var newImg = new Image();
            newImg.onLoad = doImage(img,url,width,height);
            if (titleHolder != null) {
                for (var i = 0; i < titleHolder.childNodes.length; i++) {
                    titleHolder.removeChild(titleHolder.childNodes[i]);
                };
                if (title != "") {
                    var node=document.createTextNode(title);
                }
                else {
                    var node=document.createTextNode("");
                }
                titleHolder.appendChild(node);
            }
            if (descrHolder != null) {
                for (var i = 0; i < descrHolder.childNodes.length; i++) {
                    descrHolder.removeChild(descrHolder.childNodes[i]);
                };
                if (descr != "") {
                    var node=document.createTextNode(descr);
                }
                else {
                    var node=document.createTextNode("");
                }
                descrHolder.appendChild(node);
            }
        }
    
        function doImage(img,url,width,height) {
            img.src=url;
        }
    </script>
    

    4. Создаем еще один вызов снипеета, чтобы показать изображение. Мы используем параметр &display=`pictureview`, чтобы показывать изображение в режиме просмотра по умолчанию. Если вы используете какие-то другие параметры сортировки, чем использующиеся по умолчанию, добавьте их в этот вызов сниппета, так он получает первое изображение автоматически.

    [!MaxiGallery? &pictureTpl=`mgPicture` &display=`pictureview`!]

    5. Создаем чанк mgPicture для показа одного изображения:

    <div class="picturecontainer">
         <img id="maxImage" src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" alt="[+maxigallery.picture.title:htmlent+]" />
         <p id="maxTitle">[+maxigallery.picture.title:htmlent+]</p>
         <p id="maxDescr">[+maxigallery.picture.descr:htmlent+]</p>
    </div>
    

    Всплывающее окно с эскизами

    Этот пример показывает, как сделать всплывающее окно с эскизами изображений, которое имеет prev/next ссылки.

    1. Создайте новый документ для всплывающего окна. Выберите шаблон blank, снимите флажок с Показывать в меню. В содержимое документа поместите следующий код:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
        <head>
            <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
            <base href="[(site_url)]" />
            <title>[(site_name)] | [*pagetitle*]</title>
        </head>
    <body
        [!MaxiGallery? &is_target=`1`!]
    </body>
    </html>
    

    2. Создайте новый документ для показа эскизов и поместите в него ттакой вызов сниппета. Замените <docid> на идентификатором документа, который вы сделали в шаге 1:

    [!MaxiGallery? &js=`mgJs` &galleryPictureTpl=`mgGalleryPicture` &picture_target=`<docid>`!]
    

    3. Создать чанк mgJs, содержащий JavaScript, открывающий всплывающее окно. Измените ширину и высоту окна на необходимые:

    <script type="text/javascript">
        function openWindow(URL) {
            var day = new Date();
            var id = day.getTime();
            var width=600;
            var height=600;
            var left = Math.floor( (screen.width - width) / 2);
            var top = Math.floor( (screen.height - height) / 2);
            var str = "page" + id + " = window.open('" + URL + "', '" + id +
        "','toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width="
        + width + ",height=" + height + ",left=" + left + ",top=" + top +
        "');";
             eval(str);
             if (window.focus) {eval("page"+id+".focus();");}
        }
    </script>
    

    4. Создайте чанк mgGalleryPicture с шаблоном, который будет использоваться при просмотре эскизов:

    <li>
        <a href="javascript:void(0);"onClick="javascript:openWindow('[+maxigallery.picture_link_url+]');return false;">
            <img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" title="[+maxigallery.strings.click_to_zoom+]" alt="[+maxigallery.picture.title:htmlent+]" />
         </a>
         <p style="width: [+maxigallery.picture_width_thumb+]px;">
            [+maxigallery.picture.title:htmlent+]
         </p>
    </li>