Question

我的拇指有问题，当我点击它们时它对我的旋转木马没有任何影响。我的旋转木马只能工作下一个和上一个按钮。我想要做的是，当我点击我的缩略图时，它改变了旋转木马内部的图片。我拇指的第一张照片有一个id =＆＃34; carousel-selector-0＆＃34; 在我的轮播中是data-slide-number =＆＃34; 0＆＃34; 但这不工作，我想加载我的数据库中每列有7个图像的行...请参阅我的数据库图片 - ＆gt; http://imgur.com/tzrhtNc 这是我的全部代码---＆gt; https://codeshare.io/yiGrk

<?php
 //$g_id = mysqli_real_escape_string(htmlentities($_GET['id']));
            $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-lg">
      <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="container">
<h1>Bootstrap 3 Thumbnail Slider / Carousel</h1>


    <!-- thumb navigation carousel -->
    <div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs'.$rows['id'].'">

            <!-- thumb navigation carousel items -->
          <ul class="list-inline">

          <li class="col-sm-2" > 
          <a id="carousel-selector-0" class="thumbnail">
            <img src="../'.$rows['image'].'"></a></li>

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

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

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

                <li class="col-sm-2"> <a id="carousel-selector-4"  class="thumbnail">
            <img src="../'.$rows['img_v4'].'" class="img-responsive">
          </a></li>

          <li class="col-sm-2"> <a id="carousel-selector-5"  class="thumbnail">
            <img src="../'.$rows['image'].'" class="img-responsive">
          </a></li>

          <!--<li> <a id="carousel-selector-6">
            <img src="../'.$rows['image'].'" class="img-responsive">
          </a></li>

          <li> <a id="carousel-selector-7">
            <img src="../'.$rows['image'].'" class="img-responsive">
          </a></li>

           <li> <a id="carousel-selector-7">
            <img src="../'.$rows['image'].'" class="img-responsive">
          </a></li>--->
            </ul>

    </div>


    <!-- main slider carousel -->
    <div class="row">
        <div class="col-md-12" id="slider">

                <div class="col-md-12" id="carousel-bounding-box">
                    <div id="myCarousel'.$rows['id'].'" class="carousel slide">
                        <!-- main slider carousel items -->
                        <div class="carousel-inner">
                            <div class="active item" data-slide-number="0">
                                <img src="../'.$rows['image'].'" class="img-responsive" >
                            </div>
                            <div class="item" data-slide-number="1">
                              <img src="../'.$rows['img_v1'].'" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="2">
                                <img src="../'.$rows['img_v2'].'" " class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="3">
                                <img src=""../'.$rows['img_v3'].'" " class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="4">
                                <img src=""../'.$rows['img_v4'].'" " class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="5">
                                <img src="http://placehold.it/1200x480&amp;text=six" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="6">
                                <img src="http://placehold.it/1200x480&amp;text=seven" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="7">
                                <img src="http://placehold.it/1200x480&amp;text=eight" class="img-responsive">
                            </div>
                        </div>
                        <!-- main slider carousel nav controls --> 

                        <a class="carousel-control left" href="#myCarousel'.$rows['id'].'" data-slide="prev">‹</a>

                        <a class="carousel-control right" href="#myCarousel'.$rows['id'].'" data-slide="next">›</a>
                    </div>
                </div>

        </div>
    </div>
    <!--/main slider carousel-->

</div>





<!--------------------------slider------------------------------->

                        <!--</div><!-- /.row below modal body-->
                </div><!-- /.modal-body--->
        </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog  -->
</div>


 ';} ?> 
<script>


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

// handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
  var id_selector = $(this).attr("id");
  var id = id_selector.substr(id_selector.length -1);
  id = parseInt(id);
  $('#myCarousel').carousel(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $(this).addClass('selected');
});

// when the carousel slides, auto update
$('#myCarousel').on('slid', function (e) {
  var id = $('.item.active').data('slide-number');
  id = parseInt(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $('[id=carousel-selector-'+id+']').addClass('selected');
});
</script>

与缩略图与php缩略图的Bootstrap轮播不工作PHP

0 个答案: