JQuery animation of the next image in a div

Question

I have some images in a div that I try to make when I click the next button animated to the next in the div

In this div, I also have my previous and next buttons, which I obviously do not want to animate.

 <div class="work"> <a href="#" class="rightButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/right.png" /></a> <a href="#" class="leftButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/left.png" /></a> <a href="#" class="1"><img class="topLeft" src="http://i.stack.imgur.com/JQFbb.jpg" /></a> <a href="#" class="2"><img class="topRight" src="http://i.stack.imgur.com/l5OPs.jpg" /></a> <a href="#" class="3"><img class="bottomLeft" src="http://i.stack.imgur.com/okxQz.jpg" /></a> <a href="#" class="4"><img class="bottomRight" src="http://i.stack.imgur.com/4uPHw.jpg" /></a> </div> 

My jQuery that actually doesn't work

  // prevent click jump $('a').click(function() { return false; }); // do work $('.work > .leftButton').click(function() { //animate to previous image in the list $(this).siblings().prev().show(); }); $('.work > .rightButton').click(function() { //animate to next image in the list $(this).siblings().next().show(); }); 

Is there an animation method for the next image that does not have a leftButton or rightButton .

Also, is there a way that if I am on the first image, it will go to the last image in the div?

Here is the jsFiddle link I have

Any ideas?

Answer 1

Edited to scroll images in a view:

This requires some changes in your layout, but will allow you to scroll images left / right:

HTML:

 <div class="work"> <div class="nav"> <a href="#" class="rightButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/right.png" /></a> <a href="#" class="leftButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/left.png" /></a> </div> <div class="scroller"> <div class="items"> <a href="#" class="1"><img class="topLeft" src="http://i.stack.imgur.com/JQFbb.jpg" /></a> <a href="#" class="2"><img class="topRight" src="http://i.stack.imgur.com/l5OPs.jpg" /></a> <a href="#" class="3"><img class="bottomLeft" src="http://i.stack.imgur.com/okxQz.jpg" /></a> <a href="#" class="4"><img class="bottomRight" src="http://i.stack.imgur.com/4uPHw.jpg" /></a> </div> </div> </div> 

Matching CSS:

 div.work { background-color: #ddd; height:240px; position: relative; width:300px; margin-left:10px} div.items { position:relative; width: 1000em; height: 240px; } div.scroller { overflow: hidden; width: 300px; height: 100%; } 

JavaScript:

 $('.work .leftButton').click(function() { var $items = $(".items"); if ($items.position().left === 0) { $items.css("left", "-300px"); $items.children("a:last").prependTo($items); } $(".items").animate({ left: "+=300px" }); }); $('.work .rightButton').click(function() { var $items = $(".items"); if ($items.position().left === -900) { $items.css("left", "-600px"); $items.children("a:first").appendTo($items); } $(".items").animate({ left: "-=300px" }); }); 

Basically, what happens is that there is a fixed viewport ( scroller ) with hidden overflow that contains a very long div ( items ) containing all the images. items div just animates every time the next / previous buttons are clicked.

The tricky part moves the last element to the front and vice versa / vice versa when the end of the image line is reached. This is determined by hard-coded values, but can probably be improved using accurate calculation.

Working example: http://jsfiddle.net/andrewwhitaker/6TLK2/3/

Answer 2

If you remove "display: none" from the CSS (on the img tags), here is the code that works with your markup and rotates the images with left and right buttons:

 <script type="text/javascript"> <!-- $(function() { $("div.work >a:gt(2)").hide(); $(".rightButton").click(function () { if ($("div.work >a:last").is(":visible")) { $("div.work >a:gt(1)").hide(); $("div.work >a:eq(2)").show(); } else { $("div.work >a:visible:gt(1)").hide().next().show(); } }); $(".leftButton").click(function () { if ($("div.work >a:eq(2)").is(":visible")) { $("div.work >a:gt(1)").hide(); $("div.work >a:last").show(); } else { $("div.work >a:visible:gt(1)").hide().prev().show(); } }); }); //--> </script>