StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjquery gallery fade in/out
text
Body
copied!<p>I am building a simple image gallery based on the following markup:</p> <pre><code><div id="image-list"> <ul> <li id="image-1"> <img src="myimage1.jpg" width="500" height="500" alt="My Image" /> </li> <li id="image-2"> <img src="myimage2.jpg" width="500" height="500" alt="My Image" /> </li> <li id="image-3"> <img src="myimage3.jpg" width="500" height="500" alt="My Image" /> </li> </ul> </div> <ul id="thumb-list"> <li id="thumb-1"><img src="myimage1-thumb.jpg" width="50" height="50" alt="My Image" /></li> <li id="thumb-2"><img src="myimage2-thumb.jpg" width="50" height="50" alt="My Image" /></li> <li id="thumb-3"><img src="myimage3-thumb.jpg" width="50" height="50" alt="My Image" /></li> </ul> </code></pre> <p>I have styled this using CSS so that only one of the larger images is visible at one time (using overflow: hidden with a fixed container height).</p> <p>I am then using jquery to absolutely position the UL within the container to show each image, using the following markup:</p> <pre><code>$('#thumb-list li img').click(function() { var image = $(this).parent().attr('id').substring(6); var position = $('#image-' + image).position(); $("#image-list ul").css({'top' : '-' + position.top +'px'}); }); </code></pre> <p>Basically I want to fade out the entire "#image-list ul" while it's position is changed and then fade it back in to show the new image.</p> <p>Could someone suggest the most efficient way to do this? - any help is much appreciated!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload