StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I'll show you how to change the image <code>src</code>, so that when you click an image it rotates through all the images that are in your HTML (in your <code>d1</code> id and <code>c1</code> class specifically)... whether you have 2 <strong>or more images</strong> in your HTML.</p> <p>I'll also show you how to clean up the page after the document is ready, so that only one image is displayed initially.</p> <p><strong>The full code</strong></p> <pre><code>$(function() { var $images = $("#d1 > .c1 > a").clone(); var $length = $images.length; var $imgShow = 0; $("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); $("#d1 > .c1 > a").click(function(event) { $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") ); event.preventDefault(); }); }); </code></pre> <p><strong>The breakdown</strong></p> <ol> <li><p>Create a copy of the links containing the images (note: you could also make use of the href attribute of the links for added functionality... for example <strong><a href="http://jsfiddle.net/NHASn/" rel="noreferrer">display the working link below each image</a></strong>):</p> <pre><code> var $images = $("#d1 > .c1 > a").clone(); ; </code></pre></li> <li><p>Check how many images were in the HTML and create a variable to track which image is being shown:</p> <pre><code>var $length = $images.length; var $imgShow = 0; </code></pre></li> <li><p>Modify the document's HTML so that <strong>only</strong> the first image is being shown. Delete all the other images.</p> <pre><code>$("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); </code></pre></li> <li><p>Bind a function to handle when the image link is clicked.</p> <pre><code> $("#d1 > .c1 > a").click(function(event) { $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") ); event.preventDefault(); }); </code></pre> <p>The heart of the above code is using <code>++$imgShow % $length</code> to cycle through the jQuery object containing the images. <code>++$imgShow % $length</code> first increases our counter by one, then it mods that number with how many images there are. This will keep the resultant index cycling from <code>0</code> to <code>length-1</code>, which are the indices of the <code>$images</code> object. This means this code will work with 2, 3, 5, 10, or 100 images... cycling through each image in order and restarting at the first image when the last image is reached.</p> <p>Additionally, <strong><a href="http://api.jquery.com/attr/" rel="noreferrer"><code>.attr()</code></a></strong> is used to get and set the "src" attribute of the images. To pick elements from among the <code>$images</code> object, I set <code>$images</code> as the <strong><a href="http://api.jquery.com/jQuery/" rel="noreferrer">jQuery context</a></strong> using the form <code>$(selector, context)</code>. Then I use <strong><a href="http://api.jquery.com/eq/" rel="noreferrer"><code>.eq()</code></a></strong> to pick just the element with the specific index I'm interested in.</p></li> </ol> <hr> <h2><strong><a href="http://jsfiddle.net/YXXHy/" rel="noreferrer">jsFiddle example with 3 images</a></strong></h2> <p><br/> You can also store the <code>src</code>s in an array.<br> <strong><a href="http://jsfiddle.net/wjapW/" rel="noreferrer">jsFiddle example with 3 images</a></strong></p> <p>And here's how to incorporate the hrefs from the anchor tags around the images:<br> <strong><a href="http://jsfiddle.net/ZRTDS/" rel="noreferrer">jsFiddle example</a></strong></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