search

noreiller / bootstrap-modal-carousel

A set of plugins to display a carousel into a fullscreen modal box
http://noreiller.github.com/bootstrap-modal-carousel
MIT License
128 stars 63 forks source link

Tried with jQuery way, had same issue with more than one #28

Open vinoduxid opened 5 years ago

vinoduxid commented 5 years ago

Hi I have a issue with dynamic carousels with more than one, I tried jQuery way before using your extended bootstrap feature.

<div id="imgSliderFull" class="modal fade noindex s4-notdlg model-compress model-lesshead" role="dialog" aria-hidden="false" data-sliderid="" > <div class="modal-dialog"> <div class="modal-header"><span class="close" data-sliderid="" role="button" data-dismiss="modal">close</span></div> <div class="modal-body carousel slide carousel-fade"><div class="carousel-inner slideImg"></div></div> <div class="carousel-controls hidden-xs "> <span class="left carousel-control" onclick="$('#imgSliderFull .carousel').carousel('prev');" role="button" data-slide="prev"> <span class="glyphicon glyphicon-menu-left glyphicon-chevron-left"></span> </span> <span class="right carousel-control" onclick="$('#imgSliderFull .carousel').carousel('next');" role="button" data-slide="next"> <span class="glyphicon glyphicon-menu-right glyphicon-chevron-right"></span> </span> </div> </div> </div>

/jQuery snippet for more than one carousel/ //Fullscreen Slider/Gallery view $('.modal-fullscreen').click(function () { var fullsliderid = $(this).data('target'); console.log(fullsliderid); $('#imgSliderFull, #imgSliderFull .close').attr('data-sliderid', fullsliderid); $('#imgSliderFull .modal-body .slideImg').empty(); $(fullsliderid + ".slideCarousel").css('padding-top', $(fullsliderid + ".slideCarousel .slideImg").outerHeight()); $(fullsliderid + ' .item').prependTo('#imgSliderFull .slideImg'); $('#imgSliderFull .carousel-controls').insertAfter('#imgSliderFull .slideImg'); $('#imgSliderFull').modal('show').on('shown.bs.modal', function (e) { $('#imgSliderFull .carousel').carousel(); }).on('hidden.bs.modal', function (e) { var fullsliderid = $(this).data('sliderid'); $(fullsliderid + ".slideCarousel").css('padding', ''); console.log(fullsliderid); $('#imgSliderFull .item').prependTo(fullsliderid + ' .slideImg'); console.log(fullsliderid); $("[id$=slideCarousel]").carousel(); }); });

Carousels are dynamic so the id is different for each. unable to replace the carousel from which i pull and place in model body and return back. its placing in first collected id instead of second id

Any advice on jQuery way doing it, In mean time I will try your plugin.

vinoduxid commented 5 years ago

I tried your extend plugin had the same issue unable to place where it pull from when there is more than one carousel and not for the first time selecting the second carousel.