Using the gallery

From MegaZine3
Jump to navigation Jump to search

With the 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 hires attribute:

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

If a url is provided it cannot be hidden, because it is the only way to open the gallery. A click on the image will then open the set URL, the click on the button will open the gallery.

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

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

<book galleryfs="false">

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.