Please help me on this one to create this images dynamic

New Member
2 0 0

I have been trying to make this dynamic since like 3-4 days but i cant figure a way to do it. I am a newbie on shopify and programming as well. Please help me out maybe from the structures i can figure out a way its worked out
So the format is i have a bigger image at the top and then other smaller images or thumbnails and when i click it, it should open big at the place of top image

<div class="image-show-tab">
                            <div class="tab-content">
                                <div id="image1" class="tab-pane fade in active">
                                    <img src="images/product-detail-img.jpg" class="img-responsive" alt="product">
                                <div id="image2" class="tab-pane fade">
                                    <img src="images/cat-img-1.jpg" class="img-responsive" alt="product">
                                <div id="image3" class="tab-pane fade">
                                    <img src="images/product-detail-img.jpg" class="img-responsive" alt="product">
                            <!-- tab image  -->
                            <ul class="nav nav-tabs " role="tablist">
                                <li role="presentation" class=""><a href="#image1" aria-controls="product1" role="tab" data-toggle="tab">
                               <img src="images/product-detail-img.jpg" class="img-responsive" alt="product">
                                <li role="presentation" class=""><a href="#image2" aria-controls="product2" role="tab" data-toggle="tab">
                               <img src="images/cat-img-1.jpg" class="img-responsive" alt="product">
                                <li role="presentation" class="active"><a href="#image3" aria-controls="product3" role="tab" data-toggle="tab">
                               <img src="images/product-detail-img.jpg" class="img-responsive" alt="product">
                            <!-- ../ -->

I tried looping on the two sections one for the top image and another for the bottom ones but i cant figure it out :(


This is what the image looks like on HTML
Annotation 2019-08-01 163526.png

Shopify Partner
1279 169 401

This is an accepted solution.

You'll have to use javascript or jQuery for that kind of functionality. You'll want to listen for a click on your thumbnail, and swap the src attributes out between the main image and the thumbnail image. Here's a codepen example using jQuery:

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
Shopify Expert
85 14 20

This is an accepted solution.


Greetings from SilverClouding .

We Provide you whole code. When you clicked thumb image , the thumb image will populate instead of main image .


Here the whole code:

            #thumbs { padding-top: 10px; overflow: hidden; }
#thumbs img, #largeImage {
border: 1px solid gray;
padding: 4px;
background-color: white;
cursor: pointer;
img#largeImage {
    width: 600px;
#thumbs img {
float: left;
margin-right: 6px;
width: 100px;
#description {
background: black;
color: white;
position: absolute;
bottom: 0;
padding: 10px 20px;
width: 525px;
margin: 5px;
#panel {
position: relative;
    <script src="" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script>
            <div id="gallery">
                    <div id="panel">
                      <img id="largeImage" src="" />
                    <div id="thumbs">
                          <img src="" alt="1st image description" />
                          <img src="" alt="2nd image description" />
                          <img src="" alt="3rd image description" />
                          <img src="" alt="4th image description" />
                          <img src="" alt="5th image description" />
                        $('#thumbs img').click(function(){

Output will be 



Thank you

SilverClouding Team

If its helpful to you please do Like and Accept solution.