thumbsZoom

frontend previewoptions previewpause buttonplay button

A plugin for Zenphoto.magnifier

Probably I'm getting older, so I can't deal anymore with small things in front of my eyes, being them tiny fonts on cheap edition books, unpleasant notes on canned beans labels, or little thumbnails in a web photogallery.
Probably I should accept that time came for me to go and see an optometrist, buy a pair of glasses and get used to wear them, al least everytime something to look at is too close to my nose.

But this is really too hard to face for me, so I started buying expensive books in luxury editions, I switched on enjoying fresh vegetables and finally, for my web gallery, I wrote this plugin that shows a magnified picture whenever my mouse stops over an image thumbnail, in album and (or) search results pages.
Eye doctors can wait.

“thumbsZoom” is designed to be suitable with every official theme of Zenphoto and possibly with many custom themes. It should work out of the box with default settings.
If you feel like me about your eyesight, or if you just want to offer visitors a bigger preview of your images whenever they interact with thumbs, without changing your layout, all you have to do is the following:

  1. download the zip file and extract the content.
  2. use an ftp client to upload the content in the plugins folder of your Zenphoto installation.
  3. enable “thumbsZoom” in your admin area.

To know more about options, alternative approach, customization, supported themes, translations, Zenphoto versions tested, acknowledgments and older versions, continue reading this page, otherwise just download “thumbsZoom” and give it a try.

Options → { default } | ( alternative ) ~ [ units ]

• Approach → { Ajax request } | ( PHP loop )

Change this option only if you know what you are doing.
“Approach” is the method used by the plugin to determine which is the image to be zoomed and prepare it.

Ajax request is theme independent, and relies on the link associated with the thumb to build the right image to display. The image is defined in a page on the server and then loaded live into the requesting context.
The page is made cacheable, so, after the first request, it will be immediately available.

PHP loop needs a few code added to files album.php and search.php in your theme (see instructions below). All image links are defined and sent to javascript at once, while the page is loaded. You shouldn't use this method on an official theme, because you would loose your changes on Zenphoto updates.

You might prefer the alternative approach if your server is not fast enough to provide a quick response to the ajax request, or if you need different zoom sizes for different themes you are using in your gallery.

• Delay → { 200 } | ( positive integer ) ~ [ milliseconds ]

Sets how long the mouse pointer should stop on a thumb before starting the zoom display.
Avoid very low values (below 50~100 ms): when set to zero, this option leads to a "mouse enter like" behavior, producing many useless requests if the user is just moving the mouse over the thumbs to reach a given one of them.

• Offset X,Y → { 0,0 } | ( integer ) ~ [ pixels ]

Fine positioning of the zoom over its thumb. Add (subtract) X or Y Offset to move the zoom right or down (left or up).
The plugin tries to calculate dynamically the centered position, by detecting thumb and zoomed image sizes, but if the thumb container is not symmetrical, then offsets are needed. For instance Offset Y to center zoom in Zenpage theme is -12 .

• Pages enabled → { Both } | ( Album ) | ( Search )

Change this option to use the plugin only in search results pages or only in album pages.

• Zoom size → { 220 } | ( positive integer ) ~ [ pixels ]

The length for the longest side of the zoomed image. This can be overwritten on a theme basis when the approach is set to PHP loop.
Keep in mind that, when Ajax request is the choosen approach, if you change Zoom size you might need to clear your browser's cache before seeing the new size.

top (screenshots) - index (download)

Code for alternative approach ( PHP loop )

In files album.php and search.php of your theme, you have to find the while (next_image()){...} loop, and insert this line in it:

if (function_exists ('thumbsZoom_theme')) {thumbsZoom_theme($size);}

Replace $size with the desidered zoom size: leave it blank to keep the value set in plugin options, or enter a peculiar value to overwrite the option only for the theme you are editing.

top (screenshots) - index (download)

Customization

“thumbsZoom” enforces some mandatory CSS rules, essential for its proper behavior, and some additional rules, used for aesthetic purposes. The latter might be changed, though at the moment they are added inline by javascript, so an !important mark is needed for overwiting defaults.
The CSS class used for the zoomed image container is .thumbsZoom and the rules used by the plugin are the following:

Mandatory rules, that should not be changed:
display, position, bottom, left.

Additional rules that might be overwritten to fit a specific layout:
background, border, border-radius, cursor, padding, z-index.

Note: changing padding or border sizes, may lead to the necessity to re adjust Offset X and Y.

top (screenshots) - index (download)

Supported themes

Every¹ official Zenphoto theme is supported, including Stopdesign, that is a very special one with its own structure.
Custom themes based on an official one², without changes in file names (album.php and search.php) and in CSS classes names, should be supported too, provided that next_image loop has not been modified in its architecture.

(¹) Of course the plugin does not work on touch screen devices, where the mouseover event is not even present, therefore mobile themes are not supported and, if you have mobileTheme enabled in your installation, the plugin filter is not loaded at all when a mobile device is detected.

(²) Themes based on Stopdesign are not supported, because the plugin cannot recognize them without knowing their names. Stopdesign was dropped by the developers of Zenphoto since Zp 1.4.6.

top (screenshots) - index (download)

Translations

The plugin is set up for gettext translation, using the keyword pl_gettext to parse strings in Poedit, as explained in the plugin translation tutorial from Zenphoto team.
At the moment only english and italian translation are included in the package. If it happens that for some reasons someone wants to translate the few strings of this plugin in his native language, I will be happy to include the translation in the package. All I can give back are acknowledgments and a link to the translator site.

top (screenshots) - index (download)

Versions of Zenphoto tested

This plugin has been tested and works with the following Zenphoto versions.

tumbsZoom 1.0.1:

  • 1.4.5
  • 1.4.6

tumbsZoom 1.0:

  • 1.4.2.3
  • 1.4.3.5
  • 1.4.4

Versions not listed have not been tested, but “thumbsZoom” is likely compatible with all intermediate versions and even with those not too much older than the first. In any case it is higly recommended to keep your installation of Zenphoto updated.

top (screenshots) - index (download)

Acknowledgments

Thanks to the Zenphoto team for the great work on their CMS and for the help they gave me on their forum in learning some coding. A special thank to Malte Müller (acrylian) for his patience with me when I was an absolute beginner.

Thanks to Richard Scarrott for jQuery Mousestop Event, included in this plugin.

top (screenshots) - index (download)

Older Versions

Archive of older versions of the plugin, for older versions of Zenphoto.



3 Comments

Manghitzu: on 05 February 2013

Hi Antonio, great job.
Tried it, works like a charm!

Antonio Ranesi: on 05 February 2013

Thanks, I'm glad you are enjoying my plugin.

robertutzu: on 09 May 2014

uber plugin, good work :P

Add a comment:

*Required fields