javascript - creating a jquery custom lightbox setup. -
i'm creating custom jquery lightbox.
the problem i'm having setup function doesn't work wanted to, wanted when image click want setup() function run , update variables (prev_img, next_img, count, current_img_src). when #next , #prev click want run setup function , update.
<ul id="items"> <li class="shrink"><img src="foo1.jpg" alt="foo1"/></li> <li class="shrink"><img src="foo2.jpg" alt="foo2"/></li> <li class="shrink"><img src="foo3.jpg" alt="foo3"/></li> <li class="shrink"><img src="bar1.jpg" alt="bar1"/></li> <li class="shrink"><img src="bar2.jpg" alt="bar2"/></li> <li class="shrink"><img src="bar3.jpg" alt="bar3"/></li> </ul> <nav> <span id="next">next</span><br/><span id="prev">prev</span> </nav>
script
$(function(){ var prev_img, next_img, count, current_img_src = ''; $('.shrink img').on('click', function(e){ if(e.target.tagname == 'img'){ current_img_src = $(this).attr("src"); setup(); } }); $('#next').click(function(){ console.log(next_img); setup(); }); $('#prev').click(function(){ console.log(prev_img); setup(); }); function setup(){ count = $('.shrink img').length; $(".shrink img").each(function(){ if($(this).attr("src").tostring() === current_img_src.tostring()){ prev_img = $(this).prev(); next_img = $(this).next(); } }); } });
Comments
Post a Comment