• modx_deutsch
• downloads
• news
• dokumentation
• forum
• seitengalerie

Anwendung / Tipps

Im Folgenden soll gezeigt werden wie die MaxiGallery angewendet wird. Wichtig: Diese Liste erhebt keinerlei Anspruch auf Vollständigkeit, sie soll eher zeigen wie die verschiedenen Parameter, Templates und Funktionen kombiniert werden können. Die Möglichkeiten sind grenzenlos.

Einfach

[[MaxiGallery]]

mit Parametern

[[MaxiGallery? &display=`embedded` &embedtype=`slimbox` &pics_per_row=`3` &max_thumb_size=`110` &max_pic_size=`0` &thumb_use_dropshadow=`1`]]

Wasserzeichen Parameter für Thumbnail

[[MaxiGallery? &pics_per_row=`3` &max_thumb_size=`110` &max_pic_size=`400` &keep_bigimg=`1` &big_img_linkstyle=`popup` &thumb_use_watermark=`1` &thumb_watermark_txt=`Some watermark!` &pic_use_watermark=`1` &pic_watermark_type=`image`]]

Abfrage Beispiele

[!MaxiGallery? &gal_query_ids=`67,23,4` &display=`embedded` &embedtype=`slimbox` &order_by=`date` &limit=`5`!]

• gibt die 5 letzten Bilder der Galerie 67, 23, 4 zurück
• benutzt den Slimbox Modus

[!MaxiGallery? &gal_query_ids=`67` &query_level_limit=`5` &order_by=`random` &limit=`5`!]

• gibt 5 willkürliche Bilder der Galerie 67 und den 5 unteren (Kind) Galerien aus

[!MaxiGallery? &gal_query_ids=`all` &order_by=`random` &limit=`5`!]

• gibt 5 willkürliche Bilder aller Galerien aus

[!MaxiGallery? &pic_query_ids=`32,42,52,61` &display=`embedded` &embedtype=`smoothgallery`!]

• gibt Bilder mit der ID 32, 42, 52 und 61 in der SmoothGallery aus

Kindgalerie Beispiele

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

• Listet alle Galerien auf
• Jede Galerie hat ein willkürliches Bild im [+maxigallery.picture.fieldname+] Platzhalter
• Die Bilder sind nach dem „createdon“ des MODx Dokumentenfeld sortiert

[!MaxiGallery? &childgalleries_ids=`67,5` &display=`childgalleries` &order_by=`pos` &childgalleries_level_limit=`10`!]

• Listet alle Untergalerien von 67 und 5, 10 Level tief
• holt sich ein Bild von der Galerie [+maxigallery.picture.fieldname+] Platzhalter beim Positionsfeld

Photoblogging mit JOT

1. Mache einen neuen Junk mit den vordefinierten MaxiGallery pictureTpl Code von maxigallery/templates/picturetpl.html , nenne es zB mgPictureTplComment
2. in dieses Template füge deinen JOT Aufruf hinzu (du kannst die Parameter ändern aber &tagid muss beibehalten werden)

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

3. Erstelle das Galerie Dokument und rufe es mit MaxiGallery (+weitere Parameter die Du willst) auf [!MaxiGallery? &pictureTpl=`mgPictureTplComment`!]

Erstelle beliebige Ansichten

Nimm das Support Template, Du kannst die Snippet Ausgabe schöner machen. Hier ein paar Beispiele.

Bild und Thumbnail auf der gleichen Seite

Dieses Beispiel zeigt dir wie Du dein Template bearbeiten musst um beide Thumbnails und das Bild im gleichen Dokument darzustellen. Die Bilder werden dann mittels JavaScript gewechselt.

1. Erstelle einen Snippet Aufruf um die Thumbnails aufzulisten

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

2. Erstelle ein Chunk mgGalleryPicture welches benutzt wird um die Thumbs aufzulisten

<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. Erstelle ein Chunk mgJs der den JavaScript Code für das wechseln der Bilder beinhaltet. Du kannst auch in einer externen *.js Datei auslagern und den Pfad mit dem Parameter &js einfügen

<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');
img.src=url;
img.width=width;
img.height=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);
}
}
</script>

4. Erstelle einen anderen Snippet Aufruf im Dokument um das Bild aufzurufen. Wir benutzen &display=`pictureview` um es im vordefinierten Bildanzeige zu öffnen. Wenn Du andere Parameter benutzt um zu sortieren hast Du den selben Aufruf so bekommst Du das erste Bild automatisch.

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

