Post
Ask Question

Create a Slideshow Image Gallery Using HTML5

Introduction

This is a simple application for beginners that shows how to create a slideshow image gallery using HTML 5, JQuery, and CSS tools. We know that HTML 5 is the advanced version of HTML. Basically, HTML 5 can be used to develop 3D applications. This article is intended to help with the use of HTML5 tools to develop slideshow image gallery applications. CSS is the acronym for Cascading Style Sheet that is used for design. CSS defines how HTML elements are to be displayed. Canvas is an important tag of HTML 5 that is used to show the image and text in an HTML 5 application. I hope this article helps to develop a slideshow image gallery using HTML 5, JQuery, and CSS tools.

Step 1. First, open an HTML editor such as Notepad.

  • Open Start Notepad.
  • The name of the editor is "Gallery".
    Notepad

Step 2. Create a Folder on a desktop.

  • Right-click on desktop, new, Folder.
  • the name of the folder is "Tom".
    Desktop

Step 3. Open Visual Studio.

  • Go to file, New, Projects.
  • Create an ASP. NET Web Application.
  • Name of "Image. aspx".
    Projects
    OK

Step 4. Add an HTML file to your web application.

  • Right-click on Solution Explorer.
  • Add, add new item, HTML form.
  • The Name of the HTML form is "slider.html".
    Web application

Step 5. Add a folder to your web application.

  • Right-click on Solution Explorer.
  • Add, Add a new folder.
  • The Name of the folder is "Gallery".
    Gallery

Step 6. Add items in the image folder.

  • Right-click on the image folder.
  • Add, add Existing item.
  • After that add the item to the folder.
    Image folder

Step 7. Now in this step, we define a CSS file named Photo1.css. In CSS we define all properties of sliders; that is background, border, margin, height, width, position, display, etc.

Code

body {
    color: Green;
    background: url('img/bg.jpg') repeat-x #CC99FF;
    font: 13px "Lucida Sans Unicode", Arial;
}

#SLIDE {
    background-color: #F5F5F5;
    border: 1px solid #FFFFFF;
    height: 340px;
    margin: 150px auto 0;
    position: relative;
    width: 640px;
    -moz-box-shadow: 0 0 22px #111;
    -webkit-box-shadow: 0 0 22px #111;
    box-shadow: 0 0 22px #111;
}

#SLIDE ul {
    height: 320px;
    left: 10px;
    list-style: none outside none;
    overflow: hidden;
    position: absolute;
    top: 10px;
    width: 620px;
}

#SLIDE li {
    position: absolute;
    display: none;
    z-index: 10;
}

#SLIDE li:first-child {
    display: block;
    z-index: 1000;
}

#SLIDE .slideActive {
    z-index: 1000;
}

#SLIDE canvas {
    display: none;
    position: absolute;
    z-index: 100;
}

#SLIDE .arrow {
    height: 86px;
    width: 60px;
    position: absolute;
    top: 50%;
    margin-top: -43px;
    cursor: pointer;
    z-index: 5000;
}

#SLIDE .previous {
    background-position: left top;
    left: 0;
}

#SLIDE .previous:hover {
    background-position: left bottom;
}

#SLIDE .next {
    background-position: right top;
    right: 0;
}

#SLIDE .next:hover {
    background-position: right bottom;
}

Step 8. Now in this step, we set a path of an image in a div.

Code

<p id="slideshow">
    <ul class="slides">
        <li><img src="Gallery/2aaaaaaa.jpg" width="620" height="320" alt="Marsa Alam underwater close up" /></li>
        <li><img src="Gallery/143392-30741-19_10_13---Spring_web.jpg" width="620" height="320" alt="Marsa Alam underwater close up" /></li>
        <li><img src="Gallery/c-sharpcorner.com.jpg" width="620" height="320" alt="Marsa Alam underwater close up" /></li>
        <li><img src="Gallery/1.jpg" width="620" height="320" alt="Marsa Alam underwater close up" /></li>
        <li><img src="Gallery/2.jpg" width="620" height="320" alt="Turrimetta Beach - Dawn" /></li>
        <li><img src="Gallery/3.jpg" width="620" height="320" alt="Power Station" /></li>
        <li><img src="Gallery/4.jpg" width="620" height="320" alt="Colors of Nature" /></li>
    </ul>
    <span class="arrow previous"></span>
    <span class="arrow next"></span>
</p>

Develop

Step 9. Now we have used a js file named galary.js. In the js file, we set a sliding functionality.

Code

function createcanOverlay(image) {  
   var can = document.createElement('canvas'),  
       canContext = can.getContext("2d");  
       can.width = slideshow.width;  
       can.height = slideshow.height;  
       canContext.drawImage(image, 0, 0);  
       var Img = canContext.getImageData(0, 0, can.width, can.height),  
       data = Img.data;  
       for (var i = 0, z = data.length; i < z; i++) {  
       data[i] = ((data[i] < 128) ? (2 * data[i] * data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));  
       data[++i] = ((data[i] < 128) ? (2 * data[i] * data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));  
       data[++i] = ((data[i] < 128) ? (2 * data[i] * data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));  
       ++i;  
           }  
       canContext.putImageData(Img, 0, 0);  
       image.parentNode.insertBefore(can, image);  
    }  
}

Step 10. The complete code of the application is given below.

Code

<html>
  <head>
    <title>Image Slider Demo</title>
    <link rel="stylesheet" type="text/css" href="photo1.css" />
  </head>
  <body>
    <p id="slideshow">
      <ul class="slides">
        <li><img src="Gallery/2aaaaaaa.jpg" width="620" height="320" alt="Marsa Alam underwater close up" /></li>
        <li><img src="Gallery/143392-30741-19_10_13---Spring_web.jpg" width="620" height="320" alt="Marsa Alam underwater close up" /></li>
        <li><img src="Gallery/c-sharpcorner.com.jpg" width="620" height="320" alt="Marsa Alam underwater close up" /></li>
        <li><img src="Gallery/1.jpg" width="620" height="320" alt="Marsa Alam underwater close up" /></li>
        <li><img src="Gallery/2.jpg" width="620" height="320" alt="Turrimetta Beach - Dawn" /></li>
        <li><img src="Gallery/3.jpg" width="620" height="320" alt="Power Station" /></li>
        <li><img src="Gallery/4.jpg" width="620" height="320" alt="Colors of Nature" /></li>
      </ul>
      <span class="arrow previous"></span>
      <span class="arrow next"></span>
    </p>
    <script src="Scripts/galary.js"></script>
    <h1>Tom Develop a Slider image</h1>
  </body>
</html>

Step 11. The following shows an image of the complete application.

Solution Explorer

Step 12. Press Ctrl + F5 to run the application in a browser.

Output

Output

Click a corner of the image after that change an image one by one.

Slider

ON CODE

Resources

Here are some useful resources.


Similar Articles