Download & Extend

Adding a zoom icon to Lightbox2 images

Project:Lightbox2
Version:6.x-1.9
Component:User interface
Category:feature request
Priority:minor
Assigned:Unassigned
Status:active

Issue Summary

I recently added this feature in the theme of a site I was helping build, so that any image that has a Lightbox preset, gets a zoom icon when you hover over the image. I think this makes it clearer to the user that clicking on that link won't take him to another page, just enlarge the image on the screen. Of course this isn't a feature everybody would wan't so ideally it would be something you could turn on and off on the Lightbox2 configuration. I am going to try to make this patch behave this way, but thought I'd post a start. I couldn't figure out how to make a patch that creates a file, so I attached the js file (it only has like 5 lines). I also attached the icon which is use for commercial use but I'll have to ask the author if it can be GPL licensed, if not I can design a nice zoom icon.

A nice Drupal site where I saw this kind of technique being used is: Amnesty International.

Demo of patch: http://ipwa.net/project/mulpo - Hover over the thumbnail image.

AttachmentSize
zoom-icon-lightbox2.patch1.41 KB
zoom.js.txt255 bytes
zoom-small.png4.58 KB

Comments

#1

not working here.

#2

It would be a very nice option. Also I dont need a hover effect. Just a small png on the corner of an image would do fine for me.

#3

Has anyone come up with a working method of putting an image/icon over the lightbox image?

#4

I will re-roll a patch that works with the latest 6.x branch,

#5

Ok the old patch probably didn't work because it didn't create the additional files. I made this patch with Git so it should create the js and css file, but just in case, download the original image from the above attachment and place it under the images folder.

This patch will add an option under "Lightbox layout" that will give you an additional checkbox to enable/disable the zoom image.

Please test.

AttachmentSize
add-zoom-icon-484458-5271556.patch 3.2 KB

#6

It also works with drupal 7! I used the zoom.js. and the css from the origin patch. In lightbox.module add a this line at
drupal_add_js($path . '/js/zoom.js', array( 'scope' => $js_location , 'cache' => FALSE) );
direct after Line 789
drupal_add_js($path . '/js/lightbox.js', array( 'scope' => $js_location , 'cache' => FALSE) );
I'm using GIT still not too familiar and therefore can not attach patch, but maybe that helps someone.

nobody click here