MaxiGallery 0.5.2 Галерея

1. Скачайте MaxiGallery.

2. Распакуйте архив и поместите содержимое архива в корневую папку сайта. Файлы будут скопированы в правильное место.

3. Для папки assets/galleries/ необходимо установить права на запись.

4. Создайте новый сниппет MaxiGallery и поместите в него код из файла maxigallery.txt.

1. Создайте резервную копию файлов, на тот случай, если были внесены изменения в файловую систему, например, были добавлены языковые пакеты или файлы конфигурации.

2. Удалите папку /assets/snippets/maxigallery/

3. Распакуйте архив и поместите содержимое архива в корневую папку сайта. Файлы будут скопированы в правильное место.

4. Замените код сниппета MaxiGallery, поместив в него код из файла maxigallery.txt.

Если вы хотите установить новую версию, но не хотите удалять текущую установку MaxiGallery, вы можете сделать это с помощью параллельной установки.

1. Распакуйте архив на своем компьютере.

2. Переименуйте папку /assets/snippets/maxigallery таким образом: /assets/snippets/maxigallery-new.

3. Откройте файл maxigallery.txt и найдите в нем строку

define(MAXIGALLERY_PATH, "assets/snippets/maxigallery/");

Измените в ней название папки:

define(MAXIGALLERY_PATH, "assets/snippets/maxigallery-new/");

4. Поместите содержимое архива в корневую папку сайта. Файлы будут скопированы в правильное место.

5. Создайте новый сниппет MaxiGalleryNew и поместите в него код из файла maxigallery.txt.

6. Используйте следующий вызов сниппета: MaxiGalleryNew.

При возникновении ошибки

Function split() is deprecated

замените в файле maxigallery.class.inc.php в строке 242 устаревшую функцию split на explode.

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):

[[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>