create a slideshow of images inside bootstrap modal dynamically using PHP

Question

<div class="modal-body">
    <?php 
    $id=$_GET['id'];
    $qry="select rel_movies from released_movies where rel_id='$id' ";
    $qryr=$con->query($qry);
    while($rr=$qryr->fetch_assoc()){
    $film=$rr['rel_movies'];
        $q="select * from gallery where category='$film'";
        $qr=$con->query($q);
        while($r=$qr->fetch_assoc()){ 
    ?>
    <ol class="carousel-indicators">
        <li data-target="#lightbox" data-slide-to="0" class="active"></li>
        <li data-target="#lightbox" data-slide-to="1"></li>
        <li data-target="#lightbox" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="../AbaamAdmin/uploads/<?php echo $r['images'];?>" width="900px" height="500px" >
        </div> <!-- /.item active-->
    </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>
    <?php }} ?>
</div><!-- /.modal-body -->

I am trying to display images from database inside bootstrap modal as a slideshow. But after executed the above code, what I got is, all images appeared inside the modal, but both left and right icons are not working instead of that images are viewed with a y scroll.

I cannot figure out the error.

Shehary · Accepted Answer · 2015-11-09T15:26:20.707

@Ashwini Agarwal solution is partial and to show both image indicators and images it cann't be done like that because can't run the while loop twice so the working solution will be to create arrays before loop, load fetched data into arrays and then use foreach function for both indicators and to show images also handle the active class with counter

PHP code

<?php 
$id=$_GET['id'];
$qry="select rel_movies from released_movies where rel_id='$id' ";
$qryr=$con->query($qry);
while($rr=$qryr->fetch_assoc()){
    $film=$rr['rel_movies'];
    $q="select * from gallery where category='$film'";
    $qr=$con->query($q);
    $rows = array(); //Declare rows as arrays before loop
    while($r=$qr->fetch_assoc()){ //Run Loop
        $rows[] = $r; //Load Data in arrays
    } //close Loop
} //close First Loop, Side Note, You don't need This Loop
?>

Now the Carousel inside Modal Body will look like this (explained with comments to understand how this is working)

<div class="modal-body">
<div id="lightbox" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
            <?php
                $i = 1; //Counter
                foreach ($rows as $r): //Foreach
                $ol_class = ($i == 1) ? 'active' : ''; //Set class active for only indicator which belongs to respective Image
            ?>
             //Here I add the counter to data-slide attribute and add class to indicator
            <li data-target="#lightbox" data-slide-to="<?php echo $i;?>"  class="<?php echo $ol_class; ?>"></li>
            <?php $i++; ?>
            <?php endforeach; ?> //Close Foreach
    </ol>
    <div class="carousel-inner">
            <?php
            $i = 1; //Counter
            foreach ($rows as $r): //Foreach
            $item_class = ($i == 1) ? 'item active' : 'item'; //Set class active for image which is showing
            ?>              
            <div class="<?php echo $item_class; ?>"> // Define Active Class Here
                <img src="../AbaamAdmin/uploads/<?php echo $r['images'];?>" width="900px" height="500px" >
            </div>
            <?php $i++; ?>
            <?php endforeach; ?> // Close Foreach
    </div>
    <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>

You are welcome and yes you can use same code to display videos, if face any problem we are here to resolve. Happy coding — Shehary, Nov 09 '15 at 06:55
Thank you @Shehary, but now , I placed the below code in place of but ,what I am getting is just a modal popup showing Acess Forbidden,but at sometimes, when I use left and right arrows the required video appears. What might be the issue? — Oops, Nov 09 '15 at 07:00
try to remove the class `fade` and remove `` too if you only want to show the video, there are also some other known issues which addressed in this answer http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal — Shehary, Nov 09 '15 at 10:53
I created this fiddle and seems it's working without removing the class `fade` http://jsfiddle.net/g7pkd7zz/1/ but there are other problems, if cursor move away from video, the sliding starts and shows next video and if a video is played and move to next video and played it too then last video will not auto stop, in simple words both videos will be playing that's also annoying so I think you need custom script which handles the video auto play, stop if new video played and stopped the video when modal closed. — Shehary, Nov 09 '15 at 11:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/94588/discussion-between-rose-and-shehary). — Oops, Nov 09 '15 at 11:12

Ashwini Agarwal · Answer 2 · 2015-11-06T10:27:11.227

0

Put the carousel outside the loop.

<ol class="carousel-indicators">
    <li data-target="#lightbox" data-slide-to="0" class="active"></li>
    <li data-target="#lightbox" data-slide-to="1"></li>
    <li data-target="#lightbox" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">

<?php $counter = 1; ?>
<?php while($r=$qr->fetch_assoc()) { ?>

     <div class="item <?php echo ($counter++ == 1) ? 'active' : '' ?>">
          <img src="../AbaamAdmin/uploads/<?php echo $r['images'];?>" width="900px" height="500px" >
     </div> <!-- /.item active-->

<?php } ?>

</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>

edited Nov 06 '15 at 10:27

answered Nov 06 '15 at 10:11

Ashwini Agarwal

4,828
2
42
59

1

Not put active class for all slider, put a condition for first slide

– sukhwinder kaur Nov 06 '15 at 10:18
@ahwini agarwal:By doing this, the left and right icons worked, but if there are 2 images in database, then both of them appears as a single image one below the other. – Oops Nov 06 '15 at 10:19
@Rose.. remove the `active` class. – Ashwini Agarwal Nov 06 '15 at 10:20
Not remove , put only at first slide – sukhwinder kaur Nov 06 '15 at 10:21
as it;s PHP while loop, can use `counter` to put `if condition` to use `active` class – Shehary Nov 06 '15 at 10:24
@sukhwinder:I'm sorry, I am new to this php bootstrap and all,what does that first slide means? – Oops Nov 06 '15 at 10:25
1

First means first element like "
" put a condition , so that active class only apply to first div.You can use any count for this like declare $i=0 , outside while loop and $++ inside loop and add condition
">
– sukhwinder kaur Nov 06 '15 at 10:29
Now first image appears properly inside the modal popup. But if I click the next arrow, the second image is not loading, instead of that, the modal popup height reduces and shows blank :( – Oops Nov 06 '15 at 10:42
Correct this: make this also dynamic
– sukhwinder kaur Nov 06 '15 at 11:01

create a slideshow of images inside bootstrap modal dynamically using PHP

2 Answers2

Linked