In this video tutorial, you will learn simple way of building an
Advanced JavaScript Image Gallery
or JavaScript slide show with detailed explanation. A video is given below for better understanding!Following are the styles and script for the same!
Part - 1 : The beginning the JavaScript Gallery!
Part - 2 : Assembling thumbnails!
Part - 3 : Scripting the gallery!
STYLE SHEET
<title>Gallery</title>
<style>
h2{text-align: center; margin:25px auto; color:#D74F2D}
.mainFrame
{
width:827px;
margin:25px auto;
}
.firstFrame
{
float:left;
border:1px solid #CC3300;
margin-right:8px;
position:relative;
transition: background-image 0.2s ease-in-out;
-webkit-transition: background-image 0.2s ease-in-out;
}
.secondFrame
{
float:left;
width:310px;
}
.secondFrame img { cursor:pointer}
/* for caption */
strong
{
display:block;
text-align:center;
padding:2px 0;
color:#00CC00;
font-size:23px;
}
.thumbnails
{
float:left;
width:100px;
height:100px;
cursor:pointer;
}
.clear
{
clear:both;
}
</style>
SCRIPT
<script>
function newImage(imageSrc, imageAlt){
var galleryImage = document.getElementById('loadImage');
var imageCaption = document.getElementById('imgCaption')
galleryImage.src = imageSrc;
imageCaption.innerHTML = imageAlt;
galleryImage.alt = imageAlt;
galleryImage.title = imageAlt;
}
</script>
</head>
STYLE SHEET
<body><div class="mainFrame">
<h2>Advanced but simple Image Gallery with Image Caption</h2>
<h2>by Yedukation - Subscribe for more!</h2>
<div class="firstFrame">
<img src="images/Bullet-Train-1.jpg" id="loadImage" alt="Bullet Train 1" title=" Bullet Train 1" >
<strong id='imgCaption'>Bullet Train 1</strong>
</div>
<div class="secondFrame">
<img src="images/Bullet-Train-1.jpg" class="thumbnails" onclick='newImage(this.src, this.alt)' alt="Bullet Train 1" title=" Bullet Train 1">
<img src="images/Bullet-Train-2.jpg" class="thumbnails" onclick='newImage(this.src, this.alt)' alt="Bullet Train 2" title=" Bullet Train 2"
style="margin:0 3px 3px 3px">
<img src="images/Bullet-Train-3.jpg" class="thumbnails" onclick='newImage(this.src, this.alt)' alt="Bullet Train 3" title=" Bullet Train 3">
<div class="clear"></div>
<!-- second box -->
<img src="images/Cruise-Ship-1.jpg" onclick='newImage(this.src, this.alt)' class="thumbnails" alt="Cruise Ship 1" title=" Cruise Ship 1">
<img src="images/Cruise-Ship-2.jpg" onclick='newImage(this.src, this.alt)' class="thumbnails" alt="Cruise Ship 2" title=" Cruise Ship 2" style="
margin:0 3px 3px 3px">
<img src="images/Cruise-Ship-3.jpg" onclick='newImage(this.src, this.alt)' class="thumbnails" alt="Cruise Ship 3" title=" Cruise Ship 3"> </div>
</div>
</body>
</html>
