Примеры

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 галерей, которые необходимо вывести.

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

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

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

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

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

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

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

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

<li>
     <a href="javascript:void(0);"onClick="javascript:showPic('/','','',,);return false;">
        <img src="/tn_" class="thumbnail" title="" alt="" />
     </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="/" alt="" />
     <p id="maxTitle"></p>
     <p id="maxDescr"></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="https://docs.evo.im/" />
        <title>EvoDOC | 06_Примеры</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('');return false;">
        <img src="/tn_" class="thumbnail" title="" alt="" />
     </a>
     <p style="width: px;">
        
     </p>
</li>