[Tutorial] Gallery Mode (EN)

[Florian Nücke]

Gallery Mode

MegaZine 3 comes with an inbuilt gallery mode for images (img element). This means it is possible to provide a URL to another image or swf which can then be opened by the user. Furthermore, gallery images can form galleries - images in the same gallery can be cycled through in gallery mode without the need to leave it.

Note: this describes the functionality implemented in the "gallery" plugin in version 2.x. "Zoom" refers to the zooming of the actual pages for 2.x, which is not as refined in 1.x (only available using the minscale/maxscale attributes in the HTML for 1.x, and GUI will be scaled, too. The zoom mode in 2.x is much more advanced, so if this is an important feature for you, consider using 2.x instead).

Setting up a gallery image

To add a high resolution version of an image, use the 'hires' attribute:

Code: (xml)

<img src="some/image.jpg" hires="some/image_big.png"/>

If an img element has a hires attribute, a click on the image then opens the gallery mode. This referenced 'hires' image can obviously be any image you want it to be, but to allow intuitive use of the book it is recommended to use an image that represents either a full version of the image on the page (i.e. the image on the page is a detail of the zoomed variant), or the same image at a higher resolution.


Linked images / Positioning the gallery icon

Normally a click anywhere on the image will open the gallery mode. Additionally a small zoom icon will be displayed on top of the image, with the default position at the bottom right of the image, which will also open the gallery mode. It is displayed per default to give users a hint to which images can be zoomed and which cannot - without hovering them with the mouse. The button can be hidden setting the 'showbutton' attribute to false, though. If, however, an url is provided it cannot be hidden, because it is the only way to open the gallery mode. A click on the image will then open the url, the click on the button will open the gallery mode.

The zoom button may be freely positioned on the image (e.g. to avoid the button being unclickable because it is in the area where the page turn or drag is triggered). To do so, use the 'iconpos' attribute, like so:

Code: (xml)

<img src="some/image.jpg" hires="some/image_big.png" iconpos="top left"/>

Pixel exact positioning is possible as well, just provide the x and y coordinate in that case (see the documentation for more information).


Creating a gallery

Images can form galleries, i.e. a collection of images that can be cycled through while in gallery mode. The attribute to use here is 'gallery'. To put two images into a gallery just give them the same gallery name/id:

Code: (xml)

<img src="img1.jpg" hires="img1b.jpg" gallery="myGallery"/>
<img src="img2.jpg" hires="img2b.jpg" gallery="myGallery"/>

This way you can create as many galleries as you need.


A note on fullscreen

Per default entering the gallery mode triggers fullscreen mode, to allow for more screen area to be used. This can be disabled by setting the 'zoomfs' attribute of the book to false:

Code: (xml)

<book zoomfs="false">

If the user manually activates fullscreen mode the whole screen will still be used when entering gallery mode.


Links in gallery mode

There have been some requests for a possibility to link images in gallery mode. Here is a short explanation why I will not implement such a feature, but also a workaround, if you really have to.
Why not: majorly unintuitive. One of the chief goals of MegaZine 3 is to provide intuitive useage. Now consider this: if, in gallery mode, the image is not zoomed out fully, clicking (and dragging) it is used to move the visible area. If zoomed out however a click would open a link (also causing the fullscreen to collapse, if open). This is anything but intuitive.

How to: use a swf as the high resolution variant, and have this swf handle clicks by opening the link.