5. Erstelle ein Chunk mgPicture welchen wir nutzen um das einzelne Bild darzustellen.

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

Das sollte es gewesen sein, schau das Resultat an.

Öffnen eines PopUps mit prev/next Links

Dieses Beispiel erklärt wie man ein PopUp Fenster, beim klicken auf ein Thumbnail, macht mit prev/next Links zum Navigieren durch die Bilder.
1. Erstelle ein neues Dokumente das als PopUp dient. Wähle als Template blank aus und deaktiviere die Checkbox im Menü anzeigen. Füge folgendes als Dokumenteninhalt ein.

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

Du kannst aber auch ein eigenes Template für das PopUp erstellen, dann muss Du nur noch den Snippet Aufruf als Dokumenteninhalt einfügen.

2. Erstelle ein Dokument mit folgendem Snippet Aufruf. Ersetze <docid> mit der ID des vorher erstllten PopUp Dokumentes.

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

3. Erstelle ein Chunk (mgJs) welche das JavaScript für das öffnen des Popups beinhaltet. Ändere die width und height auf deine gewünschte Größe.

<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. Erstelle ein neues Chunk (mgGalleryPicture). Dies wird benutzt für das Darstellen der Thumbnail

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

Das wars. Wenn Du nun auf ein Thumbnail klickst öffnet sich ein PopUp mit den prev/next Links. Du kannst auch selbst gemachtes pictureTpl Template benutzen und dort den Aufruf der MaxiGallery ändern und den index ändern damit das Popup noch einen „schließen“ Link erhält.

Ein Thumbnail auf einer Seite, aber alle Bilder in Slimbox/Lightbox v2

Dieses Beispiel zeigt wie man nur ein Thumbnail auf der Seite darstellt, aber alle Bilder in der Slimbox/Lightbox v2.

1. Rufe MaxiGallery mit einem Limit Parameter auf damit nur 1 Bild angezeigt wird

[!MaxiGallery? &display=`embedded` &embedtype=`slimbox` &order_by=`pos` &limit=`1` &galleryPictureTpl=`mgGalPicTpl`!] 

2. Erstelle ein galleryPictureTpl Chunk namens mgGalPicTpl. Folgendes hineinkopieren

<a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]"
rel="lightbox[set[+maxigallery.picture.gal_id+]]"
title="[+maxigallery.picture.title:htmlent+]
[+maxigallery.picture.descr:htmlent+]">
<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]"
class="thumbnail" title="[+maxigallery.picture.title:htmlent+]
[+maxigallery.strings.click_to_zoom+]"
alt="[+maxigallery.picture.title:htmlent+]
[+maxigallery.strings.click_to_zoom+]" />
</a>

3. Platziere den selben Aufruf ein zweites mal für die Galerie, aber mit einem unterschiedlichem Limit und den Templatewert auf „hide“ setzten, damit das Ergebnis unsichtbar ist.

[!MaxiGallery? &display=`embedded` &embedtype=`slimbox` &order_by=`pos` &limit=`99999` &galleryPictureTpl=`mgGalPicTplHidden`!] 

4. Erstelle ein galleryPictureTpl Chunk und nenne es mgGalPicTplHidden. Es muss folgendes beinhalten.

<a style="display:none;" href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]"
rel="lightbox[set[+maxigallery.picture.gal_id+]]"
title="[+maxigallery.picture.title:htmlent+] -
[+maxigallery.picture.descr:htmlent+]">&nbsp;</a>

Gut gemacht, Du hast es geschafft.

Tipps & Tricks

Hier findest Du hilfreiche „gut zu wissen“ Tipps.

Schnelltipps

• Besuche das Forum.
• Wenn Du MooTools in deinem Template verwendest, benutze &disable_js_lib=`1`im Snippet Aufruf, damit MaxiGallery nicht die MooTools Libary lädt. Das sollte alle Konflikte beseitigen.
• Bildmanipulation wie zB skalieren, Filter, Schlagschatten etc. geschehen alle beim Upload der Bilder. Wenn Du nachträglich die Größe ändern willst musst Du das Bild nochmals neu hinaufladen mit den geänderten Snippet Parametern.
• MaxiGallery Template Unterstützung PHx (Placeholders Xtended) was die Fähigkeit der Ausgabe der Platzhalter, Template Variablen und Einstellungstags erhöht.

PHx Custom Modifier Beispiel

Hier ist ein Beispiel wie mit PHx die Datumsausgabe des Platzhalters ändern kannst.

Erstelle ein Snippet phx:maxidate welcher den PHx Custom Modifier beinhaltet

<?php
return strftime($options, strtotime($output));
?>

kurze Erklärung zum Code:
Der Modifier wird so aufgerufen

[+maxigallery.picture.date:maxidate=`%m/%d/%Y`+]

Der Inhalt des ersten Teils wird in der $output Variable gespeichert der zweite Teil wird in der $options festgehalten. Strtotime() wird benutzt um den String in ein UNIX Timestamp Format umzuwandeln. Die Funktion strftime() wird benutzt um wieder ein leserliches Datum darzustellen. Diese wird dann wieder in die $options Variable gespeichert. Nun kannst Du in deinem MaxiGallery Template [+maxigallery.picture.date:maxidate=`%m/%d/%Y`+] verwenden um das Datum zu formatieren.

MaxiGallery Glossar

Slimbox

Ein Bildanzeige System welches Lightboxv2 ersetzt. Der JavaScript Code beträgt lediglich 7kb und ist ein Clone von Lightboxv2. Der Autor ist Lokesh Dhakar, geschrieben im kompakten MooTools Framework. Es wurde designed um schlank, effizient, leicht bedienbar und 100% kompatibel zu Lightboxv2 zu sein. Details und Beispiele kannst Du hier sehen: http://www.digitalia.be/software/slimbox

Slidebox

Ein Bildanzeige System. Slidebox ist ein JavaScript um Slideshows auf der aktuellen Seite zu machen. Details und Beispiele siehst Du hier: http://olivier.ramonat.free.fr/slidebox/

Lightboxv2

Ein Bildanzeige System. Es benutzt Prototype.js und scriptaculous.js während die meisten aktuellen MODx Snippets MooTools.js verwenden. Details und Beispiele siehst Du hier: http://www.huddletogether.com/projects/lightbox2/

Smoothgallery

Ein Bildanzeige System welches MooTools v1.0 benutzt, diese JavaScript Galerie und Slideshow erlaubt es dir schöne und einfache Fading Effekte, Bild Galerien, Slideshows, Showcases und andere coole Sachen umzusetzen. Details und Beispiele: http://smoothgallery.jondesign.net/

Childgallery (Kindgalerie)

Ein Anzeigemodus in MaxiGallery. Dieser Modus listet alle Galerien in einem bestimmten Eltern Dokument auf.

Thumbnail

Ein kleines Bild des Originals. Diese werden hauptsächlich für Übersichten verwendet, und bei einem Klick wird dann das große (Original) geladen.

Normale Bilder (normal images)

Normale Bilder werden im vordefiniertem JavaScript und in der Bildansicht verwendet. Diese sind größter als Thumbnails aber die Größe wird mit &pic_... kontrolliert.

Große Bilder (Vollbild)

In der MaxiGallery kannst Du den Parameter &keep_bigimg=`1` verwenden. Dieser macht dann eine große Ansicht (Original) vom Bild. Du kannst die Größe mit einer bestimmten max. Größe drosseln (&big_....)

Popup

Das PopUp ist ein neues Fenster das bei einem Klick auf ein Bild geöffnet werden kann

Schlagschatten

Ein Technik welches ein Schatten um ein Bild legt und somit aussieht als würde er über dem Hintergrund schweben. Denk dran die Schattenfarbe ist auf weiß voreingestellt. Du kannst sie mit dem Parameter &thumb_shadow_bgcolor (das gleiche auch für andere Bildgrößen) ändern.

Bildfilter (imagemask)

Eine Technik welche einen dekorativen Rahmen um das Bilder herum stellt.

Wasserzeichen

Ein leicht transparentes Bild das über das Thumbnail, normale ... Bild gelegt wird.

Rechtsklick verbieten

In MaxiGallery kannst Du den Parameter &disable_rightclick=`1` verwenden um ein JavaScript zu laden der den Rechtsklick der Maus deaktiviert. Das Bild kann aber leicht rauskopiert werden, wenn man zB den  Quelltext ansieht oder JavaScript einfach deaktiviert wird.