PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Thu Sep 24, 2020 12:15 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 1 post ] 
Author Message
PostPosted: Fri Jul 22, 2016 9:46 am 
Offline
Forum Newbie

Joined: Fri Jul 22, 2016 9:35 am
Posts: 1
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?


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: Google [Bot] and 6 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group