<?php
include '../connection.php';
$direction = "../assets/img/gallery/";
$Data = "";
$sqlRetrive = 'select ID,label_ar,label_en,images,updateDate,updateUsername,status from gallery_images WHERE status =1 ';
$executeSql = mysqli_query($connection,$sqlRetrive);
$arrImages = array();
while($retriveData = mysqli_fetch_row($executeSql))
{
    $images = "";
    $label_ar = $retriveData[1];
    $label_en = $retriveData[2];
    $arrImages = explode(",",$retriveData[3]);
    $image = $retriveData[3];
    $UDate = $retriveData[4];
    $Uusername = $retriveData[5];
    $firstImage = $direction.$arrImages[0];
    foreach($arrImages as $img)
    {
        $images.= $direction.$img.",";
    }
    $lastSemicolon = strripos($images,",");
    $images = substr($images,0,$lastSemicolon);
    $Data .= "<div class='col-md-4 text-center mt-2  animated jackInTheBox slower'>
    <section class='gallery'>
  <div>
    <a data-links='{$images}' class='magnific-gallery' >
    <img src='{$firstImage}' style='width:250px;height:250px;' />
      <h4 style='margin-top:10px;'>{$label_ar}</h4>
    </a>   
  </div>
</section>
    </div>";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>معرض الصور</title>
<?php include '../cssFile.php'; ?>
<link rel="icon" href="../assets/img/logo.png" type="image/x-icon">
<link rel="stylesheet" href="../assets/css/galleryStyle.css">
</head>
<bod dir="rtl">
<?php include 'navbar.php'; ?>
<!-- start fixed social icon -->
<div class="share animated flash slower">
    <div class="toggle icon">
        <i class='fas fa-share-alt' id="icon-share"></i>
    </div>
        <ul>
            <li><a href="https://www.facebook.com/take.achance.359"><i class='fab fa-facebook-f icon-facebook' aria-hidden="true"></i></a></li> 
            <li><a href="https://twitter.com/takeach13143934"><i class='fab fa-twitter icon-twitter' aria-hidden="true"></i></a></li> 
            <li><a href="https://www.youtube.com/channel/UCWcJwXluKFRnSEFkiZBvPhg"><i class='fab fa-youtube icon-youtube' aria-hidden="true"></i></a></li> 
            <li><a href="https://www.instagram.com/takeachancenpo"><i class='fab fa-instagram icon-instagram' aria-hidden="true"></i></a></li> 
            <li><a href="https://wa.me/00962796069492"><i class='fab fa-whatsapp icon-whatsapp' aria-hidden="true"></i></a></li>  
        </ul>
</div>
<!-- end fixed social icon -->
<div class="goshan animated flash slower">
        <a href='goshan.php'><div class="toggle icon">
            <img src='../assets/img/donateIcon.png' style='width:70px'>
        </div></a>

    </div>
    <!-- End fixed social icon -->
<div class="container" style='margin-top:30px;'>
    <div class="row justify-content-center">
        <div class="col-md-12 text-center">
            <h2 class="hvr-bounce-in" style='color:#0080BB'>
                معرض الصور
            </h2>
        <p><img src='../assets/img/s.png'></p>
        </div>
    </div>
  <div class='row text-center row-gallery justify-content-center'>
      <?php
        echo $Data;
      ?>
  </div>
</div>

<div class='row no-gutters' id="row-footer" style='width:100%;margin-top:60px;'>
        <div class='container'>
            <div class="col-md-12 text-center">
                <h4>
                    <span>خذ فرصة لتتغير...</span>
                    <span>خذ فرصة لتحلم...</span>
                    <span> خذ فرصة لتكون أنت....</span>
                </h4>

            </div>
        </div>
        <!-- End container -->
    </div>
    <!-- End row -->

    <!-- end footer -->
    
    <!-- For coursor animation -->
    <div class="cursor"></div>
<?php include '../jsFile.php'; ?>
<script>
$(document).ready(function(){
  $('.magnific-gallery').each(function(index , value){
  var gallery = $(this);
  var galleryImages = $(this).data('links').split(',');
    var items = [];
    for(var i=0;i<galleryImages.length; i++){
      items.push({
        src:galleryImages[i],
        title:''
      });
    }
    gallery.magnificPopup({
      mainClass: 'mfp-fade',
      items:items,
      gallery:{
        enabled:true,
        tPrev: $(this).data('prev-text'),
        tNext: $(this).data('next-text')
      },
      type: 'image'
    });
});
});
</script>

</body>
</html>
