Dynamic image gallery with thumbnails - php

Question

I am trying to create dynamic image gallery with thumbnails and popup full screen option.
Here is my HTML5 gallery (static version)
<div class="property__slider">
<div class="property__ribon">Buy</div>
<div id="properties-thumbs" class="slider slider--small js-slider-thumbs">
<div class="slider__block js-slick-slider">
<div class="slider__item slider__item--0"><img data-lazy="assets/media-demo/properties/big.jpg" src="assets/img/lazy-image.jpg" alt=""><span class="slider__description">1</span></div>
<div class="slider__item slider__item--1"><img data-lazy="assets/media-demo/properties/big.jpg" src="assets/img/lazy-image.jpg" alt=""><span class="slider__description">2</span></div>
<div class="slider__item slider__item--2"><img data-lazy="assets/media-demo/properties/big.jpg" src="assets/img/lazy-image.jpg" alt=""><span class="slider__description">3</span></div>
</div>
</div>
<div class="slider slider--thumbs">
<div class="slider__wrap">
<div class="slider__block js-slick-slider">
<div data-slide-rel='0' class="slider__item slider__item--0">
<div class="slider__img"><img data-lazy="assets/media-demo/properties/thumb.jpg" src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<div data-slide-rel='1' class="slider__item slider__item--1">
<div class="slider__img"><img data-lazy="assets/media-demo/properties/thumb.jpg" src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<div data-slide-rel='2' class="slider__item slider__item--2">
<div class="slider__img"><img data-lazy="assets/media-demo/properties/thumb.jpg" src="assets/img/lazy-image.jpg" alt=""></div>
</div>
<div data-slide-rel='3' class="slider__item slider__item--3">
<div class="slider__img"><img data-lazy="assets/media-demo/properties/thumb.jpg" src="assets/img/lazy-image.jpg" alt=""></div>
<button type="button" class="slider__control slider__control--prev js-slick-prev">
<svg class="slider__control-icon">
<use xlink:href="#icon-arrow-left"></use>
</svg>
</button>
<button type="button" class="slider__control slider__control--next js-slick-next">
<svg class="slider__control-icon">
<use xlink:href="#icon-arrow-right"></use>
</svg>
</button>
</div>
*******UPDATED*******
And here is my php mysql version (dynamic) -
$id = $_GET['id'];
$name = $_GET['name'];
$my_images_arr = scandir('assets/media-demo/properties/'.$id);
$directory = 'assets/media-demo/properties/'.$id.'/';
if ((glob($directory . '*.jpg') != false) || (glob($directory . '*.png') != false))
{
$filecount = count(glob($directory . '.jpg'))+count(glob($directory . '.png'));
}
$img_string = "";
$cnt = 0;
foreach($my_images_arr as $img_name)
{
$cnt = count($my_images_arr);
$cnt = $cnt-2;
if(strlen($img_name) >2)
{
$img_string .= '<img data-lazy="assets/media-demo/properties/'.$id.'/'.$img_name.'" src="assets/media-demo/properties/'.$id.'/'.$img_name.'">';
//print_r($img_string);
}
}
<div id="properties-thumbs" class="slider slider--small js-slider-thumbs">
<div class="slider__block js-slick-slider">
<?php for($i=1; $i<=$filecount; $i++) { ?>
<div class="slider__item slider__item--<?php echo $i; ?>"><img data-lazy="assets/media-demo/properties/<?php echo $my_images_arr[2]; ?>" src="assets/img/lazy-image.jpg" alt=""><span class="slider__description"><?php echo $i; ?></span></div>
<?php } ?>
</div>
</div>
<div class="slider slider--thumbs">
<div class="slider__wrap">
<div class="slider__block js-slick-slider">
<?php for($i=1; $i<=$filecount; $i++) { ?>
<div data-slide-rel='<?php echo $i; ?>' class="slider__item slider__item--<?php echo $i; ?>">
<div class="slider__img"><?php echo $img_string; ?></div>
</div>
<?php } ?>
</div>
<button type="button" class="slider__control slider__control--prev js-slick-prev">
<svg class="slider__control-icon">
<use xlink:href="#icon-arrow-left"></use>
</svg>
</button>
<button type="button" class="slider__control slider__control--next js-slick-next">
<svg class="slider__control-icon">
<use xlink:href="#icon-arrow-right"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
I am facing problem here
<?php for($i=1; $i<=$filecount; $i++) { ?>
<div data-slide-rel='<?php echo $i; ?>' class="slider__item slider__item--<?php echo $i; ?>">
<div class="slider__img"><?php echo $img_string; ?></div>
</div>
<?php } ?>
In thumbnails all three images are becoming a single image, loop has to be
<?php for($i=1; $i<=$filecount; $i++) { ?> <div class="slider__img"><?php echo $img_string; ?></div>
<?php } ?>
But if i did so,
<div data-slide-rel='<?php echo $i; ?>' class="slider__item slider__item--<?php echo $i; ?>">
this will be out of loop.
So not able to trace where i am doing wrong. Here is the screenshot how it looks now https://imgur.com/a/Vk6NVmA