Using the gallery
gallery plugin it is possible to provide a URL to an image or swf which can then be opened by the user in a gallery mode. Images can be "standalone" galleries, which is what they are by default, i.e. there it is not possible to navigate to other images. However, as the name suggests, images can form galleries - images in the same gallery can be cycled through in gallery mode without the need to leave it.
Setting up a single element zoom mode
To add a high resolution version of an image, use the
<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. 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.
Setting up a multi element gallery
Images can form galleries, i.e. a collection of images that can be cycled through while in the gallery. The attribute to use here is
gallery. To put two images into a gallery just give them the same gallery name/id:
<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.
Linked images / positioning the zoom icon
Normally a click anywhere on the image will open the gallery. Additionally a small zoom icon can be displayed on top of the image, with the default position at the bottom right (if on the left side) or left (if on the right side) of the image. This will also open the gallery. The button can be enabled by setting the
gallerybutton attribute to
The 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
Gallery#gallerybuttonpos attribute, like so:
<img src="some/image.jpg" hires="some/image_big.png" gallerybuttonpos="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).
A note on fullscreen
If the user manually activates fullscreen mode, the whole screen will still be used when entering the gallery.
Links in zoomed mode
There have been some requests for a possibility to link images in the gallery frame. 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 MegaZine3 is to provide intuitive useage. Now consider this: if, in the gallery frame, 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.