De:MaxiGallery

From MODx Wiki

Jump to: navigation, search

 MODx Snippet 

MaxiGallery v0.5.2
Author 
doze
MODx Versions 
all
Last Updated 
today

Contents

Die komplette deutsche Version folgt. Vielen Dank an Manuel Schneider für die Übersetzung.

[edit]

Downloads

[edit]

Demo

Folgende Webseite hat einige gute Beispiele mit verschiedenen Wege MaxiGallery einzubinden und listet deren Aufrufe auf. Seite besuchen

[edit]

Beschreibung

Ultra anpassbares Bildergalerie-Snippet mit vielen Features wie z.B. automatischer Thumbnailerstellung, Größenjustierung, Filtereffekten, Wasserzeichen, AJAX erlaubtes Browsing, ausführlicher Rechteverwaltung, Front-End Benutzer/Gruppen Galerien, komplette Templateausgabe, etc...

[edit]

Features

  • Valide XHTML 1.0 Transitional Ausgabe mit CSS Styling. Einfache Anpassung auf (X)HTML Strict.
  • Externe Sprachdateien für bequeme Implementierung von Multi-Sprach Galerien. Momentan wird nur die Englische Sprachdatei ausgeliefert, andere werden ergänzt wenn diese auf dem neuesten Stand sind.
  • Möglich den Webnutzer/Gruppen die Verwaltung der Eigenen oder der Geteilten Galerien zu übertragen und einen "Admin" Status zu haben
  • Integrierte JavaScript Anzeige (MooTools und Scriptaculous/Prototype): Slidebox, Lightbox 2.0, Slimbox, SmoothGallery, etc. Einfache Integration anderer Scripte
  • Mögliche Sortierung durch ziehen der Bilder (MooTools und Scriptaculous/Prototype)
  • Wasserzeichen (Text oder transparentes PNG Bild), Bildmaskierung mit Gray-Scale-Mask,Schatten Effekte
  • volle Templatebasierte Ausgabe, Template Parameter Unterstützung wie @CODE und @File Bindings
  • möglicher Einsatz von config Dateien um Snippet Parameter mit anzugeben. Einfaches Verteilen von Beispielen in Foren etc.
  • mögliches Abfragen von Bildern in bestimmten Galerien.
  • mögliches Auflisten aller Galerie Dokumente, oder nur bestimmten Elterndokumenten und Stufen in der Baumstruktur. TV's werden unterstützt
  • mögliche Erstellung von zentralisierten Management sichten
  • mögliches Anschauen der Galerien von anderen Webseiten, mögliches verwalten der Galerien von anderen Webseiten
  • mögliches setzen von der max. Bilderanzahl in einer Galerie
  • möglich 3 verschiedene Größen eines Bildes zu haben. Thumbnail, normal und groß. Die Bildgröße wird autom. auf die max. Breite/Höhe angepasst. Die Proportionen bleiben erhalten.
  • möglich die Qualität prozentual auf jedes Bild zu verändern.
  • Einfache Umsetzung eines Fotoblog mit Hilfe von JOT
  • Unterstützt jpg/jpeg, gif und png (GIF werden in PNG um konvertiert). Bilder in zip Archiven werden extrahiert, wenn ZZIPlib installiert ist.
  • mögliches absetzen von FPT Kommandos um System Galerie Verzeichnisse zu erstellen. Das ist in bestimmten Serverumgebungen nötig.


[edit]

Geplante Features

  • phpThumb verwenden, um Bilder zu manipulieren/erstellen
  • Versuch den iManager zu benutzen/modifizieren um Bilder einer Galerie hinzuzufügen
  • Möglichkeit um bereits hinaufgeladen Bilder mehreren Galerien hinzuzufügen ohne das eine Kopie des Bild erstellt wird (mit phpThumb möglich)
  • Möglichkeit um die Thumbnails abzuschneiden und in ein bestimmt großes Quadrat darzustellen, dabei soll es egal sein wie groß das Original ist. (auch mit phpThumb möglich)
  • Möglichkeit Bilder anschließend in der Galerie Verwaltung mit Filter zu versehen und ev. Filter Einstellungen pro Bild zu ändern.
  • Modul um alle Galerien im Back-End zu verwalten.


[edit]

Installation

[edit]

Neuinstallation

  • Extrahieren der Inhalte der ZIP Datei auf deinem Computer
  • mit FTP auf deinen Server und zur MODx Installation Verzeichnis wechseln
  • nimm das extrahierten assets Verzeichnis und kopiere es ins richtige Verzeichnis
  • Mache das Verzeichnis assets/galleries/ beschreibbar (CHMOD 777 ausgenommen du befindest dich in phpSuExec Umgebung, in diesem Fall CHMOD 755)
  • Schließe das FTP Programm und wechsle zu MODx.
  • Erstelle ein neues Snippet genannt MaxiGallery und kopiere den kompletten Inhalt vonmaxigallery.txt hinein
  • Rufe das Snippet in einigen Dokumenten, mit den Parametern die du willst, auf.
  • Gehe nun zum Dokument wo du das Snippet aufgerufen hast und du solltest einen Manage Picture Button sehen.
    • Anmerkung: denk daran du musst im Manager eingeloggt sein und du brauchst Rechte um das Dokument zu ändern
  • Lade einige Bilder hoch und bewundere das Ergebnis


[edit]

