locked
Convert Picture slide from HTML & Javascript to a ASP version RRS feed

  • Question

  • User1909155429 posted

    I would appreciate if somebody knows how to change this application from HTML into a working example of ASPX.
    It is taken from the schools website on html. I have modified code to show you what i want, by changing a series of img tags to a Datalist control for thumbnail image display. On image click i want to display same image but full size in another adjacent image control.Also,include count of images and the current image number as illustrated, with a description field present. As i understand it involves getting the dataindex as a count variable so that the paging links can find corresponding images and the current imageID to display.

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="SlideShowGallery.aspx.vb" Inherits="SlideShowGallery" %>  
    <!DOCTYPE html>  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <head runat="server">  
    <style>  
    body {  
      font-family: Arial;  
      margin: 0;  
    }  
      
    * {  
      box-sizing: border-box;  
    }  
      
    img {  
      vertical-align: middle;  
    }  
      
    /* Position the image container (needed to position the left and right arrows) */  
    .container {  
      ;  
    }  
      
    /* Hide the images by default */  
    .mySlides {  
      display: none;  
    }  
      
    /* Add a pointer when hovering over the thumbnail images */  
    .cursor {  
      cursor: pointer;  
    }  
      
    /* Next & previous buttons */  
    .prev,  
    .next {  
      cursor: pointer;  
      ;  
      top: 40%;  
      width: auto;  
      padding: 16px;  
      margin-top: -50px;  
      color: white;  
      font-weight: bold;  
      font-size: 20px;  
      border-radius: 0 3px 3px 0;  
      user-select: none;  
      -webkit-user-select: none;  
    }  
      
    /* Position the "next button" to the right */  
    .next {  
      right: 0;  
      border-radius: 3px 0 0 3px;  
    }  
      
    /* On hover, add a black background color with a little bit see-through */  
    .prev:hover,  
    .next:hover {  
      background-color: rgba(0, 0, 0, 0.8);  
    }  
      
    /* Number text (1/3 etc) */  
    .numbertext {  
      color: #f2f2f2;  
      font-size: 12px;  
      padding: 8px 12px;  
      ;  
      top: 0;  
    }  
      
    /* Container for image text */  
    .caption-container {  
      text-align: center;  
      background-color: #222;  
      padding: 2px 16px;  
      color: white;  
    }  
      
    .row:after {  
      content: "";  
      display: table;  
      clear: both;  
    }  
      
    /* Six columns side by side */  
    .column {  
      float: left;  
      width: 16.66%;  
    }  
      
    /* Add a transparency effect for thumnbail images */  
    .demo {  
      opacity: 0.6;  
    }  
      
    .active,  
    .demo:hover {  
      opacity: 1;  
    }  
    </style>  
        <title></title>  
    </head>  
    <body>  
        <form id="form1" runat="server">  
            <div>  
    <h2 style="text-align:center">Slideshow Gallery</h2>  
    <div class="container">
    <div class="mySlides">
        <div class="numbertext">1 / 6</div>
        <img src="img_woods_wide.jpg" style="width:100%">
      </div>
    
      <div class="mySlides">
        <div class="numbertext">2 / 6</div>
        <img src="img_5terre_wide.jpg" style="width:100%">
      </div>


    <div class="mySlides"> <div class="numbertext">6 / 6</div> <img src="img_snow_wide.jpg" style="width:100%"> // old version
    <asp:Image ID="Image1" runat="server" ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("ImageID") %>'/> //New control requirement </div> <a class="prev" onclick="plusSlides(-1)">?</a> <a class="next" onclick="plusSlides(1)">?</a> <div class="caption-container"> <p id="caption"></p> </div> Old version showing series of images <div class="row"> <div class="column"> <img class="demo cursor" src="img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights"> </div> <div class="column"> <img class="demo cursor" src="img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise"> </div> <div class="column"> <img class="demo cursor" src="img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains"> </div> </div> New design <asp:DataList ID="DataList1" runat="server" DataKeyField="PKPhotoId" DataSourceID="PhotoDS" RepeatColumns="5" RepeatDirection="Horizontal"> <ItemTemplate> <div class="row"> <div class="column"> <a href='#' onclick="currentSlide(index)"> <asp:Image ID="Image1" class="demo cursor" runat="server" ToolTip='<%# Eval("Memo") %>' ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("ImageID") %>'/> </a> </div> </div> </a> </ItemTemplate> </asp:DataList> </div> </div> <script> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); var captionText = document.getElementById("caption"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; captionText.innerHTML = dots[slideIndex-1].alt; } </script> </div> </form> </body> </html>

    Wednesday, April 28, 2021 3:51 PM

Answers

  • User-939850651 posted

    Hi peterthegreat,

    I am a little confused about your needs.

    If it is just to display a full size image, you only need to use ImageButton to achieve it, like this:

    <asp:Image ID="showImage" runat="server" />
                <br />
                    <asp:DataList ID="DataList1" runat="server" RepeatColumns="2" RepeatDirection="Horizontal">
                        <ItemTemplate>
                            <div class="row">
                                <div class="column">
                                    <%--<a href='#' onclick="currentSlide(index)">
                                        <asp:Image ID="Image1" class="demo cursor" Width="50" Height="50" runat="server" ToolTip='<%# Eval("Memo") %>' ImageUrl='<%# Eval("Image") %>' />
                                    </a>--%>
                                    <asp:ImageButton ImageUrl='<%# Eval("Image") %>' Width="50" Height="50" ToolTip='<%# Eval("Memo") %>' ID="imageBtn" OnClick="imageBtn_Click" runat="server" />
                                </div>
                            </div>
                            </a>
                        </ItemTemplate>
                    </asp:DataList>
    Protected Sub imageBtn_Click(sender As Object, e As ImageClickEventArgs)
            Dim btn As ImageButton = sender
            showImage.ImageUrl = btn.ImageUrl
        End Sub

    In this way, you only need to consider how to implement the paging function.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 29, 2021 6:16 AM

