MaxiGallery

From MODx Wiki
Jump to: navigation, search

 MODx Snippet 

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

Contents

Downloads

  • Download the Current Release
  • Download from the Public SVN (not recommended for production) —This link has been broken for a long time. The Forum [1] contains a download for the current beta.

Demo

This website has some good examples of different ways to implement MaxiGallery and lists the calls used to get them to work. Visit site

Description

Ultra customizable image gallery snippet that offers features like automatic thumbnail creation, size adjusting, filter effects, watermarking, AJAX enabled browsing, extensive permission handling, front-end user/group galleries, fully templateable output, etc..

Features

  • Valid XHTML 1.0 Transitional output with CSS styling. Easy to get Strict valid.
  • External language files to ease the implementation of multi-language galleries. Currently only English language file in distribution, more will be added when the other language files are up to date.
  • Possible to allow webusers/webgroups to manage their own or shared galleries and have "admin" webusers/webgroups.
  • Integrated javascript display modes (MooTools and Scriptaculous/Prototype): Slidebox, Lightbox v2.0, Slimbox, SmoothGallery, etc. Easy to plugin other scripts.
  • Possible to sort pictures with dragging. (MooTools and Scriptaculous/Prototype)
  • Watermarking (text or transparent PNG), Image masking with gray scale masks, drop shadow effects.
  • Fully templateable output. Template parameters support @CODE: and @FILE: bindings.
  • Possible to use config files to set snippet parameters. Easy to share examples in forums etc.
  • Possible to query pictures from certain galleries. Think of it like integrated MaxiGallerySolo features if you will.
  • Possible to list all gallery documents, or just under certain parent for certain level in the site tree hierarchy. TVs supported!
  • Possible to create centralized gallery management views. Possible to view galleries from another pages. Possible to manage gallery from another page. Possible to have images open in another document.
  • Possible to set a max images limit in a gallery.
  • Possible to have 3 sizes from a image. Thumbnail, normal and big image. Images will be automatically resized to certain max width/height with image portition kept.
  • Possible to set quality percentage of each image size.
  • Possible to paginate gallery overviews to multiple pages.
  • Easy to setup photo blogging with Jot
  • Support jpg/jpeg, png and gif images (gifs are converted to png). Also in zip-archives if ZZIPlib is installed.
  • Possible to use FTP commands to create gallery file system folders. This is needed in certain server environments.