Upgrade von einer vorherigen Version

  • Extrahieren der Inhalte der ZIP Datei auf deinem Computer
  • mit FTP auf deinen Server und lösche das /assets/snippets/maxigallery Verzeichnis (wenn du irgendwelche Dateien geändert hast zB config Dateien, Sprachdateien, etc... , denk daran ein Backup zu erstellen
  • Übertrage den assets Ordner von der ZIP Datei ins Root und die Dateien werden automatisch an den richtigen Platz kopiert.
  • Gehe nun zum MODx Manager und kopiere den neuen Code von der maxigallery.txt ins Snippet
  • Besuche die Seite und sieh wie es aussieht.


[edit]

Parallele Installation

Wenn du eine neue Version installieren und testen du aber die alte nicht löschen willst, kannst du beide Versionen parallel installieren:

  • Extrahieren der Inhalte der ZIP Datei auf deinem Computer
  • Benenne den assets/snippets/maxigallery Ordner in der extrahierten Datei um, z.B. assets/snippets/maxigallery-new
  • Öffne die extrahierte maxigallery.txt und ändere folgendes: 
    define(MAXIGALLERY_PATH, "assets/snippets/maxigallery/");
    zu 
    define(MAXIGALLERY_PATH, "assets/snippets/maxigallery-new/");
  • Übertrage den assets Ordner von der ZIP Datei ins Root und die Dateien werden automatisch an den richtigen Platz kopiert.
  • Gehe zum MODx Manager und erstelle ein neues Snippet, nenne es MaxiGalleryNew und kopiere den Code vom maxigallery.txt hinein.
  • Benutze den neuen Snippet Aufruf MaxiGalleryNew in neuen Dokumenten und sieh dir das Resultat an.


[edit]

Verwendung

[edit]

Erstelle deine erste Galerie

  1. Erstelle in MODx einen Ordner, nenne in Meine Galerien
  2. Überprüfe ob das Dokument veröffentlicht ist (Published)
  3. Rufe das Snippet folgendermaßen im Eingabefeld auf und speichere es: 
    [!MaxiGallery? &display=`childgalleries`!]
  4. Erstelle ein neues Dokument in dem Ordner und nimm als Titel Galerie 1
  5. Überprüfe ob das Dokument veröffentlicht ist (Published)
  6. Rufe das Snippet nun folgendermaßen im Eingabefeld des Dokumentes auf und speichere es: 
    [!MaxiGallery? &display=`embedded` &embedtype=`slimbox` &pics_per_row=`3`&max_thumb_size=`110` &max_pic_size=`0` &thumb_use_dropshadow=`1`!]
    (du kannst auch ein anderen Aufruf nehmen)
  7. Wiederhole diese Schritte 4 – 6 mal solange bis du genügend Galerien hast
  8. Gehe zum Galerie 1-x Dokument und lade Bilder mit Hilfe des Manage Picture Buttons hoch. (Du musst im Manager oder im Front-End eingeloggt sein und du brauchst die entsprechenden Rechte)


WICHTIG: Es liegt an deinen Server Einstellungen wie viel Bilder du auf einmal hinaufladen kannst und wie groß diese sein dürfen. Der Bild Maskierungsprozess zB ist sehr langsam und es kann sein das du eine „Maximum execution time of NN seconds exceeded“ Fehlermeldung bekommst, wenn du versuchst viele Bilder gleichzeitig mit „Bildmaskierung“ auf einmal hochzuladen oder wenn die Bilder groß sind (Dateigröße). Also wenn du große Bilder hinauflädst kann es sein das du eine „Memory Size Exhausted“ Fehlermeldung bekommst, weil der Prozess benötigt auch viel Arbeitsspeicher. Diese Fehler sind keine Fehler im Snippet Code, diese kommen von den Server Einstellungen. MaxiGallery versucht mit„ini_set“ die Einstellungen für die max. Ausführzeit (max execution time) und den Speicherlimit (Memory Limit) zu ändern wenn nötig, dies kann aber nicht funktionieren wenn sich PHP im Safe-Mode befindet. Es ist durchaus möglich das du keine Fehlerseite siehst, es kann auch sein das du nur eine leere Seite siehst wenn du Bilder hinaufgeladen hast. Wenn du in /assets/gallery/<docid>/ schaust kann es sein das einige Thumbnails erstellt wurden aber nicht alle. Dies passiert wenn die max. Ausführzeit oder das Speicherlimit erreicht wurde.

Überprüfe also bitte folgende Werte in der php.ini

  • max_execution_time: Das ist die max. Ausführzeit (in sek.) eines Scripts. Es kann lange dauern wenn du viele Bilder hochlädst oder wenn du „Filter“ verwendest.
  • max_input_time: Dieser Wert setzt fest wie lange ein Script Inputs empfangen darf (in Sekunden).
  • memory_limit: Dies ist die max. Höhe des Speichers, in MB, welches ein Script benutzen darf (MaxiGallery behält ein Teil des Speichers während es Thumbnails erstellt).
  • post_max_size: Das ist die max. Größe, in MB, die PHP mit POST akzeptiert.
  • upload_max_filesize: Das ist die max. Größe einer Datei, in MB, die akzeptiert wird.

Diese Einstellungen kannst du auch mit Apache tätigen, also überprüfe ob du folgendes in deiner httpd.conf finden kannst.

  • php_admin_value upload_max_filesize: Setzt die dazugehörigen PHP Einstellungen, siehe oben.
  • php_admin_value post_max_size: Setzt die dazugehörigen PHP Einstellungen, siehe oben.
  • php_admin_value memory_limit: Setzt die dazugehörigen PHP Einstellungen, siehe oben.
  • LimitRequestBody: Das selbe wie post_max_size, nur für den Apache.

Überprüfe in der php.ini ob die GD Library geladen wird.

  • extension=php_gd2.dll: (Windows) oder extension=gd.so: (Linux)
[edit]

Parameters

Parameter Possible values Default value

&admin_webgroups

Web usergroup names that have admin user privileges and who are allowed to manage all pictures in the gallery.

Comma delimited list of web usergroup names

&admin_webusers

Web usernames that have admin user privileges and who are allowed to manage all pictures in the gallery.

Comma delimited list of web user names.

&big_img_linkstyle

Display type for big images that are opened from browse mode.

  • slidebox
  • lightboxv2
  • popup
  • external

external

&big_mask_bgcolor

Mask background color for big pictures. It should be the same color as the page background color.

RGB Hexadecimal

FFFFFF

&big_mask_img

Path to the image that you wish to be applied as an imagemask to the big pictures.

path

assets/snippets/
maxigallery/
imagemask/
demomask–frame2.png

&big_mask_position

The Imagemask position.

The resize option resizes the imagemask to the size of the picture.

  • top
  • topleft
  • topright
  • left
  • center
  • right
  • bottom
  • bottomleft
  • bottomright
  • resize

resize

&big_shadow_bgcolor

Shadow background color for big pics. This should be the same color as the page background color.

RGB Hexadecimal

FFFFFF

&big_shadow_path

Path to your shadow images, if you do not want to use the default shadow images.

path

assets/snippets
/maxigallery/dropshadow/

&big_use_dropshadow

Use a dropshadow on big pictures.

  • 0
  • 1

0

&big_use_imagemask

Use an imagemask on big pictures.

  • 0
  • 1

0

&big_use_watermark

Watermark big images.

  • 0
  • 1

0

&big_watermark_font

Font size for the watermark text.

  • 1
  • 2
  • 3
  • 4
  • 5

5

&big_watermark_halign

Horizontal alignment of the watermark.

  • left
  • center
  • right

right

&big_watermark_img

Path to the watermark image. It can be a transparent png. Make the margins of the watermark as transparent areas.

path

assets/snippets/
maxigallery/watermark/
watermark.png

&big_watermark_txt

For text watermarks, this is the text that will be applied to the picture.

text

Copyright <YEAR> <SITENAME>

&big_watermark_txt_color

Color of the watermark text.

RGB Hexadecimal

FFFFFF

&big_watermark_txt_hmargin

Horizontal margin of the watermark text (in pixels).

Number (px)

15

&big_watermark_txt_vmargin

Vertical margin of the watermark text (in pixels).

Number (px)

15

&big_watermark_type

Type of watermark to use: a text watermark or an image watermark . (user provided image).

  • image
  • text

text

&big_watermark_valign

Vertical alignment of the watermark.

  • top
  • center
  • bottom

bottom

&childgalleries_ids

Parent documents to search,looking for childgalleries.

  • Comma delimited list of document ID's to search for childgalleries.
  • "all" to list all galleries.

Current document

&childgalleries_level_limit

Defines how many levels deep to list childgalleries from parent document. Zero for unlimited, eg. all levels.

Number

0

&childgalleries_limit

Defines how many childgalleries to list. Zero for unlimited number.

Number

0

&childgalleries_order_by

The field name to use to order the childgalleries display.

MODx document object field.

menuindex

&childgalleries_order_direction

The display direction for the childgalleries: ascending or descending.

  • ASC
  • DESC

ASC

&childgalleryTpl

The template used for a child gallery element (image) in the gallery overview.

  • Chunk name
  • @FILE:<path to a file>
  • @CODE:<template string>

@FILE:assets/snippets
/maxigallery/templates
/childgallerytpl.html

&clearerTpl

The template to use when using &pics_per_row parameter as a row clearer.

  • Chunk name
  • @FILE:<path to a file>
  • @CODE:<template string>

@FILE:assets/snippets
/maxigallery/templates
/clearertpl.html

&css

The path to link a css file that styles this gallery, or chunk name containing the css, or css as a string.

Examples:
assets/css/gallery.css
MaxigalleryCss
<style>.classname{}</style>
  • Chunk name
  • path to a file
  • template string

assets/snippets/maxigallery/ css/default.css

&debug

Shows some debug information in the MaxiGallery page. (feature not fully implemented yet).

  • 0
  • 1

0

&disable_js_libs

Used when MooTools, Prototype or Scriptaculous javascript libraries are linked in the head of the site template and you want to prevent MaxiGallery from calling them also.

  • 0
  • 1

0

&disable_rightclick

Enables a javascript to disable 'right clicking' on page to save the images.

  • 0
  • 1

0

&display

Select the gallery display mode.

  • normal
  • embedded
  • childgalleries
  • pictureview

normal

&draggableTpl

The template used for drag sort popup.

  • Chunk name
  • @FILE:<path to a file>
  • @CODE:<template string>

@FILE:assets/snippets
/maxigallery/templates
/draggabletpl.html

&embedtype

If &display mode is set to "embedded", this defines the gallery display type. External will open the image in a new window.

  • slidebox
  • lightboxv2
  • slimbox
  • smoothgallery
  • popup
  • external

&ftp_base_dir

Path to go from FTP root to MODx installation root. Eg. if your FTP root directory is /home/username/ and MODx is installed in /home/username/public_html/modx/ you would use /public_html/modx/ as ftp_base_dir.

path

&ftp_pass

FTP account password

password

&ftp_port

Port number for the FTP service.

number

21

&ftp_server

FTP address to the server running MODx.

FTP address

&ftp_user

FTP account username

username

&gal_query_ids

ID's of the documents from which you want to retrieve pictures.

  • Comma delimited list of document ID's
  • "all" to get pictures from all galleries

&galleryOuterTpl

The outer template for the gallery overview.

  • Chunk name
  • @FILE:<path to a file>
  • @CODE:<template string>

@FILE:/assets/snippets
/maxigallery/templates
/galleryoutertpl.html

&galleryPictureTpl

The template for each picture element (thumbnail) in the gallery overview.

  • Chunk name
  • @FILE:<path to a file>
  • @CODE:<template string>

@FILE:/assets/snippets
/maxigallery/templates
/gallerypicturetpl.html

&gtable

Name of the database table for the gallery (modx table prefix is added)

text

maxigallery

&is_target

Determines if the document is to be the target for picture browsing mode or picture manager mode.

  • 0
  • 1

0

&js

Link to an extra javascript file supporting a gallery or chunk name or javascript code as text.

Examples:
/assets/js/gallery.js
MaxigalleryJs
<scripttype="text/javascript">
alert(hello);</script>

  • path
  • chunk name
  • text

&keep_bigimg

Keep an additional larger or original size version of the image.

  • 0
  • 1

0

&keep_date

When modifying an image title or description, keep the original upload date.

  • 0
  • 1

1

&lang

Sets the gallery language.

Note: Language files are not fully implemented yet. Feel free to add your language(s). (See lang_en.php for examples.)

  • en
  • fi

en

&limit

Limit value to use for the query result set.

Maximum number of rows for query.

9999999

&manage_gallery

ID of the gallery to be managed. The ID of the document (page) that has the gallery call. Use this to avoid going to the gallery page. Set the same parameters as used in the gallery itself.

Document id

&manage_target

ID of the document that will be used for managing the pictures. Use the same snippet call in that target document and add the parameter: &is_target=`1` to the call.

Document id

&manageOuterTpl

The outer template for gallery management.

  • Chunk name
  • @FILE:<path to a file>
  • @CODE:<template string>

@FILE:/assets/snippets
/maxigallery/templates
/manageoutertpl.html

&managePictureTpl

The template for a single picture element in the gallery management.

  • Chunk name
  • @FILE:<path to a file>
  • @CODE:<template string>

@FILE:/assets/snippets
/maxigallery/templates
/managepicturetpl.html

&manager_webgroups

Comma delimited web groups that can post pictures to this gallery and can manage their own pictures.

Comma delimited list of web groups.

&manager_webusers

Comma delimited web user names that can post pictures to this gallery and can manage their own pictures.

Comma delimited list of web users.

&manageButtonTpl

The template for the manage pictures button.

  • Chunk name
  • @FILE:<path to a file>
  • @CODE:<template string>

@FILE:/assets/snippets
/maxigallery/templates
/managebuttontpl.html

&manageUploadTpl

The template for the file upload rows in gallery management.

  • Chunk name
  • @FILE:<path to a file>
  • @CODE:<template string>

@FILE:/assets/snippets
/maxigallery/templates
/manageuploadtpl.html

&max_big_size

Size of the big image. Pixel size of largest dimension, or zero to use original image dimensions.

  • Number (px)
  • WidthxHeight (px) (eg. 200x400)

1024

&max_pic_number

Maximum number of images allowed in this gallery. Use zero for an unlimited number of images.

Number

0

&max_pic_size

Maximum size in pixels of the normal picture. (largest dimension). Zero for unlimited size.

  • Number (px)
  • WidthxHeight (px) (eg. 200x400)

450

&max_thumb_size

Maximum size in pixels of the thumbnail pictures. (largest dimension)

  • Number (px)
  • WidthxHeight (px) (eg. 200x400)

130

&offset

Offset value to use for the query result set.

Number of rows to skip.

0

&order_by

The database field name to use to order the pictures by. If “random” is used maxigallery will show pictures in a random order or will display a random picture in the childgalleries display mode.

  • date
  • pos
  • filename
  • title
  • id
  • random

pos,date

&order_direction

Sort order direction: ascending or descending.

  • ASC
  • DESC

DESC

&pageNumberTpl

The template to display page numbers in the gallery overview.

  • Chunk name
  • @FILE:<path to a file>
  • @CODE:<template string>

@FILE:/assets/snippets
/maxigallery/templates
/pagenumbertpl.html

&pic_mask_bgcolor

Mask background color for normal pics. This should be the same color as the page background color.

RGB Hexadecimal

FFFFFF

&pic_mask_img

Path to the image to be applied as an imagemask to the normal pictures.

path

assets/snippets
/maxigallery/imagemask
/demomask-frame2.png

&pic_mask_position

The Imagemask position. The resize option resizes the imagemask to the size of the picture.

  • top
  • topleft
  • topright
  • left
  • center
  • right
  • bottom
  • bottomleft
  • bottomright
  • resize

resize

&pic_query_ids

ID's of single pictures to retrieve.

Comma delimited list of picture ID's

&pic_shadow_bgcolor

Shadow background color for normal pics. This should be the same color as page background color.

RGB Hexadecimal

FFFFFF

&pic_shadow_path

Path to the shadow images to be used, if you don't wish to use the default shadow images.

path

assets/snippets
/maxigallery/dropshadow/

&pic_use_dropshadow

Apply a dropshadow to normal pictures.

  • 0
  • 1

0

&pic_use_imagemask

Apply an imagemask to normal pictures.

  • 0
  • 1

0

&pic_use_watermark

Watermark normal images.

  • 0
  • 1

0

&pic_watermark_font

Font size for text watermarks.

  • 1
  • 2
  • 3
  • 4
  • 5

3

&pic_watermark_halign

Horizontal alignment of the watermark.

  • left
  • center
  • right

right

&pic_watermark_img

Path to a watermark image. Use a png image with a transparent background alpha layer.

path

assets/snippets
/maxigallery/watermark
/watermark.png

&pic_watermark_txt

Text that will be applied to the images as a watermark.

text

Copyright <YEAR> <SITENAME>

&pic_watermark_txt_color

Color of the watermark text.

RGB Hexadecimal

FFFFFF

&pic_watermark_txt_hmargin

Horizontal margin in pixels of the watermark text.

Number (px)

10

&pic_watermark_txt_vmargin

Vertical margin in pixels of the watermark text.

Number (px)

10

&pic_watermark_type

Determines the type of the watermark to be used, either text or image. (image is user supplied.)

  • image
  • text

text

&pic_watermark_valign

Vertical alignment of the watermark.

  • top
  • center
  • bottom

bottom

&pics_per_page

The number of thumbnail pictures to show per page in the gallery overview. Zero for unlimited pictures.

Number

0

&pics_per_row

The number of thumbnail pictures to show in a row in the gallery overview.

Number

4

&picture_target

ID of the document that will be used for browsing the pictures. Use the same snippet call in that target document and add the parameter: &is_target=`1` to the call.

Document id

Current document

&pictureTpl

The template for the picture view.

  • Chunk name
  • @FILE:<path to a file>
  • @CODE:<template string>

@FILE:/assets/snippets
/maxigallery/templates
/picturetpl.html

&pictureview_start_id

If pictureview display mode is used, this parameter can be used to define the picture id from which to start automatically.

Picture id

&pictureview_start_pos

If pictureview display mode is used, this parameter can be used to define the position from which to start automatically.

Picture number to start from

First picture

&quality_big

The quality of the big picture. A percentage between 0-100 for the big images.

Number (%)

100

&quality_pic

The quality. Percentage between 0-100 for the normal images.

Number (%)

70

&quality_thumb

The quality percentage between 0-100 for the thumbnail images.

Number (%)

70

&query_level_limit

Defines how many levels deep to go from the parent in gal_query_ids documents.

Number

1

&random_filenames

If enabled, this will apply generated random filenames to uploaded pictures.

  • 0
  • 1

0

&smoothgallery_carouselMaximizedOpacity

Opacity value for the carousel when it is maximized.

Where:

0 = is transparent (not visible) and 1.0 = is totally opaque

Number

0.7

&smoothgallery_carouselMinimizedHeight

Height in pixels of the minimized carousel.

Number (px)

20

&smoothgallery_carouselMinimizedOpacity

Opacity value for the carousel when it is minimized.

Where:

0 = is transparent (not visible) and 1.0 = is totally opaque

Number

0.4

&smoothgallery_delay

Delay in milliseconds for the timed slideshow picture change.

Number (ms)

9000

&smoothgallery_embedLinks

Open picture by clicking on the slide.

NOTE: if you remove this parameter, also remove the link tags from galleryPictureTpl

  • true
  • false

true

&smoothgallery_fadeDuration

Duration in milliseconds of the fade effect.

Number (ms)

500

&smoothgallery_height

Height in pixels for the smoothgallery div. Overflow will be hidden, so this should be the height of biggest picture (eg. same as max_pic_size).

Number (px)

max_pic_size

&smoothgallery_id

Individual id for the smoothgallery instance. This allows to have multiple smoothgalleries in one page.

Text

Gallery id

&smoothgallery_preloader

Preload the pictures.

  • true
  • false

true

&smoothgallery_showArrows

Show the next - back arrows in the slideshow.

  • true
  • false

true

&smoothgallery_showCarousel

Show the thumbnails in carousel mode when using slideshow.

  • true
  • false

true

&smoothgallery_showInfopane

Show the info pane (this is the picture title and description).

  • true
  • false

true

&smoothgallery_slideInfoZoneOpacity

Opacity value in % for the info pane. This determines the visibility of the infopane.

Where:

0 = is transparent (not visible) and 1.0 = is totally opaque

Number

0.7

&smoothgallery_textShowCarousel

Text that is shown in the carousel.

text

'pictures' text from the the language file

&smoothgallery_thumbHeight

Height of the thumnails, in pixels, in the SmoothGallery carousel.

Number (px)

75

&smoothgallery_thumbSpacing

Space in pixels between thumbnails in the SmoothGallery carousel.

Number (px)

10

&smoothgallery_thumbWidth

Width in pixels of the thumbnails in SmoothGallery carousel.

Number (px)

100

&smoothgallery_timed

Change the image in a timed slideshow mode.

  • true
  • false

false

&smoothgallery_width

Width in pixels, for the smoothgallery div. Overflow (of the picture) will be hidden, so this should be the maximum width of the biggest picture (eg. same as max_pic_size).

(px)

max_pic_size

&thumb_mask_bgcolor

Mask background color for thumbnail pics. It should be the same as color as the page background color.

RGB Hexadecimal

FFFFFF

&thumb_mask_img

Path to an imagemask image that is to be applied to the thumbnail pictures.

path

assets/snippets
/maxigallery/imagemask
/demomask-frame1.png

&thumb_mask_position

Imagemask position. The resize option resizes the imagemask to the size of the picture.

  • top
  • topleft
  • topright
  • left
  • center
  • right
  • bottom
  • bottomleft
  • bottomright
  • resize

resize

&thumb_shadow_bgcolor

The shadow background color for thumbnail pics. This should be the same color as page background color.

RGB Hexadecimal

FFFFFF

&thumb_shadow_path

The path to the dropshadow images. If you do not wish to use the default shadow images, set this to the path to your shadow images.

path

assets/snippets
/maxigallery/dropshadow/

&thumb_use_dropshadow

Apply a dropshadow to thumbnail pictures.

  • 0
  • 1

0

&thumb_use_imagemask

Apply an imagemask to thumbnail pictures.

  • 0
  • 1

0

&thumb_use_watermark

Watermark the thumbnail images.

  • 0
  • 1

0

&thumb_watermark_font

Font size of the watermark text.

  • 1
  • 2
  • 3
  • 4
  • 5

1

&thumb_watermark_halign

Horizontal alignment of the watermark.

  • left
  • center
  • right

right

&thumb_watermark_img

Path to a watermark image. Use a png image with a transparent background alpha layer.

path

assets/snippets
/maxigallery/watermark
/watermark.png

&thumb_watermark_txt

Text that will be applied to the images as a watermark.

text

Copyright <YEAR>

&thumb_watermark_txt_color

Color of the watermark text.

RGB Hexadecimal

FFFFFF

&thumb_watermark_txt_hmargin

Horizontal margin of the watermark text.

Number (px)

2

&thumb_watermark_txt_vmargin

Vertical margin of the watermark text.

Number (px)

2

&thumb_watermark_type

Type of the watermark to use. Either text or a user supplied image.

  • image
  • text

text

&thumb_watermark_valign

Vertical alignment of the watermark.

  • top
  • center
  • bottom

bottom

&use_ftp_commands

If enabled, MaxiGallery uses PHP FTP commands to create filesystem folders for the gallery pictures. This is needed in certain server environments.

  • 0
  • 1

0

&view_gallery

Show a childgallery from a document (page) other than the gallery parent document. Use the ID of the document that contains the childgallery call of the childgallery you wish to use.

Document ID

[edit]

Placeholders

Here's a list of the available placeholders in the templates.

[edit]

manageButtonTpl

Look for the default content in: assets/snippets/maxigallery/templates/managebuttontpl.html

Placeholder Description

[+maxigallery.urlaction+]

Url for the form action

[+maxigallery.hiddenfields+]

Hidden fields for the form

[+maxigallery.strings.keyname+]

Texts from the MaxiGallery language file. The "keyname" would be click_to_zoom, previous, next, etc..

[+maxigallery.config.parameter+]

The snippet parameter values. The "parameter" would be any of the snippet parameters.

[edit]

manageOuterTpl

Look for the default content in: assets/snippets/maxigallery/templates/manageoutertpl.html

Placeholder Description

[+maxigallery.messages+]

Error messages / notices in the picture management (that comes from the language file).

[+maxigallery.urlback+]

Url to the "back to normal view" link

[+maxigallery.urlaction+]

Form action url

[+maxigallery.urldragsort+]

Url for the drag sorting popup

[+maxigallery.managepictures+]

The pictures (content from managePictureTpl)

[+maxigallery.uploadpictures+]

The picture upload fields (content from manageUploadTpl)

[+maxigallery.hiddenfields+]

Hidden fields for the picture management form that needs to be in it

[+maxigallery.pics_allowed_count+]

Number of pictures allowed to upload

[+maxigallery.config.parameter+]

The snippet parameter values. The "parameter" would be any of the snippet parameters.

[+maxigallery.pageinfo.fieldname+]

MODx document object fields from the gallery document where. The "fieldname" would be pagetitle, longtitle, pub_date, etc..

[+maxigallery.strings.keyname+]

Texts from the MaxiGallery language file. The "keyname" would be click_to_zoom, previous, next, etc..

[edit]

managePictureTpl

Look for the default content in: assets/snippets/maxigallery/templates/managepicturetpl.html

Placeholder Description

[+maxigallery.picture.fieldname+]

Content from MaxiGallery picture fields. The "fieldname" can be id, gal_id, filename, title, date, descr, pos or own_id.

[+maxigallery.path_to_gal+]

The path where the current gallery images are. eg. assets/galleries/120/

[+maxigallery.fieldnames.field+]

The names for the form input fields. The "field" can be delete, position, title, pictureid, modified and description. Look a the default template how these are used.

[+maxigallery.strings.keyname+]

Texts from the MaxiGallery language file. The "keyname" would be click_to_zoom, previous, next, etc..

[+maxigallery.config.parameter+]

The snippet parameter values. The "parameter" would be any of the snippet parameters.

[edit]

manageUploadTpl

Look for the default content in: assets/snippets/maxigallery/templates/manageuploadtpl.html

Placeholder Description

[+maxigallery.counter+]

Number for the current row

[+maxigallery.fieldnames.file+]

Name for the form input field

[+maxigallery.config.parameter+]

The snippet parameter values. The "parameter" would be any of the snippet parameters.

[edit]

galleryOuterTpl

Look for the default content in: assets/snippets/maxigallery/templates/galleryoutertpl.html

Placeholder Description

[+maxigallery.managebutton+]

Button for the picture management

[+maxigallery.childgalleries+]

Child galleries (content from childgalleryPictureTpl)

[+maxigallery.childgallerycount+]

Number of childgalleries

[+maxigallery.currentpage+]

Current page number

[+maxigallery.pagecount+]

Total number of pages

[+maxigallery.previous_page_url+]

Url for the previous page link

[+maxigallery.next_page_url+]

Url for the next page link

[+maxigallery.pagenumbers+]

Page numbers (content from pageNumberTpl)

[+maxigallery.pictures+]

Gallery pictures (content from galleryPictureTpl)

[+maxigallery.picscount+]

Number of pictures in the gallery

[+maxigallery.embedtype+]

Selected embedtype

[+maxigallery.pageinfo.fieldname+]

MODx document object fields from the gallery document where. The "fieldname" would be pagetitle, longtitle, pub_date, etc..

[+maxigallery.strings.keyname+]

Texts from the MaxiGallery language file. The "keyname" would be click_to_zoom, previous, next, etc..

[+maxigallery.config.parameter+]

The snippet parameter values. The "parameter" would be any of the snippet parameters.

[edit]

galleryPictureTpl

Look for the default content in: assets/snippets/maxigallery/templates/gallerypicturetpl.html

Placeholder Description

[+maxigallery.embedtype+]

MaxiGallery embedtype configuration setting value

[+maxigallery.picture.fieldname+]

Content from MaxiGallery picture fields. The "fieldname" can be id, gal_id, filename, title, date, descr, pos or own_id.

[+maxigallery.path_to_gal+]

The path where the current gallery images are. eg. assets/galleries/120/

[+maxigallery.picture_link_url+]

Url for the link from the picture

[+maxigallery.big_pic_exists+]

Indication that does the big picture exist. 1 for yes, 0 for no.

[+maxigallery.picture_height_big+]

Height of the big picture

[+maxigallery.picture_width_big+]

Width of the big picture

[+maxigallery.picture_height_normal+]

Heigth of the normal picture

[+maxigallery.picture_width_normal+]

Width of the normal picture

[+maxigallery.picture_height_thumb+]

Heigth of the thumbnail picture

[+maxigallery.picture_width_thumb+]

Width of the thumbnail picture

[+maxigallery.pageinfo.fieldname+]

MODx document object fields from the gallery document where. The "fieldname" would be pagetitle, longtitle, pub_date, etc..

[+maxigallery.strings.keyname+]

Texts from the MaxiGallery language file. The "keyname" would be click_to_zoom, previous, next, etc..

[+maxigallery.config.parameter+]

The snippet parameter values. The "parameter" would be any of the snippet parameters.

[edit]

childgalleryTpl

Look for the default content in: assets/snippets/maxigallery/templates/childgallerytpl.html

Placeholder Description

[+maxigallery.picscount+]

Number of pictures in the gallery.

[+maxigallery.pageinfo.fieldname+]

MODx document object fields or TV's from the child gallery document. The "fieldname" would be pagetitle, longtitle, pub_date, etc.. or a TV name.

[+maxigallery.strings.keyname+]

Texts from the MaxiGallery language file. The "keyname" would be click_to_zoom, previous, next, etc..

[+maxigallery.picture.fieldname+]

Content from MaxiGallery picture fields (from the first picture in the child gallery). The "fieldname" can be id, gal_id, filename, title, date, descr, pos or own_id.

[+maxigallery.childurl+]

Url to the child gallery document.

[+maxigallery.path_to_gal+]

The path where the current gallery images are. eg. assets/galleries/120/

[+maxigallery.big_pic_exists+]

Indication that does the big picture exist. 1 for yes, 0 for no.

[+maxigallery.picture_height_big+]

Height of the big picture

[+maxigallery.picture_width_big+]

Width of the big picture

[+maxigallery.picture_height_normal+]

Height of the normal picture

[+maxigallery.picture_width_normal+]

Width of the normal picture

[+maxigallery.picture_height_thumb+]

Height of the thumbnail picture

[+maxigallery.picture_width_thumb+]

Width of the thumbnail picture

[+maxigallery.config.parameter+]

The snippet parameter values. The "parameter" would be any of the snippet parameters.

[edit]

pictureTpl

Look for the default content in: assets/snippets/maxigallery/templates/picturetpl.html

Placeholder Description

[+maxigallery.managebutton+]

Button for the picture management

[+maxigallery.big_img_linkstyle+]

MaxiGallery big_img_linkstyle configuration setting value

[+maxigallery.keep_bigimg+]

MaxiGallery keep_bigimg configuration setting value

[+maxigallery.path_to_gal+]

The path where the current gallery images are. eg. assets/galleries/120/

[+maxigallery.picture.fieldname+]

Content from MaxiGallery picture fields. The "fieldname" can be id, gal_id, filename, title, date, descr, pos or own_id.

[+maxigallery.counter+]

Current picture number

[+maxigallery.total_pics_count+]

Total number of pictures in this gallery

[+maxigallery.previous_pic_url+]

Url to the previous picture link

[+maxigallery.next_pic_url+]

Url to the next picture link

[+maxigallery.index_url+]

Url to gallery overview index

[+maxigallery.big_pic_exists+]

Indication that does the big picture exist. 1 for yes, 0 for no.

[+maxigallery.picture_height_big+]

Height of the big picture

[+maxigallery.picture_width_big+]

Width of the big picture

[+maxigallery.picture_height_normal+]

Height of the normal picture

[+maxigallery.picture_width_normal+]

Width of the normal picture

[+maxigallery.picture_height_thumb+]

Height of the thumbnail picture

[+maxigallery.picture_width_thumb+]

Width of the thumbnail picture

[+maxigallery.pageinfo.fieldname+]

MODx document object fields from the gallery document where. The "fieldname" would be pagetitle, longtitle, pub_date, etc..

[+maxigallery.strings.keyname+]

Texts from the MaxiGallery language file. The "keyname" would be click_to_zoom, previous, next, etc..

[+maxigallery.config.parameter+]

The snippet parameter values. The "parameter" would be any of the snippet parameters.

[edit]

pageNumberTpl

Look for the default content in: assets/snippets/maxigallery/templates/pagenumbertpl.html

Placeholder Description

[+maxigallery.pageurl+]

Url to that page

[+maxigallery.pagenumber+]

Page number

[+maxigallery.pagecount+]

Total number of pages

[+maxigallery.currentpage+]

Current page number

[+maxigallery.config.parameter+]

The snippet parameter values. The "parameter" would be any of the snippet parameters.

[edit]

draggableTpl

Look for the default content in: assets/snippets/maxigallery/templates/draggabletpl.html

Placeholder Description

[+maxigallery.path+]

Path to MaxiGallery installation folder

[+maxigallery.path_to_gal+]

The path where the current gallery images are. eg. assets/galleries/120/

[+maxigallery.pageinfo.fieldname+]

MODx document object fields from the gallery document where. The "fieldname" would be pagetitle, longtitle, pub_date, etc..

[+maxigallery.strings.keyname+]

Texts from the MaxiGallery language file. The "keyname" would be click_to_zoom, previous, next, etc..

[+maxigallery.config.parameter+]

The snippet parameter values. The "parameter" would be any of the snippet parameters.

[edit]

clearerTpl

Look for the default content in: assets/snippets/maxigallery/templates/clearertpl.html

  • No placeholders
[edit]

Examples

Feel free to add your own examples to the list.

[edit]

Simple 

[[MaxiGallery]]
[edit]

With Parameters 

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

Watermark Parameter for 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`]]
[edit]

Query examples 

[!MaxiGallery? &gal_query_ids=`67,23,4` &display=`embedded` &embedtype=`slimbox` &order_by=`date` &limit=`5`!]
  • Retrieves 5 latest pictures from galleries 67,23,4
  • Uses slimbox display type 
[!MaxiGallery? &gal_query_ids=`67` &query_level_limit=`5` &order_by=`random` &limit=`5`!]
  • Retrieves 5 random pictures from gallery 67 and 5 level deep childgalleries 
[!MaxiGallery? &gal_query_ids=`all` &order_by=`random` &limit=`5`!]
  • Retrieves 5 random pictures from all galleries 
[!MaxiGallery? &pic_query_ids=`32,42,52,61` &display=`embedded` &embedtype=`smoothgallery`!]
  • Displays pictures with id 32,42,52 and 61 in a smoothgallery
[edit]

Childgalleries examples 

[!MaxiGallery? &childgalleries_ids=`all` &display=`childgalleries` &order_by=`random` &childgalleries_order_by=`createdon`!]
  • Lists all galleries
  • Each gallery has random picture in [+maxigallery.picture.fieldname+] placeholder
  • Child galleries are sorted by createdon MODx document object field 
[!MaxiGallery? &childgalleries_ids=`67,5` &display=`childgalleries` &order_by=`pos` &childgalleries_level_limit=`10`!]
  • Lists all galleries under 67 and 5, 10 levels deep
  • Get's a picture for the galleries [+maxigallery.picture.fieldname+] placeholder by position field
[edit]

Photo blogging with Jot

  1. Create a new chunk with the default maxigallery pictureTpl template code from maxigallery/templates/picturetpl.html, call it mgPictureTplComment for example.
  2. In that template, add your jot call (modify any of the parameters, but keep that &tagid):
[[Jot? &subscribe=`1` &tagid=`[+maxigallery.picture.id+]` &pagination=`10` &badwords=`something` &customfields=`name,email` &canmoderate=`Jot Moderators` &trusted=`Jot Trusted Users`]]
  1. Create the gallery documents and call MaxiGallery using (+add any parameters you want):
[!MaxiGallery? &pictureTpl=`mgPictureTplComment`!]
[edit]

Creating custom views

Using the template support, you can make the snippet output pretty much what you want. Here's few examples.

[edit]

Picture and thumbnails on same page

This example shows how to do custom templates to get both thumbnails and the picture in the same document and change image via javascript.

1. Create a snippet call to list thumbnails

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

2. Create a chunk mgGalleryPicture to be used when listing the thumbnails. 

<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. Create a chunk mgJs to hold the javascript what we use to switch images. (You could also create this as an external .js file and define the path in &js parameter) 

<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. Create another snippet call to the document to show the picture. We use &display=`pictureview` to make it show in picture view mode by default. If you use some other sorting options than the default, you would have the same in this call too so it gets the first picture automatically.

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

5. Create a chunk mgPicture to use when showing the single picture. 

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

That should be it. Now access the site and see results. Next you can do MooTools effects to resize the image on change in the showPic() function and write instructions here.

[edit]

Open popup with prev/next links

This example shows how to make a popup window open from the thumbnails that has prev / next links to browse the pictures.

1. Create a new document what will be the document that is show in the popup. Select (blank) for Uses template and uncheck Show in menu. Put this in document content: 

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

You could also create a template for the popup document and then have just the snippet call in the document content.

2. Create a document with snippet call to show the thumbnails. Replace the <docid> with the id of the document that you did in step 1.

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

3. Create a mgJs chunk what holds the javascript to open popup window. Change the width and height values to set the window size you want. 

<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. Create a chunk mgGalleryPicture to be used when listing the thumbnails. 

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

That should be it. Now when you click on a thumbnail, it opens in a popup that shows the MaxiGallery picture with navigation links. You might want to do a custom pictureTpl template to the popup document MaxiGallery call and change the index link to be popup close for example.

[edit]

One thumbnail in page, but all pics in Slimbox/Lightbox v2 picture set

This example shows how to get only one thumbnail visible to the page, but still have all pictures from the gallery in the Slimbox/Lightbox v2 picture set.

1. Call MaxiGallery with a limit parameter to get the one picture:

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

2. Create a galleryPictureTpl chunk called mgGalPicTpl what contains: 

<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. Place the same snippet call second time for the gallery, but with a different limit and template value to "hide" the output:

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

4. Create a galleryPictureTpl chunk called mgGalPicTplHidden what contains: 

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

That's it, you're done. You can easily get this going with Ditto for example to list documents with galleries and get all pictures in the picture set (using &gal_query_ids=`[+id+]` in the snippet call in Ditto template). You can also modify the limit and offset parameters to make it show more than one thumbnail on the page and then still have all pictures in the Slimbox/Lightbox v2 picture set.

[edit]

Tips & Tricks

Here you can find some miscellaneous "good to know" things.

[edit]

Quick Tips

  • Visit the forum for more info.
  • If you are using MooTools in your template, use &disable_js_libs=`1` in the snippet call to make maxigallery not include the mootools library. This should remove any conflicts.
  • Picture modifications, eg. resizing, filters, dropshadow etc. are done on upload. So if you want to change the size of the pictures, you have to re-upload them after you change snippet settings.
  • MaxiGallery templates support PHx (Placeholders Xtended) what adds the capability of output modifiers to placeholders, template variables and settings tags.
[edit]

PHx custom modifier example

Here's an example how to do a PHx modifier that can be used to modify the date format that MaxiGallery outputs from [+maxigallery.picture.date+] placeholder.

Create a snippet phx:maxidate what will be the PHx custom modifier: 

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

Quick run trough of the code:

The modifier would be called like this [+maxigallery.picture.date:maxidate=`%m/%d/%Y`+]

The content of the first bolded part will be in $output variable and content of the second bolded part will be in $options variable. strtotime() function is used to convert the string presentation to Unix timestamp and strftime() function is then used to convert the Unix timestamp back to readable time presentation according to $options format.

So now in your MaxiGallery template, you can use [+maxigallery.picture.date:maxidate=`%m/%d/%Y`+] to format the date.

[edit]

MaxiGallery Glossary

slimbox

An image display system that replaces Lightboxv2. Slimbox is a 7kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2. Details and examples of use: http://www.digitalia.be/software/slimbox

slidebox

An image display system. Slidebox is a javascript used to make (multiple) slideshows on the current page. Details and examples of use: http://olivier.ramonat.free.fr/slidebox/

lightboxv2

An image display system. It uses Prototype.js and scriptaculous.js while most current MODx snippets use MooTools.js Details and examples of use:http://www.huddletogether.com/projects/lightbox2/

smoothgallery

An image display system. Using mootools v1.0, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading...) image galleries, slideshows, showcases and other cool stuff on your website. Details and examples of use: http://smoothgallery.jondesign.net/

childgallery

A display mode in MaxiGallery that lists all the gallery documents under certain parent document for the desired depth.

thumbnail

A small image derived from the larger display image. They are generally used as a compact way to show the image content in an image gallery and to cause a larger image to display when clicked on. (in the parameters &thumb_. . . refers to thumbnail images.)

normal images

Normal image is the image that is shown by default in the javascript displays and in the picture view display mode. They are the larger display images, of a controlled size. (in the parameters &pic_. . . refers to normal images.)

big images

In MaxiGallery, you can use the &keep_bigimg=`1` parameter to make MaxiGallery also store bigger versions of the images that you can for example offer to download. You can restrict them to a certain size or make it keep the image in original state. (in the parameters &big_. . . refers to bigger images.)

popup

In the context of an image gallery: a new window, the size of the image, opened to display an image.

external

Used when you wish larger images to be displayed in a new window, usually devoid of styling.

dropshadow

A display technique whereby a shadow appears below the image to give the effect that the image is floating above the background. Note that the dropshadow background is white by default and can be changed by using &thumb_shadow_bgcolor parameter (and same for other picture sizes).

imagemask

A display technique that can place a decorative "frame" around the image when it is displayed.

watermark

A display technique, where a faint image or text is applied over the image to discourage image theft by spoiling it.

Disable right click

In MaxiGallery, you can use &disable_rightclick=`1` to make MaxiGallery add javascript to the site what disables right clicking. This would be used to discourage viewers from right clicking on an image and saving it. It would only discourage casual users, because the image can still be captured very easily by viewing the source of the page, disabling javascript from the browser, using "print screen" or any of a multitude of screen capture programs etc.

[edit]

Form Examples

Retrieved from "http://wiki.modxcms.com/index.php/De:MaxiGallery"
Personal tools