Приклади

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>