Make different groups of “Gallery with one preview image” using fancybox

Question

This is what I want to achieve
-create different groups of items
-just one group preview image
-On click, it should open a slider of images related to only that group.

This is what I have tried so far

 <?php
    for ($i = 1; $i <= 14; $i++) {
      //Loop through groups and create image thumbnail
      $sql = "SELECT name, image from item_group WHERE id= ++$i";
      if ($result = mysqli_query($con, $sql)) {
        $row = mysqli_fetch_row($result);
        $group_name = $row[0];
        $group_image = $row[1] = './j.jpg';
      }

      echo '<div class="col-xs-12 col-sm-4">
                        <div class="card">
                            <a class="img-card" data-fancybox="images-preview" href="./j.jpg">
                            <img src=" ' . $group_image . ' " />

                           </a>
                           <div style="display: none;">
  <a href="https://source.unsplash.com/Ai2TRdvI6gM/1500x1000" data-fancybox="images-preview" 
     data-width="1500" data-height="1000"
     data-thumb="https://source.unsplash.com/Ai2TRdvI6gM/240x160"></a>

  <a href="https://source.unsplash.com/Hau6K6VP5vs/1500x1000" data-fancybox="images-preview" 
     data-width="1500" data-height="1000"
     data-thumb="https://source.unsplash.com/Hau6K6VP5vs/240x160"></a>

  <a href="https://source.unsplash.com/muFaKaGw0eE/1500x1000" data-fancybox="images-preview" 
     data-width="1500" data-height="1000"
     data-thumb="https://source.unsplash.com/muFaKaGw0eE/240x160"></a>

  <a href="https://source.unsplash.com/eXHeq48Z-Q4/1500x1000" data-fancybox="images-preview" 
     data-width="1500" data-height="1000"
     data-thumb="https://source.unsplash.com/eXHeq48Z-Q4/240x160"></a>

  <a href="https://source.unsplash.com/hBYzBU1xP6s/1500x1000" data-fancybox="images-preview" 
     data-width="1500" data-height="1000"
     data-thumb="https://source.unsplash.com/hBYzBU1xP6s/240x160"></a>
</div>

                            <div class="card-content">
                                <h5 class="card-title text-center">
                                  ' . $group_name . '

                               </h5>
                            </div>
                        </div>
                    </div>';
    }
    ?>

It's opening all the images in slider not just one related to the group.

Links that I have already tried to solve the problem
https://codepen.io/fancyapps/pen/EeqJPG?editors=1000
http://fancyapps.com/fancybox/3/docs/

Answer 1

data-fancybox="images" This need to be different for each group

For Example: If i have first 4 images in one group then this should be data-fancybox="images1"

If i have next 6 images in other group then this should be data-fancybox="images2" for all img tag

 <!-- 1. Add latest jQuery and fancybox files --> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" /> <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script> <!-- 2. Create links --> <div class="col-xs-12 col-sm-4"> <div class="card"> <a class="img-card" data-fancybox="images-preview" href="./j.jpg"> <img src="1.jpg" /> </a> <p class="imglist" style="max-width: 1000px;"> <a href="https://source.unsplash.com/juHayWuaaoQ/1500x1000" data-fancybox="images"> <img src="https://source.unsplash.com/juHayWuaaoQ/240x160" /> </a> <a href="https://source.unsplash.com/eWFdaPRFjwE/1500x1000" data-fancybox="images"> <img src="https://source.unsplash.com/eWFdaPRFjwE/240x160" /> </a> <a href="https://source.unsplash.com/c1JxO-uAZd0/1500x1000" data-fancybox="images"> <img src="https://source.unsplash.com/c1JxO-uAZd0/240x160" /> </a> <a href="https://source.unsplash.com/i2KibvLYjqk/1500x1000" data-fancybox="images"> <img src="https://source.unsplash.com/i2KibvLYjqk/240x160" /> </a> <a href="https://source.unsplash.com/RFgO9B_OR4g/1500x1000" data-fancybox="images"> <img src="https://source.unsplash.com/RFgO9B_OR4g/240x160" /> </a> <a href="https://source.unsplash.com/7bwQXzbF6KE/1500x1000" data-fancybox="images"> <img src="https://source.unsplash.com/7bwQXzbF6KE/240x160" /> </a> <a href="https://source.unsplash.com/NhU0nUR7920/1500x1000" data-fancybox="images"> <img src="https://source.unsplash.com/NhU0nUR7920/240x160" /> </a> <a href="https://source.unsplash.com/B2LYYV9-y0s/1500x1000" data-fancybox="images"> <img src="https://source.unsplash.com/B2LYYV9-y0s/240x160" /> </a> </p> <div class="card-content"> <h5 class="card-title text-center"> DEMo </h5> </div> </div> </div <div class="col-xs-12 col-sm-4"> <div class="card"> <a class="img-card" data-fancybox="images-preview" href="./j.jpg"> <img src="1.jpg" /> </a> <p class="imglist" style="max-width: 1000px;"> <a href="https://source.unsplash.com/juHayWuaaoQ/1500x1000" data-fancybox="images1"> <img src="https://source.unsplash.com/juHayWuaaoQ/240x160" /> </a> <a href="https://source.unsplash.com/eWFdaPRFjwE/1500x1000" data-fancybox="images1"> <img src="https://source.unsplash.com/eWFdaPRFjwE/240x160" /> </a> <a href="https://source.unsplash.com/c1JxO-uAZd0/1500x1000" data-fancybox="images1"> <img src="https://source.unsplash.com/c1JxO-uAZd0/240x160" /> </a> <a href="https://source.unsplash.com/i2KibvLYjqk/1500x1000" data-fancybox="images1"> <img src="https://source.unsplash.com/i2KibvLYjqk/240x160" /> </a> <a href="https://source.unsplash.com/RFgO9B_OR4g/1500x1000" data-fancybox="images1"> <img src="https://source.unsplash.com/RFgO9B_OR4g/240x160" /> </a> <a href="https://source.unsplash.com/7bwQXzbF6KE/1500x1000" data-fancybox="images1"> <img src="https://source.unsplash.com/7bwQXzbF6KE/240x160" /> </a> <a href="https://source.unsplash.com/NhU0nUR7920/1500x1000" data-fancybox="images1"> <img src="https://source.unsplash.com/NhU0nUR7920/240x160" /> </a> <a href="https://source.unsplash.com/B2LYYV9-y0s/1500x1000" data-fancybox="images1"> <img src="https://source.unsplash.com/B2LYYV9-y0s/240x160" /> </a> </p> <div class="card-content"> <h5 class="card-title text-center"> DEMo2 </h5> </div> </div> </div <!-- 3. Have fun! --> 