Planned Features

  • Possible to have custom fields in picture management
  • Start using phpThumb for image manipulating/creation
  • Research possibility to use/modify iManager to add images to galleries
  • Possibility to add allready uploaded images to galleries and reuse images without files duplicating (achieved with phpThumb)
  • Possible to set all thumbnails to be cropped to a certain size squares, no matter what the original shape/size is. (again, achieved with phpThumb)
  • Possible to replace images at gallery management afterwards and change filter settings per image. (I don't want to repeat myself, but achieved with phpThumb)
  • Module to manage all site galleries easily from backend.

Installation

New installation

  • Extract the contents of the zip file to your computer
  • FTP to your server an go to the modx installation folder
  • Put the extracted assets folder to the site root and the files will go to correct place
  • Make the assets/galleries/ folder writable (CHMOD 777 unless you are in phpSuExec environment, in that case CHMOD 755)
  • Close your FTP program and go to the MODx manager
  • Create a new snippet called MaxiGallery and paste the contents of maxigallery.txt to it
  • Call the snippet on some document with the parameters you want
  • Go to the page that has the snippet call and you should see Manage pictures -button in there.
    • note that you must be logged into the manager and have rights to edit the document (unless you have defined webusers/groups who can manage the gallery and you are logged in at front-end)
  • Upload some images to the gallery and see the results. (You may have to logout from the manager in order to see working embedded - slidebox or lightbox - galleries.)

Upgrading from a previous version

  • Extract the contents of the zip file to your computer
  • FTP the files to your server and delete the /assets/snippets/maxigallery folder (if you have made changes to the filesystem files, remember to back them up first, eg. language files, config files, etc.)
  • Transfer the assets folder from MaxiGallery zip file to the site root and the files will go to the correct place
  • Go to the MODx manager and copy/paste new snippet code from the extracted maxigallery.txt into the MaxiGallery snippet
  • View the site and see how it looks

Setting up parallel installations

If you want to install a new version, but want to try it first and don't want to replace your current MaxiGallery installation, you can do so by using a parallel setup.

  • Extract the contents of the zip file to your computer
  • Rename /assets/snippets/maxigallery folder in the extracted files to something else, for example /assets/snippets/maxigallery-new
  • Open the extracted maxigallery.txt and change define(MAXIGALLERY_PATH, "assets/snippets/maxigallery/"); to define(MAXIGALLERY_PATH, "assets/snippets/maxigallery-new/");
  • FTP the files to your server and transfer the assets folder to the site root and the files will go to the correct place
  • Go to the MODx manager and create a new snippet MaxiGalleryNew and paste in the snippet code from maxigallery.txt
  • Use the MaxiGalleryNew snippet call in some documents and view the results

Note, the most recent beta release (0.6b), which can be found in the ModX forums, does not include the maxigallery.txt file. However, you can use the same one for the current installation by simply copying the MaxiGallery smippet code in the ModX snippet manager.

Usage

Creating your first gallery

  1. Create a container in MODx with page title My Galleries
  2. Check Published on the Page Settings tab
  3. Put the snippet call [!MaxiGallery? &display=`childgalleries`!] in the document content area and save the document
  4. Create a new document in the folder with page title Gallery 1
  5. Check Published on the Page Settings tab
  6. Put the snippet call [!MaxiGallery? &display=`embedded` &embedtype=`slimbox` &pics_per_row=`3` &max_thumb_size=`110` &max_pic_size=`0` &thumb_use_dropshadow=`1`!] (or another call) in the document content area and save the document
  7. Repeat steps 4-6 for as many galleries as you need
  8. Go to the created Gallery 1-x documents and upload photos for that gallery using Manage pictures button. (Must be logged in as Manager to see the button, or logged in at frontend with webuser/webgroup that has rights to manage the gallery)
  9. (You may have to logout from the manager in order to see working embedded - slidebox or lightbox - galleries.)

IMPORTANT NOTE: It depends on your server settings that how many images you can upload at a time and how big. The image masking process for example is very slow and you might get a "Maximum execution time of NN seconds exceeded" -error message, if you are trying to upload many images at the same time with imagemasking on.. or if the images are large. Also when using big images, you may get "Memory Size Exhausted" -error as the image processing takes alot of memory too. These errors are not errors in the snippet code, they are caused by server settings. MaxiGallery script tries to use ini_set to increase the execution time and memory limit if needed, but it cannot do it if php is running in safe mode. You don't necessarily see any error page, it can also just return a blank page when you upload pictures and if you look into /assets/galleries/<docid>/ folder, you may see that it has done for example thumbnail for some picture but then stopped there as either memory limit or maximum execution time got reached.

So, Check these values from php.ini:

  • max_execution_time, this is the maximum execution time allowed for each script, in seconds (it takes quite some time for maxigallery script to process the images if there are many of them and many imaging "filters" used).
  • max_input_time, this is the maximum time each script may spend parsing request data, in seconds.
  • memory_limit, this is the maximum amount of memory in megabytes that a script may consume (maxigallery keeps the images in memory while it makes thumbnails etc).
  • post_max_size this is the maximum size of POST data in megabytes that PHP will accept (the pictures travel in the post data).
  • upload_max_filesize this is the maximum allowed size for uploaded files in megabytes.

These settings can also be configured from Apache, so you might want to see if the following can be found from your httpd.conf:

  • php_admin_value upload_max_filesize Sets the corresponding php setting, see above.
  • php_admin_value post_max_size Sets the corresponding php setting, see above.
  • php_admin_value memory_limit Sets the corresponding php setting, see above.
  • LimitRequestBody Same as post_max_size php setting, but for apache.

Check, if included the GD library for the dynamic creation of images in php.ini.

  • extension=php_gd2.dll (Windows) or extension=gd.so (Linux)


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

&upload_field_count

The number of upload fields to show in the manager view.

Number

10

&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

Upload pictures using FTP

1. First look what is the document ID where MaxiGallery runs. Eg. for this example, let's say it's 89.

2. Create a folder /assets/galleries/89, if it doesn't exist yet. If you have already some pictures in the gallery uploaded through MaxiGallery, that folder will exist.

3. CHMOD the folder to proper value, probably 777.

4. Transfer new pictures to the /assets/galleries/89 folder using FTP or what ever file transfer method you want to use.

5. CHMOD the files to proper value, probably 666.

6. Go to picture management in MaxiGallery and hit the "Resync Gallery" button.

Placeholders

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

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.

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

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.

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.

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

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

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.

[+maxigallery.rownumber+]

The number of the row where picture is at. (version 0.6 only)

[+maxigallery.picrownumber+]

The number of the picture on that row. (version 0.6 only)

[+maxigallery.picpagenumber+]

The number of the picture on that page. (version 0.6 only)

[+maxigallery.picnumber+]

The number of the picture on whole gallery. (version 0.6 only)

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 from the child gallery document. The "fieldname" would be pagetitle, longtitle, pub_date, etc..

[+maxigallery.pageinfo.tv.tvname+]

Template variables from the child gallery document. The "tvname" would be your TV's 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.

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.

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.

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.

clearerTpl

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

  • No placeholders

Examples

Feel free to add your own examples to the list.

Simple

[[MaxiGallery]]

With Parameters

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

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

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

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

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

Creating custom views

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

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');
	   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. 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.

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.

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:

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

3. Place the same snippet call second time for the gallery, but with a different limit and template values to "hide" the output and picture managing forms:

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

4. Create a galleryPictureTpl chunk called mgGalPicTplHidden what contains:

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

If first picture repeat twice add to second call &offset=`1`: [!MaxiGallery? &display=`embedded` &embedtype=`slimbox` &order_by=`pos` &limit=`99999` &offset=`1` &galleryPictureTpl=`mgGalPicTplHidden` &manageOuterTpl=`CODE:` &manageButtonTpl=`CODE:`!]

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.

Tips & Tricks

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

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.

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.

ThickBox (jQuery) with MaxiGallery

Do a custom galleryPictureTpl and put this in it:

<li>
    <a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" class="thickbox" rel="gallery">
        <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>
    [+maxigallery.picture.title:isnot=``:then=`
        <p style="width: [+maxigallery.picture_width_thumb+]px;">
            [+maxigallery.picture.title:htmlent+]
        </p>
    `+]
</li>

Add jQuery and ThickBox files to the <head> of your site template and call maxigallery with that custom galleryPictureTpl.

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.

Form Examples

Personal tools