locked
Displaying image in asp.net RRS feed

  • Question

  • User71824614 posted

    How to display images one by one when click on button using asp.net

    Monday, November 20, 2017 10:29 AM

All replies

  • User2103319870 posted

    How to display images one by one when click on button using asp.net

    You can try with a jquery plugin to display image. One option is to use bxSlider Plugin

    Sample Code

    <!DOCTYPE html>
    <html>
    <head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
      <!-- bxSlider Javascript file -->
    <script src="//cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.min.js"></script>
    <!-- bxSlider CSS file -->
    <link href="//cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.css" rel="stylesheet" />
      <script>
        $(document).ready(function() {
          $('.bxslider').bxSlider();
          $('.slider').hide();
          //Click event of button
          $("#Button1").click(function() {
            //Display the slider on button click
            $('.slider').show();
            $('.bxslider').bxSlider({
              auto: true
            });
          });
        });
      </script>
      <meta charset="utf-8">
    
    </head>
    <body>
      <input type="button" value="Display Image" id="Button1" />
      <div class="slider">
        <ul class="bxslider">
          <li><img src="http://images.stockfreeimages.com/3340/sfi/free_33403728.jpg" width="500" height="500" /></li>
          <li><img src="http://images.stockfreeimages.com/1002/sfi/free_10025276.jpg" width="500" height="500" /></li>
          <li><img src="http://images.stockfreeimages.com/875/sfi/free_8752000.jpg" width="500" height="500" /></li>
        </ul>
      </div>
    </body>
    </html>

    Monday, November 20, 2017 11:02 PM
  • User1400794712 posted

    Hi ramya.ch,

    If you want to use webform control to switch the picture, you can use <asp:image> control. After clicking on the button, modify the url of picture.

    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.10.2.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Image ID="Image1" runat="server" ImageUrl="https://a0.muscache.com/im/pictures/a2c4200e-fb0e-4b99-b337-cb050dcb4573.jpg?aki_policy=large" />
            </div>
            <input type="button" id="Button1" value="Button" />
        </form>
    </body>
    </html>
    <script>
        $(document).ready(function () {
            var i = 0;
            var list = Array();
            list.push("https://a0.muscache.com/im/pictures/a2c4200e-fb0e-4b99-b337-cb050dcb4573.jpg?aki_policy=large");
            list.push("https://a0.muscache.com/im/pictures/eea25994-6e76-42a8-8fdf-781e06cf84f3.jpg?aki_policy=large");
            list.push("https://a0.muscache.com/ac/pictures/a9a1d433-bcde-4601-88a0-5f16871b8548.jpg?interpolation=lanczos-none&size=large&output-format=jpg&output-quality=70");
            $("#Button1").click(function () {
                i++;
                if (i >= 3) {
                    i = 0;
                }
                $("#Image1").attr("src", list[i]);
            })
        })
    </script>

    If you want to implement image slider, there are many methods to implement this function, you can also use slick plugin(Link:http://kenwheeler.github.io/slick/). I make a demo about it, please take it as a reference.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.10.2.js"></script>
        //Use Nuget Package install slick plugin.
        <script src="Scripts/Slick/slick.js"></script>
        <link href="Content/Slick/slick.css" rel="stylesheet" />
        <link href="Content/Slick/slick-theme.css" rel="stylesheet" />
        <style>
            body {
                background: #9fbbf6;
            }
            .main {
                font-family: Arial;
                width: 200px;
                display: block;
                margin: 0 auto;
            }
            h3 {
                background: #fff;
                /*background: #fff;*/
                color: #3498db;
                font-size: 36px;
                line-height: 100px;
                margin: 10px;
                padding: 2%;
                ;
                text-align: center;
            }
            img {
                width: 160px;
                height: 200px;
                margin-top: 10px;
                margin-left:20px;
            }
        </style>    
    </head>
    <body>
        <div class="main">
            <div class="slider slider-nav">
                <div class="Information">
                    <div>
                        <img src="https://a0.muscache.com/im/pictures/a2c4200e-fb0e-4b99-b337-cb050dcb4573.jpg?aki_policy=large" />
                    </div>
                    <div class="description">
                        <p>♥♥♥♥♥</p>
                    </div>
                </div>
                <div class="Information">
                    <div>
                        <img src="https://a0.muscache.com/ac/pictures/a9a1d433-bcde-4601-88a0-5f16871b8548.jpg?interpolation=lanczos-none&size=large&output-format=jpg&output-quality=70" />
                    </div>
                </div>
                <div class="Information">
                    <div>
                        <img src="https://a0.muscache.com/im/pictures/eea25994-6e76-42a8-8fdf-781e06cf84f3.jpg?aki_policy=large" />
                    </div>
                </div>
    
            </div>
        </div>
    </body>
    </html>
    <script type="text/javascript">
        $('.slider-nav').slick({
            infinite: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            asNavFor: '.slider-for'
        });
    </script>

    How it works:

    Best Regards,

    Daisy

    Tuesday, November 21, 2017 8:57 AM