	<?php /****************************************** صفحة يتم استدعاءها لعرض الصور فى شكل جاليرى وسلايدر فى نفس الوقت ***************************************/ ?>		
		<div class='owl_div_loading'>
			<div class="owl-carousel owl_inside owl-theme" >
		

						
							
		<?php 
			
			 
		    $first_image='';  // الصورة الاولى
			$another_images=''; //جميع الصور باستثناء الصورة الاولى			
			$first_column='';  //صور العامود الاول
			$second_column=''; //صور العامود الثانى
			

			$current_images=explode(",",$page_images);
			$xx=0;
			foreach ($current_images as $key => $value) {
				//echo $value;	
				

				if($xx!=0){
					
					$allimages='';
					$xxx=0;
					
					foreach ($current_images as $keyx => $valuex) {
						
						if($xxx!=0){
							
							$current_imagex=explode(".",$valuex);	
							$image_idx= $current_imagex[0] ;
							$image_typex=explode('_',$current_imagex[0]);
							$image_extx= 'webp'; 
							if($xx!=$xxx){
								$anx="data-responsive='$img_path$table/".$image_idx."_480.".$image_extx." 375, $img_path$table/".$image_idx."_480.".$image_extx." 480, $img_path$table/".$image_idx."_800.".$image_extx." 800' data-src='$img_path$table/".$image_idx."_1200.".$image_extx."' data-sub-html='<h3>$page_title</h3>'" ;
								$allimages.="<img loading='lazy' style='display:none;' $anx; alt='$_SESSION[comp_title] - $page_title' rel='nofollow'  class='inactive slider_text_inner'   />";
							}
						}
					
						$xxx++;
					}
					
					
					
					
     
  
					/*استخراج الصورة الاساسية*/  
					$current_image=explode(".",$value);	
					$image_id= $current_image[0] ;
					$image_type=explode('_',$current_image[0]);
					$image_ext= 'webp'; 
					
					if($xx==1){
					    /*الصورة الاساسية*/  
					    $first_image="$domain_url/gamaia/<?php echo $img_path; ?>services/".$image_id."_480.".$image_ext;}
										
					
					if(1==1){
						$another_images.=" <div  class='thumb_img' style='height:auto' data-responsive='$img_path$table/".$image_id."_480.".$image_ext." 375, $img_path$table/".$image_id."_480.".$image_ext." 480, $img_path$table/".$image_id."_800.".$image_ext." 800' data-src='$img_path$table/".$image_id."_1200.".$image_ext."' data-sub-html='<h3>$page_title</h3>'> <img loading='lazy' alt='$_SESSION[comp_title] - $page_title' src='background:url($img_path$table/$image_id"."_480."."$image_ext)' width='100%' /></div>";

					?>
						
						
						<div class="owl_item_inside">						

							<div  rel='nofollow' class="inactive slider_text_inner lightgallery" style="height:100%">
								<?php
									$an="data-responsive='$img_path$table/".$image_id."_480.".$image_ext." 375, $img_path$table/".$image_id."_480.".$image_ext." 480, $img_path$table/".$image_id."_800.".$image_ext." 800' data-src='$img_path$table/".$image_id."_1200.".$image_ext."' data-sub-html='<h3>$page_title</h3>'" ;
								
									$lazy='';
									$img_size='_800';
									if($_SESSION['img_size']!='_1200'){$img_size=$_SESSION['img_size'];}
									if($xx!=1){$lazy="loading='lazy'";}
								
								?>
								
								<img <?php echo $lazy.' '.$an; ?> alt='<?php echo "$_SESSION[comp_title] - $page_title"; ?>' class="inactive slider_text_inner" src='<?php echo $img_path; ?><?php echo $table ?>/<?php echo $image_id.$_SESSION['img_size'].'.'.$image_ext; ?>'  />	
								<?php echo $allimages ?>
								
								
							</div>

						</div>
						
						
					
					
					<?php
						
					}else{
						
						$another_images.=" <div class='thumb_img' style='height:auto' data-responsive='$img_path$table/".$image_id."_480.".$image_ext." 375, $img_path$table/".$image_id."_480.".$image_ext." 480, $img_path$table/".$image_id."_800.".$image_ext." 800' data-src='$img_path$table/".$image_id."_1200.".$image_ext."' data-sub-html='<h3>$page_title</h3>'> <img loading='lazy' alt='$_SESSION[comp_title] - $page_title' src='background:url($img_path$table/$image_id"."_480."."$image_ext)' width='100%' /></div>";

					}
					
				}
			$xx++;
			} 
		?>
	
		
												
												
			</div>
		</div>	
		
		<?php // استدعاء مكتبة لايت جاليرى لعرض الصور فى شكل جاليرى ?>
		<link href="css/lightgallery.css" rel="stylesheet">	
		<script  src="js/jquery-1.12.1.min.js"></script>
		<?php // استدعاء مكتبة السلايدر ?>
		<script  src="js/owl.carousel.min.js"></script>
        <script async src="js/lightgallery-all.min.js"></script>
		<script async type="text/javascript">
			$(document).ready(function(){
				
				$('.lightgallery').lightGallery();
				$('.lightgallery1').lightGallery();
			});
        </script>
		
		<?php // تشغيل السلادير للجاليرى الحالى ?>		
		<script type="text/javascript">
		
			
			$('.owl_inside').owlCarousel({

				dots: true,
				lazyLoad:true,
				center:true,
				autoPlay: 5000,
				stopOnHover: true,
				singleItem: true,
				loop:true,
				margin:0,
				singleItem:true,
				nav:true,
				navText: [
					"<i class='las la-caret-left'></i>",
					"<i class='las la-caret-right'></i>"
				],

	
				

				responsive:{

					0:{

						items:1

					},

					600:{

						items:1

					},

					1000:{

					items:1

					}

				}

			});
			

		</script>

		
		
		
		
		
		<style>
			@keyframes owl_background{
				0%{background-position: -468px 0}
				100%{	background-position: 468px 0}
			}		
			
			.owl_div_loading {
				animation-duration: 1s;
				animation-fill-mode: forwards;
				animation-iteration-count: infinite;
				animation-name: owl_background;
				animation-timing-function: linear;
				background:#f6f7f8;
				background:linear-gradient(to right, #f7fafc 8%, #ddd 18%, #f7fafc 33%);
				background-size: 1000px 104px;
				min-height: 338px;
				overflow: hidden;
				width: 99.5%;
			}
		</style>