JQuery layering issue

130 Posts

sbRyGuy Reply #1, 16 years, 5 months ago

Hello,

I’m trying to add a little magnifying glass to the right hand corner of any image that has the class of ZOOM. I can get the placement down but my problem is how do I execute the logic so that when I mouse over the zoom icon i don’t loose it? Right now I have a hover state defined for the image, that triggers the icon to display but once you rollover the icon I loose it.???

$("img.zoom").hover(
	function() { 
		var offset = $(this).offset();
		var lft = offset.left + (this.width - 16);
		var tp = offset.top;
		var s = this.src;//need to grab the image src
		$("#zoom-icon").css({left: lft, top: tp, z-index: 99999});
		$("#zoom-icon").show();				
		$("#zoom-icon").hover(function(){ $(this).show()});	//trying to keep icon visible
		$("#zoom-icon").click(function(){ 
//										...onclick function...									
	   });
	});//end hover

I twitch because I care....and drink too much coffee.

1,572 Posts

Paulp Reply #2, 16 years, 5 months ago

How are you adding the zoom image, can you give an example of 1 img src and the css for it all ??

Without seeing the code I would imagine your going to have to add the image as the src and position a div on top of it if it has the class off zoom or if using an unordered list give the class of zoom to the li, that way you can target both the image and div / li on hover and use z-index to give the stacking order, but as I say without seeing the code used it’s only a guess

130 Posts

sbRyGuy Reply #3, 16 years, 5 months ago

I have a hidden DIV with the zoom image.

#zoom-icon{
	width:16px;
	position:absolute;
	display:inline;
	z-index:9999;
	}

<div id="zoom-icon"><ul id="icons" class="ui-widget ui-helper-clearfix"><li class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-circle-plus"></span></li></ul></div>

This is the Javascript for the zoom class hover:

$("img.zoom").hover(
	function() { 
		var offset = $(this).offset();
		var lft = offset.left + (this.width - 16);
		var tp = offset.top;
		var s = this.src;
		$("#zoom-icon").css({left: lft, top: tp});
		$("#zoom-icon").show();				
		//$("#zoom-icon").hover(function(){ $(this).show()});	
		$("#zoom-icon").click(function(){ 
				   // ... click function ...									
			});
	});

The HTML of one of the images with the class zoom:

<a href="#"><img src="image_loc" width="320" height="223" alt="sample one" class="zoom"/></a>

Like I said I can get the icon to appear and in the proper location but when I hover over it it disappears or blinks repeatedly...any suggestions much appreciated.

UPDATE

It appears that the problem is with the function that hides the icon. I have that event binded to the mouseout of the image.zoom. However, when the mouse moves onto the icon, focus seems to be removed from the image so the image fires the mouseout event.

How do I go about keeping the icon static while I mouse over it and the hide it when my mouse leaves the image.zoom???

I twitch because I care....and drink too much coffee.