html - Jquery next button not working with image gallery -
the big image change next image, after have clicked on next button 'twice'. works okay previous button, not okay next button whenever reload page.
it great if can @ problem, have tried long time fix it, not. thank in advance.
<div > <table id = "frame-table"> <tr> <td id = "left1"> <img src="http://www.vintagevictorian.com/kuba_arrow_button_left.png" alt = "left"/> </td> <td id = "right1"> <img src="http://4vector.com/i/free-vector-kuba-arrow-button-set-clip-art_117492_kuba_arrow_button_set_clip_art_hight.png" alt = "right"/> </td> </tr> </table> <img class="img" src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=pg" alt="chania" width="204" height="236"> </div> <div id = "wrapper"> <ul id = "portfolio"> <li><img class="img-thumbnail" src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=pg" alt = "img"/></li> <li><img class="img-thumbnail" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/smiley.svg/2000px-smiley.svg.png" alt = "img"/></li> <li><img class="img-thumbnail" src="https://lh3.googleusercontent.com/-je-vccj5xwk/aaaaaaaaaai/aaaaaaaaabg/afghgr0aeyw/photo.jpg" alt = "img"/></li> </ul> <button id="zoom" type="button" class="btn btn-info"> <span class="glyphicon glyphicon-search"> zoom </span> </button> </div> $(function(){ var current_li =$("#portfolio li").first().parent(); $("#right1").click(function(){ if (current_li.is(":last-child")){ var next_li = $("#portfolio li").first(); } else{ var next_li = current_li.next(); } var next_src = next_li.children("img").attr("src"); alert(next_src); $(".img").attr("src", next_src); current_li = next_li; }); $("#left1").click(function(){ if (current_li.is(":first-child")){ var prev_li = $("#portfolio li").last(); } else{ var prev_li = current_li.prev(); } var prev_src = prev_li.children("img").attr("src"); $(".img").attr("src", prev_src); current_li = prev_li; }); });
var current_li =$("#portfolio li").first().parent(); should be
var current_li =$("#portfolio>li").first(); tested locally , working.
Comments
Post a Comment