I have wrote a code for an image gallery.

ul.gallery li {
float: left;
margin: 0 10px;
padding: 10px;
border: 1px solid #ddd;
list-style: none;
margin-bottom:10px;
}
ul.gallery li a img {
float: left;
width: 200px;
}

and here's the html code-

<a href="#">Page 1</a> | <a href="#">Page 2</a>  | <a href="#">Page 3</a> 
<ul class="gallery">
        <li><a href="#"><img src="img/z.jpg" /></a></li>
        <li><a href="#"><img src="img/x.jpg" /></a></li>
	<li><a href="#"><img src="img/y.jpg" /></a></li>
	<li><a href="#"><img src="img/a.jpg" /></a></li>
	<li><a href="#"><img src="img/u.jpg" /></a></li>
	<li><a href="#"><img src="img/w.jpg" /></a></li>
</ul>

and here is the actual preview-


Now what i want is when user clicks on page 1 link two of images should vanish or go invisible.
i've written a javascript code to do that and it works perfectly.

my problem is, when any two images go invisible others occupy the black space cause by this. But i want them to be on same position as they were before it. I can't figure out correct positioning attribute and where to place it in css.

can somebody explain me.

I'm not 100% about this, and I'm not sure I fully understand what you are trying to accomplish. But I'm guessing you're making the images disappear by adding "display:none;"? Try changing it to "display:hidden;" instead. The difference is that "none" will completely remove the element, whereas "hidden" will only make it invisible but it will still be there and occopy space, I think

Originally Posted by lizciz

I'm not 100% about this, and I'm not sure I fully understand what you are trying to accomplish. But I'm guessing you're making the images disappear by adding "display:none;"? Try changing it to "display:hidden;" instead. The difference is that "none" will completely remove the element, whereas "hidden" will only make it invisible but it will still be there and occopy space, I think

ummm...,I'm not using dispay:none property. I'm using jquery fadeOut function to vanish images smoothly. and it does change the layout when images fadeOut of view.
Any help for this.
Thank you !

From the jQuery website:

The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.

Try changing fadeOut() to css('display', 'hidden') just to see if it brings the desired effect. If it does, you can work in the fade animation afterwards.

I also found this, should be helpful to you.
http://stackoverflow.com/questions/4...t-display-none

Originally Posted by lizciz

I also found this, should be helpful to you.
http://stackoverflow.com/questions/4...t-display-none

Thankyou very much. This really helped me.