Changes in your php code should be add $i to data-fancybox which will always create uniqueID in each loop

data-fancybox="images'.$i.'"

This will make groups with different images

<!-- 1. Add latest jQuery and fancybox files -->

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<?php
    for ($i = 1; $i <= 14; $i++) {
      //Loop through groups and create image thumbnail
      $sql = "SELECT name, image from item_group WHERE id= ++$i";
      if ($result = mysqli_query($con, $sql)) {
        $row = mysqli_fetch_row($result);
        $group_name = $row[0];
        $group_image = $row[1] = './j.jpg';
      }
      echo '<div class="col-xs-12 col-sm-4">
            <div class="card">
                <a class="img-card" data-fancybox="images-preview" href="./j.jpg">
                <img src=" ' . $group_image . ' " />

                </a>
                    <p class="imglist" style="max-width: 1000px;">
                    <a href="https://source.unsplash.com/juHayWuaaoQ/1500x1000" data-fancybox="images'.$i.'">
                        <img src="https://source.unsplash.com/juHayWuaaoQ/240x160" />
                    </a>

                    <a href="https://source.unsplash.com/eWFdaPRFjwE/1500x1000" data-fancybox="images'.$i.'"
                        <img src="https://source.unsplash.com/eWFdaPRFjwE/240x160" />
                    </a>

                    <a href="https://source.unsplash.com/c1JxO-uAZd0/1500x1000" data-fancybox="images'.$i.'"
                        <img src="https://source.unsplash.com/c1JxO-uAZd0/240x160" />
                    </a>

                    <a href="https://source.unsplash.com/i2KibvLYjqk/1500x1000" data-fancybox="images'.$i.'"
                        <img src="https://source.unsplash.com/i2KibvLYjqk/240x160" />
                    </a>

                    <a href="https://source.unsplash.com/RFgO9B_OR4g/1500x1000" data-fancybox="images'.$i.'"
                        <img src="https://source.unsplash.com/RFgO9B_OR4g/240x160" />
                    </a>

                    <a href="https://source.unsplash.com/7bwQXzbF6KE/1500x1000" data-fancybox="images'.$i.'"
                        <img src="https://source.unsplash.com/7bwQXzbF6KE/240x160" />
                    </a>

                    <a href="https://source.unsplash.com/NhU0nUR7920/1500x1000" data-fancybox="images'.$i.'"
                        <img src="https://source.unsplash.com/NhU0nUR7920/240x160" />
                    </a>

                    <a href="https://source.unsplash.com/B2LYYV9-y0s/1500x1000" data-fancybox="images'.$i.'"
                        <img src="https://source.unsplash.com/B2LYYV9-y0s/240x160" />
                    </a>
                    </p>
                    <div class="card-content">
                                <h5 class="card-title text-center">
                                  ' . $group_name . '

                               </h5>
                            </div>
                        </div>
                    </div>';

    }?>