Image carousel using javascript

Question

I've to make a webpage using asp .net and c# .

https://www.zoya.com/content/category/Zoya_Nail_Polish.html

Above is the reference page I need to replicate for my application. Below is the code I'm working with. (I simplified the complexity of finding number of images per product to fixed 3 images per item )

But when I click on the image since I'm calling back end code the pages gets refreshing.

And in the reference page there is on mouse click the selection happens and if you move out of the swatches the selected image will be highlighted. What I'm missing in the code? How can I achieve it. Any reference link will also be helpful. I'm new to web development.

<div class="container">

            <div class="col-md-12 ">
                <div class="col-md-4 single_left pull-left left">

      <div class="flexslider">
                        <ul>
                            <li>
                                <img id="image3" class="etalage_thumb_image" src="images/4.jpg" />
                                <img id="image" class="etalage_source_image" src="images/4.jpg" />

                            </li>
                            <li>
                                     <img id="image1" class="etalage_thumb_image" src="images/4.jpg" />
                                <img id="image4" class="etalage_source_image" src="images/5.jpg" />
                            </li>
                            <li>
                                       <img id="image2" class="etalage_thumb_image" src="images/4.jpg" />
                                <img id="image5" class="etalage_source_image" src="images/6.jpg" />
                            </li>
                        </ul>
                    </div>

                    <script defer src="assets/js/jquery.flexslider.js"></script>
                    <link rel="stylesheet" href="assets/css/flexslider.css" type="text/css" media="screen" />

                    <div class="caption ">
                        <div id="name"><small><strong>Zoya 1 </strong></small></div>
                        <div id="price"><strong>Zoya123</strong></div>
                    </div>
                    <div>
                        <asp:Label ID="Label1" runat="server" Text="SELECTED" Style="color: red; font: bold"></asp:Label>

                        <asp:Image ID="imgselected" runat="server" src='<%#"assets/products/"+Eval("ImageUrl").ToString() %>' Width="300" Height="250" alt="" />
                        <br />
                        <strong>
                            <asp:Label ID="ItemCode" runat="server" Text=""></asp:Label>
                        </strong>
                        <br />
                        <strong>
                            <asp:Label ID="lblPrice" runat="server" Text=""></asp:Label>
                        </strong>
                        <br />
                        <p>
                            <small><strong>
                                <asp:Label ID="lblDesc" runat="server" Text=""></asp:Label>
                            </strong></small>
                            <br />

                            <asp:Label ID="lblID" Style="display: none;" runat="server" Text='<%# Eval("ID")  %>'></asp:Label>
                            <small>
                                <asp:Label ID="lblMsg" runat="server" Text="*" ForeColor="#990000"></asp:Label>
                            </small>
                            <br />
                        </p>
                        <asp:TextBox ID="txtqty" type="number" class="form-control" Text="0" runat="server"></asp:TextBox>

                        <asp:LinkButton ID="btnSubmit" type="submit" CssClass="add-cart item_add" runat="server" OnClick="btnSubmit_Click"><i class="fa fa-save"></i> Add to Cart</asp:LinkButton>
                        <script>
                            // Can also be used with $(document).ready()
                            $(window).load(function () {
                                $('.flexslider').flexslider({
                                    animation: "slide",
                                    controlNav: "thumbnails"
                                });
                            });
                        </script>
                    </div>
                </div>
                <div class="col-md-8 single-top-in simpleCart_shelfItem">

                    <div>
                        <img id="img" src="assets/products/1_ZP244.jpg" />
                    </div>

                    <div class="clearfix"></div>
                    <div style="align-content: center">
                        <strong>CLICK THE IMAGE TO SELECT </strong>
                    </div>

                    <asp:ListView ID="ImagesList" runat="server"
                        DataKeyNames="ID"
                        GroupItemCount="14"
                        OnPagePropertiesChanging="ImagesList_PagePropertiesChanging" class="data" OnSelectedIndexChanged="OnSelectedIndexChanged">
                        <EmptyDataTemplate>
                            No Images found.
                        </EmptyDataTemplate>
                        <LayoutTemplate>
                            <table>
                                <tr runat="server" id="groupPlaceholder" />
                            </table>
                        </LayoutTemplate>
                        <GroupTemplate>
                            <tr>
                                <td runat="server" id="itemPlaceholder" />
                            </tr>
                        </GroupTemplate>
                        <ItemTemplate>
                            <td>
                                <div class="data" data-image='<%#"assets/products/"+Eval("ImageUrl").ToString() %>'
                                    data-name='<%# Eval("Description") %>' data-price='<%# Eval("Price") %>'
                                    data-image1='<%#"assets/products/1_"+Eval("ImageUrl").ToString() %>'
                                    data-image2='<%#"assets/products/2_"+Eval("ImageUrl").ToString() %>'>
                                    <asp:LinkButton ID="LinkButton1" runat="server" CssClass="myButton"
                                        CommandName="Change"
                                        OnCommand="btnDetails_Command"
                                        CommandArgument='<%# Eval("Notes") %>'>
                                    <img src='<%#"assets/products/"+Eval("ImageUrl").ToString() %>' class="image" style="width: 50px; height: 50px" alt="Change" onclick='' /></asp:LinkButton>
                                </div>
                            </td>
                        </ItemTemplate>
                    </asp:ListView>
                </div>
                <div class="clearfix"></div>
                <!---->
            </div>
            <script>
                $(".data").mouseover(function () {
                    var image = $(this).attr('data-image');
                    var image1 = $(this).attr('data-image1');
                    var image2 = $(this).attr('data-image2');
                    var image3 = $(this).attr('data-image');
                    var image4 = $(this).attr('data-image1');
                    var image5 = $(this).attr('data-image2');
                    var name = $(this).attr('data-name');
                    var price = $(this).attr('data-price');
                    $(".left").find('#image').attr('src', image);
                    $(".left").find('#image1').attr('src', image1);
                    $(".left").find('#image2').attr('src', image2);
                    $(".left").find('#image3').attr('src', image3);
                    $(".left").find('#image4').attr('src', image4);
                    $(".left").find('#image5').attr('src', image5);
                    $(".left").find('#name').text(name);
                    $(".left").find('#price').text(price);
                })

            </script>
            <div class="clearfix"></div>
        </div>

Answer 1

Welcome to front-end web development! This is a great use-case for JavaScript. There are multiple ways you can solve this problem. There's a quick and dirty way as well as a hard-to-code but very efficient way. Since you're new to JavaScript I'll show you the quick and dirty way. Once you master the concept of JavaScript Objects and manipulating the DOM, you'll probably figure out the more complex way (load your data asychronously using a JSON API on your backend, store that result in a JavaScript object, then add Event Listeners to make the page respond to your clicks and show the right item).

The quick and dirty way: https://codepen.io/krabbypattified/pen/vmpyjK

That JavaScript basicially says "Add a click listener to each of the item pickers that says: When you click on me, find all of the elements with class="item" and if its id matches my id , show it. Otherwise, hide it."