PHP Developers Network
http://forums.devnetwork.net/

Bootstrap carousel inside of a modal loaded from server
http://forums.devnetwork.net/viewtopic.php?f=6&t=142782
Page 1 of 1

Author:  jamesmva [ Fri Jul 22, 2016 9:46 am ]
Post subject:  Bootstrap carousel inside of a modal loaded from server

My modals loads fine from my server, im calling the data-target from my row id...
data-target="#info'.$rows['id'].' " and my modals calls my data-target id="info'.$rows['id'].'".

and its working fine this part, its loading everything. the problem is my carousel with thumbnails inside of my modal. Its working only one carousel bet the second wont work, so what i did was adding my row id inside of my data-target in the thumbnail next and prev buttons...('.$rows['id'].')

<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel'.$rows['id'].'"
role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel'.$rows['id'].'"
role="button" data-slide="next">
</a>


and my carousel id is id="myCarousel'.$rows['id'].' "

Ok then my next and prev buttons are working, only that,but now when i click on my thumbs it doesnt load the pic inside of the big carousel box the (carousel-bounding-box)

here is my carousel inside of my modal code...


Syntax: [ Download ] [ Hide ]
<?php
        $sql = "SELECT * FROM gallery ";
        $run = mysqli_query($conn,$sql);
        while ($rows = mysqli_fetch_assoc($run)){

            echo'          


   <div class="modal fade" id="info'
.$rows['id'].'" role="dialog">

  <div class="modal-dialog modal-xl">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
         <h3 class="modal-title">'
.$rows['title'].'</h3>
    </div>
    <div class="modal-body">


          <div class="row">

                    <div class="col-sm-6">

                      <div class="col-sm-12" id="carousel-bounding-box">
                        <div class="carousel slide"   id="myCarousel'
.$rows['id'].'">
                            <!-- Carousel items -->
                            <div class="carousel-inner">
                                <div class="item" data-slide-number="0">
                                    <img src="../'
.$rows['image'].'"></div>

                                <div class="item" data-slide-number="1">
                                    <img src="../'
.$rows['img_v1'].'"></div>

                                <div class="item active" data-slide-number="2">
                                    <img src="../'
.$rows['img_v2'].'"></div>

                                <div class="item" data-slide-number="3">
                                    <img src="../'
.$rows['img_v3'].'"></div>
                             </div>

                            <!-- Carousel nav -->
                            <a class="left carousel-control" href="#myCarousel'
.$rows['id'].'" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>
                            <a class="right carousel-control" href="#myCarousel'
.$rows['id'].'" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                        </div>
                    </div>

     </div>


    <div class="row">
        <div class="col-sm-6" id="slider-thumbs">

            <!-- Bottom switcher of slider -->
            <ul class="hide-bullets">
                <li class="col-sm-3">
                <p class="text-center">v.0<p>
                    <a class="thumbnail" id="carousel-selector-0">
                        <img src="../'
.$rows['image'].'">
                    </a>
                </li>

                <li class="col-sm-3">
                <p class="text-center">v.1<p>  
                    <a class="thumbnail" id="carousel-selector-1"><img src="../'
.$rows['img_v1'].'"></a>
                </li>

                <li class="col-sm-3">
                <p class="text-center">v.2<p>
                    <a class="thumbnail" id="carousel-selector-2"><img src="../'
.$rows['img_v2'].'"></a>
                </li>

                <li class="col-sm-3">
                <p class="text-center">v.3<p>
                    <a class="thumbnail" id="carousel-selector-3"><img src="../'
.$rows['img_v3'].'"></a>
                </li>


            </ul>
        </div>


    </div>



</div>


  </div>
</div>



my js..

jQuery(document).ready(function($) {

$('#myCarousel').carousel({
interval: 5000
});

//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click(function () {
var id_selector = $(this).attr("id");
try {
var id = /-(\d+)$/.exec(id_selector)[1];
console.log(id_selector, id);
jQuery('#myCarousel').carousel(parseInt(id));
} catch (e) {
console.log('Regex failed!', e);
}
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});

Why my thumbs isn't working?

Page 1 of 1 All times are UTC - 5 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/