All replies

  • User-939850651 posted

    Hi peterthegreat,

    I am a little confused about your needs.

    If it is just to display a full size image, you only need to use ImageButton to achieve it, like this:

    <asp:Image ID="showImage" runat="server" />
                <br />
                    <asp:DataList ID="DataList1" runat="server" RepeatColumns="2" RepeatDirection="Horizontal">
                        <ItemTemplate>
                            <div class="row">
                                <div class="column">
                                    <%--<a href='#' onclick="currentSlide(index)">
                                        <asp:Image ID="Image1" class="demo cursor" Width="50" Height="50" runat="server" ToolTip='<%# Eval("Memo") %>' ImageUrl='<%# Eval("Image") %>' />
                                    </a>--%>
                                    <asp:ImageButton ImageUrl='<%# Eval("Image") %>' Width="50" Height="50" ToolTip='<%# Eval("Memo") %>' ID="imageBtn" OnClick="imageBtn_Click" runat="server" />
                                </div>
                            </div>
                            </a>
                        </ItemTemplate>
                    </asp:DataList>
    Protected Sub imageBtn_Click(sender As Object, e As ImageClickEventArgs)
            Dim btn As ImageButton = sender
            showImage.ImageUrl = btn.ImageUrl
        End Sub

    In this way, you only need to consider how to implement the paging function.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 29, 2021 6:16 AM
  • User1909155429 posted

    I was thinking about the paging mechanism connected to the main image and how it know to navigate image content in the Datalist. 

    It reminds me of jquery type ones, but i wanted one i could set property values, such as image.

    Thursday, April 29, 2021 12:01 PM
  • User-939850651 posted

    Hi peterthegreat,

    I was thinking about the paging mechanism connected to the main image and how it know to navigate image content in the Datalist. 

    It reminds me of jquery type ones, but i wanted one i could set property values, such as image.

    There are many ready-made examples of the paging mechanism, such as this article : paging-in-datalist

    ImageButton is rendered as an Input element of Image type, and it can also set its property values through scripts, such as src attribute.

     Like this:

    Best regards,

    Xudong Peng

    Friday, April 30, 2021 8:22 AM
  • User1909155429 posted

    I was thinking about how to obtain the correct image in the Datalist when you click one of the navigation buttons on the Image control as shown in the markup code provided.

    You have reminded me about an alternative example you can make using just asp controls to do the same as the JQUERY plugin picture slide apps.

    Using a Datalist  to display thumbnail images  and a FormView to view enlarged image that you can also navigate to view other images or select direct from Datalist.

    What do you think?

    Friday, April 30, 2021 2:16 PM
  • User475983607 posted

    The image URL has very little to do with ASP.NET or JQuery.  Can you explain why you are unable to "obtain the correct image"?  Is the problem you do not know how to get the image URLs into a dataset so it can be bound to a data server control?   

    Friday, April 30, 2021 3:02 PM
  • User1909155429 posted

    To explain in basic terms my reason. I wanted to find a suitable picture display showing a series of thumb nail image taken from database table and when each is selected in turn display an enlarged image.

    The apps i found on internet are mostly either JQUERY or HTML and javascript versions.

    I liked the HTML type and wanted to convert it to an ASP.NET version.

    Therefore i was enquiring if a person with the required expertise could accomplish this by converting the code.

    Saturday, May 1, 2021 8:40 PM
  • User475983607 posted

    peterthegreat

    To explain in basic terms my reason. I wanted to find a suitable picture display showing a series of thumb nail image taken from database table and when each is selected in turn display an enlarged image.

    The apps i found on internet are mostly either JQUERY or HTML and javascript versions.

    I liked the HTML type and wanted to convert it to an ASP.NET version.

    Therefore i was enquiring if a person with the required expertise could accomplish this by converting the code.

    There's nothing to convert.  ASP.NET renders dynamic HTML.  You can write the same HTML markup in an ASPX page or MVC View and the markup will work the exactly the same as your HTML example.  

    If you are looking for a dynamic HTML solution, then you have to actually come up with a design.  For example, the image virtual directory are stored in a table.  The code behind queries the table to get the desired images.  Then simply come up with a design that renders the HTML so it is exactly like the HTML example or however you want the UI to work.

    IMHO, a Repeater control is very useful when try to duplicate an HTML design because it can render any HTML you like.

    Saturday, May 1, 2021 9:21 PM
  • User1909155429 posted

    You get around!

    I thought somebody with the technical ability that i dont have would able to design and build a working example?

    I am only good at ideas mainly and find i rely on other more capable technicians, like you sir. 

    I have another question related to CSS formatting on tables inside Listview that i would like exchange from inline code into style sheet. 

    Thursday, May 6, 2021 1:30 PM