PDA

View Full Version : Featured Image Zoomer how to hide



evanes
04-27-2011, 04:13 PM
1) Script Title:
Featured Zoomer

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm

3) Describe problem:
I have managed to enable the image zoomer with the onclick event on an image. This works just fine.
But I would like to disable or hide the image zoomer when the event onmouseout fires.
Or is there another way to accomplish disabling the image zoomer when the mouse is moved off the image?
any help would be greatly appreciated.

thanks, Evert

ddadmin
04-29-2011, 08:05 AM
Can you elaborate what you mean by "disable"? The magnifier already disappears whenever the user moves out of the image in question, and reappears when over again. Do you mean completely disable the magnifier on the first mouse out, so moving the mouse back no longer shows it anymore?

evanes
04-29-2011, 10:05 AM
I have now changed my page so that when I hover above an image I get a magnifying glass. When I click, the zoom function is added and the zoom works perfectly.

When I move off the image the zoom goes away, standard functionality. I would then like to return to the mode with the magnifying glass. Expecting a user to click again to start the zoom process.

I can use the onmouseout event on the image. But what code to call to disable the zoom and get back to my magnify glass?

Thanks Evert

evanes
05-03-2011, 08:54 AM
And to answer your question:
Yes I want to completely disable the magnifier on the first mouse out.

ddadmin
05-04-2011, 12:33 AM
You can disable the magnifier after the mouse moves out of the thumbnail image for the first time, or at least simulate disabling it, by finding the below chunk of code inside the .js file, and adding to it the new part in red:


$tracker.mouseover(function(e){
$cursorshade.add($magnifier).add($statusdiv).removeClass('featuredimagezoomerhidden');
$tracker.data('premouseout', false);
}).mouseout(function(e){
$cursorshade.add($magnifier).add($statusdiv.not('.preloadevt')).addClass('featuredimagezoomerhidden');
$tracker.data('premouseout', true);
}).mousemove(function(e){ //save tracker mouse position for initial magnifier appearance, if needed
lastpage.pageX = e.pageX;
lastpage.pageY = e.pageY;
});

$tracker.mouseout(function(){
$tracker.unbind()
})