From MegaZine3
Jump to: navigation, search
Plugin: Gallery
Name Gallery
  • gallery.swf
  • gallery.asul
Related plugins

This plugin adds a gallery mode, meaning that it becomes possible to define images that will be displayed in a gallery mode, a frame that will be displayed on top of the book. This can be used to provide higher resolution version of images, e.g.

Multiple images can be grouped into galleries, through which the user can then browse without leaving the gallery mode.

Plugin interactions

When the links plugin is loaded, this checks if an image is linked (url attribute set), and if so will always display the button for opening the gallery for the given element. Otherwise it will use the area of the whole element to open the gallery (also displaying a custom cursor).


This plugin uses or defines the following settings.


  • Type: {left, center, right} x {top, middle, bottom}
  • Default: center middle

Defines how the visible area changes when changing the zoom step. The position given here is the part of the viewport that remains still. I.e. per default when zooming in the center of the visible area remains in same spot, relative to the actual image. If top left were given, the top left corner of the visible area would remain in the same spot, relative to the actual image.

This also determines how the image is positioned when opening the gallery frame.

This only has an effect if using a scrollpane that uses mousemode="mouse_drag".


  • Type: Boolean
  • Default: false

Determines whether to use fading effects when opening / closing the gallery or switching to another image in the gallery. Can be performance intensive, which is why it is disabled per default.


  • Type: Boolean
  • Default: false

If enabled mutes all engine sounds while in the gallery (e.g. of playing sounds and videos).


  • Type: Number
  • Default: 0

Determines the initial zoom step when zoom mode is opened. Setting this to zero (the default) causes the image to fit the display area. Please note that the actual minimal zoom step (when the image fits the display area) depends on the image size and display size, so setting this to anything else than 0 or the same value as set in zoommax is normally not expedient.


  • Type: Number
  • Default: 1

Determines the maximal zoom step when zoom mode is opened. E.g. 1.0 (the default) will not allow to get the image to be actually enlarged, but only scaled down until it perfectly fits the display area. Setting it to something bigger than 1 will cause the loaded image to be actually upscaled, which is not a good idea when using raster graphics (such as JPG, PNG and the like). Therefore this attribute is primarily meant to be used when you use vector graphics in zoom mode (such as SWF files).


  • Type: Integer
  • Default: 5

The number of steps to use when zooming between minimal and maximal zoom step. This is the number of times one has to click the zoom in button (or scroll up) when totally zoomed out to get to the maximum zoom step.




  • Type: String

May be used together with the hires attribute to assign images to galleries. In gallery mode the user can then navigate between all images in the same gallery. There may be any number of galleries in a book. When leaving gallery mode the system automatically navigates to the page containing the current gallery image.


  • Type: Boolean
  • Default: false

Determines whether to show the button to open the gallery or not. Hidden per default, unless the links plugin is loaded, and the element is linked (element@url set).


  • Type: {left, center, right} x {top, middle, bottom}, or two positive numbers
  • Default: see description

When a high resolution version of an image is given a zoom button can be displayed in the corner of the element. This value controls in which corner the button is displayed. Any combination of the allowed values is possible, but if two exclusive values are given (i.e. top/bottom and left/right) only the latter one is used. E.g. top left bottom shows the button in the bottom left, and is not good style. Use left instead (bottom can be left out because it's the default value).

Alternatively two positive numbers, separated by a blank may be given. They will be used as the X (first number) and Y (second number) coordinates, with the top left corner of the loaded image or SWF is the origin. The given values will thus be the distance from the top left corner of the image to the top left corner of the zoom button in pixels.

The default horizontal position depends on the page side the element is placed on. If the image is on a left page, it will be placed to the right, on a right page it will be place to the left. This is to avoid collisions with the draggable area. Vertically the element will be placed at the bottom per default.


  • Type: URL

Absolute or relative path to a high resolution variant of the image. Relative paths are always relative to the megazine.swf file. This activates the display of a zoom button in the corner of the image. When clicked, the gallery mode is activated and loads the high resolution image.

You can use a "template variable" in your URL, {src}, which will be replaced with the content of the src attribute of this image, minus the file extension. So e.g. if you have

<img src="folder/myimage.jpg" hires="{src}_big.jpg"/>

this is equivalent to

<img src="folder/myimage.jpg" hires="folder/myimage_big.jpg"/>


<book plugins="gallery" galleryfs="false" galleryzoomsteps="3">
            <img src="a.jpg" hires="a_big.jpg"/>
            <img src="b.jpg" hires="b_big.jpg" gallery="my_gallery"/>
            <img src="c.jpg" hires="c_big.swf" gallery="my_gallery" gallerybutton="true"
                 gallerybuttonpos="top center"/>
MegaZine3 Plugin-related articles
Plugins Anchors · Background Sounds · Batchpages · Bookmarks · Console · ElementIDs · Gallery · Google Analytics · Help · JavaScript · Keyboard Navigation · Links · NavigationBar · Options · Overlays · Password · PDFLinks · Print · PrintPDF · SWFAddress· Search · Sidebar · Slideshow · Titles
Plugin Articles Writing a plugin · Writing a plugin II · Plugin development