html
A simple HTML gallery
A simple HTML gallery
Basic HTML Structure
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Simple and Effective Photo Gallery with HTML and JavaScript</title> </head> <body></body> </html>
In order to create our photo gallery we need 3 <div>:
- one for main photo gallery
- one for thumbnails
- one for preview
Write the HTML Code for Photo Gallery
Under the <body> tag write a <div> to align the photo gallery in the middle
of your screen and <h3> for a title:
<div class="gallery" align="center"> <h3>Simple and Effective Photo Gallery with HTML and 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
what image links you want.
<div class="thumbnails"> <img onmouseover="preview.src=img1.src" name="img1" src="http://bit.ly/2rz3hy" alt="" /> <img onmouseover="preview.src=img2.src" name="img2" src="http://bit.ly/1ug1e6" alt="" /> <img onmouseover="preview.src=img3.src" name="img3" src="http://bit.ly/1yIAYc" alt="" /> <img onmouseover="preview.src=img4.src" name="img4" src="http://bit.ly/2LHyDW" alt="" /> <img onmouseover="preview.src=img5.src" name="img5" src="http://bit.ly/2wyHSR" alt="" /> <img onmouseover="preview.src=img6.src" name="img6" src="http://bit.ly/yRo1i" alt="" /> </div>
Add a Big Preview Image under Thumbnails
The thumbnails are ready with the script set up. Create one more <div>
with the preview image.
<div class="preview" align="center"> <img name="preview" src="http://bit.ly/2rz3hy" alt=""/> </div> </div> <!-- Close the gallery div --> </body> </html>
Styling Your Photo Gallery with CSS
Our photo gallery is ready and working very good, but we need to apply some CSS (Cascading Style Sheets). Under the <title> tag write the code below:
<style type="text/css">
body {
background: #222;
margin-top: 20px;
}
h3 {
color: #eee;
font-family: Verdana;
}
.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;
height: 500px;
}
</style>
0 comments