Please help me on this one to create this images dynamic

Solved
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>
                                <div id="image2" class="tab-pane fade">
                                    <img src="images/cat-img-1.jpg" class="img-responsive" alt="product">
                                </div>
                                <div id="image3" class="tab-pane fade">
                                    <img src="images/product-detail-img.jpg" class="img-responsive" alt="product">
                                </div>
                            </div>
                            <!-- 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">
                                </a>
                                </li>
                                <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">
                                </a>
                                </li>
                                <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">
                                </a>
                                </li>
                            </ul>
                            <!-- ../ -->
                        </div>

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

0 Likes

Success.

Astronaut
835 95 178

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:

 

https://codepen.io/ninthony/pen/NQgZOB

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
0 Likes
Highlighted

Success.

Shopify Expert
63 9 9

hi,

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:

<html>
    <head>
    <style>
            #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;
}
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script>
    
    </head>
    <body>
            <div id="gallery">
                    <div id="panel">
                      <img id="largeImage" src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png" />
                    </div>
                    <div id="thumbs">
                          <img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png" alt="1st image description" />
                          <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="2nd image description" />
                          <img src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png" alt="3rd image description" />
                          <img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" alt="4th image description" />
                          <img src="https://homepages.cae.wisc.edu/~ece533/images/frymire.png" alt="5th image description" />
                    </div>
                  </div>
                  <script>
                        $('#thumbs img').click(function(){
                        $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
                        $('#description').html($(this).attr('alt'));
                        });
                
                    </script>
    </body>
</html>

Output will be 

 

Untitled-1.png

Thank you

SilverClouding Team

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

0 Likes