I want to display a zoom image (on mouseover) on top of certain images to imply 'click here to zoom'. I don't want to use a cursor.
I'm sure there's a good way to do this with javascript jQuery but I don't know it.
Does anyone have any good ideas?
+1
A:
This jQuery plugin seems to do what you want, and you can easily customise it to fit your needs (i.e. implement click).
Marko
2010-08-14 00:25:50
+1 for jQuery :)
Michael Robinson
2010-08-14 00:31:07
A fellow Kiwi from the Tron. Greetings :)
Marko
2010-08-14 00:32:13
That would work, except I need the ability to have the user click to open a larger version of the image. This script is using an <a> tag to display the small mag. glass image. Am I missing something?
s_broderick
2010-08-14 00:40:01
Yep so do a view source and you'll see he's using the $("a.preview").hover(function(e){}. You can easily change that to use click(), but you'll need a separate function for closing the image (i.e. clicking the large version) since that's currently using the "mouseout" event.
Marko
2010-08-14 00:43:23
+2
A:
HTML:
<a href='big.jpg'>
<img src='mini.jpg' alt='a kitten'>
<span>Click to view larger</span>
</a>
CSS:
a > img + span {display: none}
a:hover > img + span {display: inline}
Then style however you like.
Thom Smith
2010-08-14 00:35:14
A:
Do you want to use a zoom icon instead of the pointer cursor? Mozilla supports a zoom-cursor (http://www.worldtimzone.com/mozilla/testcase/css3cursors.html) but you will have to face the problem on IE. Perhaps you can have a hidden div with your custom zoom-icon like: yourcursor then you can play with the images and jquery:
$('img.zoomthis').mouseover(function(){ var pos = $(this).position(); $('#zoomcursor').css("position","absolute"); $('#zoomcursor').css("top",pos.top+18);//You have to change this in order to place it right over your image $('#zoomcursor').css("left",$(obj).width()-30); //this too $('#zoomcursor').show();
}).mouseout(function(){$('#zoomcursor').hide();
})
Alecoleti
2010-08-14 00:37:41