ARTICLE

Create a Slideshow Image Gallery Using HTML5

Posted by Manish Singh Articles | HTML 5 February 22, 2012
This is a simple application for beginners that shows how to create a slideshow image gallery using HTML 5, JQuery and CSS tools.
Reader Level:
Download Files:
 

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 a HTML 5 that is used to show the image and text in a HTML 5 applications. I hope this article helps to develop a slideshow image gallery using HTML 5, JQuery and CSS tools.

Step 1 : First open a HTML editor such as Notepad.

  • Open start->Notepad.
  • The name of editor is "Gallery".

wakakakakak.gif

Step 2 :
Create a Folder on a desktop.

  • Right-click on desktop->new->Folder.
  • Name of folder is "Tom".

folder.gif

Step 3 :
Open Visual Studio.

  • Go to file -> New->Projects.
  • Crete an ASP. NET Web Application.
  • Name of "Image.aspx".

new.gif

webapplication.gif

Step 4 :
Add a 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".

html.gif

Step 5 :
Add a folder to your web application.

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

image folder.gif

Step 6 :
Add a items in image folder.

  • Right-click on image folder.
  • Add->add Existing item.
  • After that add items in folder.

11111111111111111.gif

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 a image in a div.

 

Code

 

<div id="slideshow">

    <ul class="slides">

    <li><img src="Gallery/2aaaaaaa.jpg" width="620" height="320" alt="Marsa Alam underawter close up" /></li>

    <li><img src="Gallery/143392-30741-19_10_13---Spring_web.jpg" width="620" height="320" alt="Marsa Alam underawter close up" /></li>

    <li><img src="Gallery/c-sharpcorner.com.jpg" width="620" height="320" alt="Marsa Alam underawter close up" /></li>

    <li><img src="Gallery/1.jpg" width="620" height="320" alt="Marsa Alam underawter 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>

</div>

image.gif

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('can'),

       canContext = can.getContext("2d");

       can.width = slideshow.width;

       can.height = slideshow.height;

       canContext.drawImage(image, 0, 0);

       var Img = canContext.getImg(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.putImg(Img, 0, 0);

       image.parentNode.insertBefore(can, image);

    }

});

Step 10  :
The compete code of the application is given below.

 

Code

<html>

  <head>
  <
title>Image Slider Demo</title>
  <link rel="stylesheet" type="text/css" href="photo1.css" />
 
<body>
  </
head>

  <div id="slideshow">

    <ul class="slides">

    <li><img src="Gallery/2aaaaaaa.jpg" width="620" height="320" alt="Marsa Alam underawter close up" /></li>

    <li><img src="Gallery/143392-30741-19_10_13---Spring_web.jpg" width="620" height="320" alt="Marsa Alam underawter close up"    /></li>

    <li><img src="Gallery/c-sharpcorner.com.jpg" width="620" height="320" alt="Marsa Alam underawter close up" /></li>

    <li><img src="Gallery/1.jpg" width="620" height="320" alt="Marsa Alam underawter 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>

  </div>

  <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.

compete image.gif


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

Output

1.gif

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

3.gif

2.gif

Resources

Here is some useful resources :

COMMENT USING

Trending up