Решението на @Ashwini Agarwal е частично и за показване както на индикатори за изображения, така и на изображения, не може да се направи така, защото не може да се стартира цикълът while два пъти, така че работното решение ще бъде създаване на масиви преди цикъл, зареждане на извлечените данни в масиви и след това използвайте foreach
функция за двата indicators
и за показване на images
също обработва active
клас с counter
PHP код
<?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
?>
Сега въртележката в модалното тяло ще изглежда така (обяснено с коментари, за да разберете как работи това)
<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>