MaxiGallery: Примеры

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>