How To Create Video Gallery In Php

In this tutorial you will learn how to create a simple and effective html photo gallery using a little JavaScript that you might need for your portfolio or a personal project.

As this will be just a simple html photo gallery, when you hover the thumbnails, we will change the source of images just by using a single line of JavaScript, so the difficulty should be easy.

Simple HTML Photo Gallery using Javascript

Download a Good Editor

First download Notepad++ or Sublime Text, which will help you a lot if you are a beginner, and create a new text document and save it as index.html.

Video Tutorial

Update (20 January 2015): Because a lot of users asked in the comments where they can find a gallery with navigation and slideshow, you can check my newest tutorial with a complete html photo gallery here, which includes navigation arrows, bullets, slideshow and thumbnails. Check it out, or if you don't need this advanced image gallery, you can just continue reading the simple html photo gallery under the video.

Basic HTML Photo Gallery Structure

We need to declare the document type for our html photo gallery and we can start to create the basic code. Check the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 	<head> 		<title>Simple Photo Gallery with HTML and JavaScript</title> 	</head>  	<body>  	</body> </html>

In order to create our html photo gallery we need 3 divs:

one for the main html photo gallery
one for the thumbnails
one for the preview

Write the HTML Photo Gallery

Under the <body> tag write a <div> to align the html photo gallery in the middle of your screen and <h3> for a title:

<div class="gallery" align="center"> <h3>Simple HTML Photo Gallery with JavaScript</h3>

Now we must create another <div> for thumbnails, with your images and the Javascript code to load the full image on rollover. You can add any image links you want.

The attribute used below for our html photo gallery is named onmouseover. This attribute only works on links, images and button. Whenever your mouse enters in that image container, the code inside the attribute will run. In our case every image hovered will send his source link to the big thumbnail image. Check the code below:

<div class="thumbnails"> 	<img onmouseover="preview.src=img1.src" name="img1" src="images/img1.jpg" alt="" /> 	<img onmouseover="preview.src=img2.src" name="img2" src="images/img2.jpg" alt="" /> 	<img onmouseover="preview.src=img3.src" name="img3" src="images/img3.jpg" alt="" /> 	<img onmouseover="preview.src=img4.src" name="img4" src="images/img4.jpg" alt="" /> 	<img onmouseover="preview.src=img5.src" name="img5" src="images/img5.jpg" alt="" /> </div>

Add a Big Preview Image under Thumbnails

Now that our html photo gallery has the thumbnails ready, you need to create one more <div> with the preview image. Don't forget to set the name attribute as in example below:

<div class="preview" align="center"> 	<img name="preview" src="images/img1.jpg" alt=""/> </div>  </div> <!-- Close the gallery div --> </body> </html>

Styling HTML Photo Gallery with CSS

Our html photo gallery is ready and working very good, but we need to apply some CSS (Cascading Style Sheets). You can find more about CSS and styles here. Under the ending of <title> tag write the css styles below:

<style type="text/css"> 	body { 		background: #222; 		margin: 0; 	} 	.thumbnails img { 		height: 80px; 		border: 4px solid #555; 		padding: 1px; 		margin: 0 10px 10px 0; 	}  	.thumbnails img:hover { 		border: 4px solid #00ccff; 		cursor:pointer; 	}  	.preview img { 		border: 4px solid #444; 		padding: 1px; 		width: 800px; 	} </style>

Update (12 May 2016)

As the other users reported that thename attribute is obsolete and not used anymore, here is a simple alternative using the getElementById function to target elements using their id. Here is an example for the thumbnails:

<img onmouseover="getElementById('preview').src=getElementById('img1').src" id="img1" src="images/img1.jpg" alt="" />

And the preview image should be:

<img id="preview" src="images/img1.jpg" alt="" />

Basically you must replace the name attribute with id, and when targeting an element using the name attribute you should replace it with the getElementById function.

Update (7 February 2017)

To get the image source faster, without targeting every element using his id, you can refer exactly to the element where the onclick/onmouseover event is happening. More precisely, I am talking about the Javascript this keyword.

The code for the thumbnails should look like below, using the this keyword to get the value of the src attribute from the element in action.

<img onmouseover="getElementById('preview').src=this.src" src="images/img1.jpg" alt="">

Final Results

You can style the html photo gallery as you want, but make sure to not add very big images. When a user is loading the page for the first time, he might wait a lot of time if all your pictures are large.

Live Preview

Download Files