Post
Ask Question
peter

peter

  • NA
  • 320
  • 0

Convert Picture slide from HTML & Javascript to a ASP version

Apr 28 2021 1:27 PM
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.
  1. <%@ Page Language="VB" AutoEventWireup="false" CodeFile="SlideShowGallery.aspx.vb" Inherits="SlideShowGallery" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <meta name="viewport" content="width=device-width, initial-scale=1">  
  5. <head runat="server">  
  6. <style>  
  7. body {  
  8.   font-family: Arial;  
  9.   margin: 0;  
  10. }  
  11.   
  12. * {  
  13.   box-sizing: border-box;  
  14. }  
  15.   
  16. img {  
  17.   vertical-align: middle;  
  18. }  
  19.   
  20. /* Position the image container (needed to position the left and right arrows) */  
  21. .container {  
  22.   position: relative;  
  23. }  
  24.   
  25. /* Hide the images by default */  
  26. .mySlides {  
  27.   display: none;  
  28. }  
  29.   
  30. /* Add a pointer when hovering over the thumbnail images */  
  31. .cursor {  
  32.   cursor: pointer;  
  33. }  
  34.   
  35. /* Next & previous buttons */  
  36. .prev,  
  37. .next {  
  38.   cursor: pointer;  
  39.   position: absolute;  
  40.   top: 40%;  
  41.   width: auto;  
  42.   padding: 16px;  
  43.   margin-top: -50px;  
  44.   color: white;  
  45.   font-weight: bold;  
  46.   font-size: 20px;  
  47.   border-radius: 0 3px 3px 0;  
  48.   user-select: none;  
  49.   -webkit-user-select: none;  
  50. }  
  51.   
  52. /* Position the "next button" to the right */  
  53. .next {  
  54.   right: 0;  
  55.   border-radius: 3px 0 0 3px;  
  56. }  
  57.   
  58. /* On hover, add a black background color with a little bit see-through */  
  59. .prev:hover,  
  60. .next:hover {  
  61.   background-color: rgba(0, 0, 0, 0.8);  
  62. }  
  63.   
  64. /* Number text (1/3 etc) */  
  65. .numbertext {  
  66.   color: #f2f2f2;  
  67.   font-size: 12px;  
  68.   padding: 8px 12px;  
  69.   position: absolute;  
  70.   top: 0;  
  71. }  
  72.   
  73. /* Container for image text */  
  74. .caption-container {  
  75.   text-align: center;  
  76.   background-color: #222;  
  77.   padding: 2px 16px;  
  78.   color: white;  
  79. }  
  80.   
  81. .row:after {  
  82.   content: "";  
  83.   display: table;  
  84.   clear: both;  
  85. }  
  86.   
  87. /* Six columns side by side */  
  88. .column {  
  89.   float: left;  
  90.   width: 16.66%;  
  91. }  
  92.   
  93. /* Add a transparency effect for thumnbail images */  
  94. .demo {  
  95.   opacity: 0.6;  
  96. }  
  97.   
  98. .active,  
  99. .demo:hover {  
  100.   opacity: 1;  
  101. }  
  102. </style>  
  103.     <title></title>  
  104. </head>  
  105. <body>  
  106.     <form id="form1" runat="server">  
  107.         <div>  
  108. <h2 style="text-align:center">Slideshow Gallery</h2>  
  109. <div class="container">  
  110.   <div class="mySlides">  
  111.     <div class="numbertext">6 / 6</div>  
  112.     <img src="img_snow_wide.jpg" style="width:100%"> // old version  
  113.    <asp:Image ID="Image1" runat="server" ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("ImageID")  %>'/> //New control requirement  
  114.   </div>  
  115.   <a class="prev" onclick="plusSlides(-1)">?</a>  
  116.   <a class="next" onclick="plusSlides(1)">?</a>  
  117.   <div class="caption-container">  
  118.     <p id="caption"></p>  
  119.   </div>  
  120.  Old version showing series of images  
  121.    <div class="row">   
  122.     <div class="column">  
  123.       <img class="demo cursor" src="img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">  
  124.     </div>  
  125.     <div class="column">  
  126.       <img class="demo cursor" src="img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">  
  127.     </div>      
  128.     <div class="column">  
  129.       <img class="demo cursor" src="img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">         
  130.     </div>  
  131.   </div>  
  132. New design   
  133.       <asp:DataList ID="DataList1" runat="server" DataKeyField="PKPhotoId" DataSourceID="PhotoDS"  
  134.         RepeatColumns="5" RepeatDirection="Horizontal">  
  135.         <ItemTemplate>  
  136.              <div class="row">  
  137.      <div class="column">  
  138.         <a href='#' onclick="currentSlide(index)">  
  139.       <asp:Image ID="Image1"  class="demo cursor"  runat="server" ToolTip='<%# Eval("Memo") %>'  ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("ImageID")  %>'/>   
  140.                  </a>  
  141.     </div>  
  142.  </div>  
  143.             </a>  
  144.         </ItemTemplate>  
  145.     </asp:DataList>  
  146.   </div>  
  147. </div>  
  148. <script>  
  149. var slideIndex = 1;  
  150. showSlides(slideIndex);  
  151.   
  152. function plusSlides(n) {  
  153.   showSlides(slideIndex += n);  
  154. }  
  155.   
  156. function currentSlide(n) {  
  157.   showSlides(slideIndex = n);  
  158. }  
  159.   
  160. function showSlides(n) {  
  161.   var i;  
  162.   var slides = document.getElementsByClassName("mySlides");  
  163.   var dots = document.getElementsByClassName("demo");  
  164.   var captionText = document.getElementById("caption");  
  165.   if (n > slides.length) {slideIndex = 1}  
  166.   if (n < 1) {slideIndex = slides.length}  
  167.   for (i = 0; i < slides.length; i++) {  
  168.       slides[i].style.display = "none";  
  169.   }  
  170.   for (i = 0; i < dots.length; i++) {  
  171.       dots[i].className = dots[i].className.replace(" active", "");  
  172.   }  
  173.   slides[slideIndex-1].style.display = "block";  
  174.   dots[slideIndex-1].className += " active";  
  175.   captionText.innerHTML = dots[slideIndex-1].alt;  
  176. }  
  177. </script>  
  178.         </div>  
  179.     </form>  
  180. </body>  
  181. </html>  

Answers (2)