jQuery thumbnail viewer - Reopens div when already open

[as4s1n]

I am working on a thumbnail viewer and it's mostly complete. However, when the user opens it and then clicks on the same thumbnail, or any other for that matter, it reopens the div. I am using the $.animate() function to set the height and width from 0 to the image height.

HTML:

<div id="thumbs">
	<img src="i1.jpg" />
	<img src="i2.jpg" />
</div>
<div id="display"><img src="" /><div style="clear:both;color:#fff;text-align:right;">Close X</div></div>

jQuery:

// Thumbnail viewer
$(document).ready(function() {
	$("#thumbs img").click(showBox);
	$("#display").click(hideBox);
})

function showBox() {
	var src = $(this).attr("src");
	var imgH = $("#display img").height()+10;
	var imgW = $("#display img").width();

		$("#display").css("display","block");
		$("#display img").attr("src",src);
		$("#display").animate({height:imgH},"normal");
		$("#display").animate({width:imgW},"normal");
}

function hideBox() {
	$("#display").css("display","none");
	$("#display").css("height","0");
	$("#display").css("width","0");
}

CSS:

#thumbs img {
	height:90px;
	width:90px;
}

#display {
	background:#000;
	cursor:pointer;
	display:none;
	height:0;
	left:250px;
	padding:10px;
	position:absolute;
	top:50px;
	width:0;
}

#display img {
	max-height:800px;
	max-width:600px;
}

My guess would be something with the

if($(this).attr("height").is()) {}

but jQuery doesn't allow that.

Please help. Thanks.

Here is a link

 

[misson]

What behavior do you want?

I'm not seeing a problem in Firefox 3.6, Safari 4 and Chrome 5 (make sure to which browsers you test). When a user clicks on the thumbnail for an open picture, there's no visible change. When the user clicks on a different thumbnail, the full image container resizes (as is appropriate). If you don't want the user to be able to click on the thumbnails, a common solution is to position a translucent div behind the image view and in front of all other content.

 

[as4s1n]

Well, the thing is, if you click on one thumbnail, then on another, then try to close it, the div has a 0 height and the last image's width but still has the full sized image outside the div.

 

[misson]

Still not seeing a problem with clicking a thumbnail when the viewer is open. Tested in browsers I mentioned before and IE 8; you still haven't said which browser(s) you are testing. What I do see is that closing the viewer while an animation is running (if you time it right, you can do it after the first time you click on a thumbnail) starts the close animation before the others have finished, resulting in some of the properties from the close animation being overwritten by the open animation. Which properties vary from browser to browser; in most, it's display and width, but in Safari, it's all three properties.

In the viewer's click handler, you need to cancel all existing animations using stop before starting the close animation.

 

[as4s1n]

In all browsers that issue happens. Ironically it seems the least evident in IE7/8. If you click on another thumbnail at any time while it is still opening when you try to close it you get a large bar. I tried your $.stop() method, but the problem is afterit is closed it starts up again, like jQuery queues everything clicked to go after the function is closed.

View attach #1 for example.
Note: It doesn't get any larger than that

I was wondering if it is still something I should be worried about.

 

[misson]

I clicked one thumbnail, then another while the first was opening, then clicked "close" when the animation had finished. No issue. I only see an issue when clicking "close" while an open animation is running. Clicking additional thumbnails at any time the viewer is open may make it easier to see the animation timing bug, but it doesn't cause a bug.

like jQuery queues everything clicked to go after the function is closed.

Indeed. Did you take a look at the stop() documentation? Did you see the clearQueue option?

 

[as4s1n]

Ok thanks, I didn't see the clearQueue optional param, no problems anymore.

 

[as4s1n]

One question though. I've been looking at the jquery lightbox plugin, example here, and I began wondering: How do they get the background opaque in firefox and chrome and the other major browsers and the box completely visible? My link is to the most up-to-date version and now in FF 3.6 & 3.7a I get the transparency on everything. I solved the problem in IE by appending the div to the body after it was set and that seemed to work but when I try it in FF 3.6/3.7a and chrome 5 everything is transparent. I was wondering how they did that.

 

[misson]

If you ever wonder "how did they do that?", use a DOM inspector (e.g. Firebug). You'll see that it's not a background, it's a separate element. See also my first post in this thread:

[...] position a translucent div behind the image view and in front of all other content.

 

[as4s1n]

Ok I got it working, however, I feel as though I forced this a little bit. The way I get the full sized image (and the way to make it change size) was to create a separate div that is invisible but has no set H or W attribute and create the full sized image there which then the jQuery gets the height & width from that.

Example here

One other note. I looked but can't seem to replicate: The div expands from the middle out, I tried margin:0 auto; but that just made it stay on the left. Any help?

 

[misson]

Use the DOM inspector. One of the lightbox elements is indeed centered by setting the left & right margin to auto. Keep playing with styling to get yours centered. Study the source of the lightbox example if you need implementation hints.