create a slideshow of images inside bootstrap modal dynamically using PHP - 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.

Answer 1

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

Answer 2

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>