How to add a magnifying glass overlay to a lightbox icon

You are here

Contact

Israel Office

+972-52-838-7222

+972-52-430-5252

Europe office

+33-695-805-004

19.06.2011
How to add a magnifying glass overlay to a lightbox icon
submitted by: Tsachi Shlidor

Here is a small snippet I've used on http://iroads.co.il/ to add a magnifying glass overlay when a user hover over a lightbox icon.
Simple CSS hover won't do the trick here because we can't give a (visible) background-image when hovering over an image, so we append a div using jQuery and position it with CSS.

The jQuery :


Drupal.behaviors.appendMagnifier = function (context) {

// Append magnify div on hover
$("a.imagefield-lightbox2").hover(
function(){
$(this).append('

Show

');
},
function(){
$(this).find(".magnify-overlay").remove();
}
);

}

The CSS :


a.imagefield-lightbox2 .magnify-overlay {
background: url("../images/magnify.png") no-repeat center center transparent;
position: absolute;
height: 66px;
width: 60px;
top: 50%;
right: 50%;
margin-top: -33px;
margin-right: -30px;
text-indent: -9999px;
}

You will also have to give position: relative to the wrapping li of the image so the magnifying glass will position properly.

Comments

Hi,

How did you achieve the green caption at the top of each lightbox image. I am using D7 with colorbox, is this code usable in D7? Where do I add it?

Apologies for these newbee questions :)

Thanks

Getting the bar on top is pretty easy :

Drupal.behaviors.move_lightbox2_data = function (context) {
$("#lightbox", context).prepend($("#imageDataContainer", context));
}

But this is for Lightbox (D6), I'm sure this is possible with Colorbox (D7) but I'm not sure if they work the same.

We should thank you for giving such a wonderful blog.
Your site happens to be not only informative but also very imaginative too.
We find a limited number of experts who can think to write technical articles that creatively.
All of us are on the lookout for information on something like this. I Myself have gone through several blogs to build up on knowledge about this.We look forward to the next posts !!

nesco dehydrator

Add new comment

blogs