javascript - Setting boostrap carousel class to active when used in modal -
i trying modal uses bootstrap's carousel. issue having getting right image show when clicked. opens either first image in gallery or last image active when modal closed.
i'm wondering if knows way (with jquery id imagine) change .carousel-indicators , .carousel-inner's class active when corresponding thumbnail clicked. i'm using bootstrap 3 , rails 4
html:
<div class="container"> <ul class="row"> <% @gallery.images.each |image| %> <li> <a id="thumb" data-toggle="modal" data-target="#lightbox"> <img id="imagesource" src="<%= image.photo.url(:thumb) %>"> </a> </li> <% end %> </ul> <div class="modal fade , carousel slide" id="lightbox" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div id="modalcarousel" class="carousel"> <ol class="carousel-indicators"> <% @gallery.images.each_with_index |image, index| %> <li data-target="#lightbox" data-slide-to="<%= index %>" class="<% 'active' if index == 0 %>"></li> <% end %> </ol> <div class="carousel-inner"> <% @gallery.images.each_with_index |image, index| %> <div class="item <%= 'active' if index == 0 %>"> <img src="<%= image.photo.url(:large) %>"> <div class="carousel-caption"><p><%= image.caption %></p></div> </div> <% end %> </div> </div> <!-- /.carousel-inner --> <a class="left carousel-control" href="#lightbox" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#lightbox" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </div> </div> </div>
right i'm using <%= 'active' if index == 0 %>
setting classes active first image in gallery. think need use javascript getting right photo open in modal when clicked. using jquery answers/hints specific great (bearing in mind low level of knowledge)!
thanks much!
solved
ryantdecker's solution great!
you should able use method provided on bootstrap carousel:
http://getbootstrap.com/javascript/#carousel-methods
specifically, .carousel(number)
seems looking do. if order of thumbnails matches order of slides (i'm assuming would), should able like:
$('a.thumb').each(function(index){ $(this).click(function(){ $('#mymodal').modal('show'); $('.carousel').carousel(index); }); });
note: careful of using id attributes in loops - duplicate id elements cause lot of problems...i've used class here (class="thumb" not id="thumb" on anchor) instead reason.
edit: added codepen example - seems working 1 line - needed manually call modal inside function. line added above ($('#mymodal').modal('show');
).
Comments
Post a Comment