This will be the code for the iGallery, the XHTML, CSS Valid with Javascript Gallery - Very Detailed. Full code will be shown here.
Live Preview index.html Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML & CSS Gallery</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="swapimage.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="heading">iGallery</div>
<div id="main">
<div id="left">
<img id="largeimg" src="works/whisper.jpg" alt="Whisper" width="340"/>
<div id="title">Whisper</div>
<div id="description">Made for magicka-studio.com Whisper event.</div>
</div>
<div id="right">
<a href="works/whisper.jpg" onclick="javascript:swapImage('whisper.jpg','Whisper','Made for magicka-studio.com Whisper event.'); return false;"><img src="previews/whisper.jpg" alt="Click for a larger view." /></a>
<a href="works/boom.jpg" onclick="javascript:swapImage('boom.jpg','Boom','Made using a new 3D Application. Didnt turn out too bad but it was hard to use.'); return false;"><img src="previews/boom.jpg" alt="Click for a larger view" /></a>
<a href="works/befree.jpg" onclick="javascript:swapImage('befree.jpg','Be Free','Photomanipulation, first try in this sort of style.'); return false;"><img src="previews/befree.jpg" alt="Click for a larger view" /></a>
<a href="works/entity.jpg" onclick="javascript:swapImage('entity.jpg','Entity','I always said this was Old Skool turned Modern. Its an old skool render, you hardly see those any more.'); return false;"><img src="previews/entity.jpg" alt="Click for a larger view" /></a>
<a href="works/double.jpg" onclick="javascript:swapImage('double.jpg','Double Vision','This a very large piece, it does actually have two photo manipulations in one since it was a collaboration.'); return false;"><img src="previews/double.jpg" alt="Click for a larger view" /></a>
<a href="works/interior.jpg" onclick="javascript:swapImage('interior.jpg','Interior','About a 98% Cinema4D Piece of work.'); return false;"><img src="previews/interior.jpg" alt="Click for a larger view" /></a>
</div>
<div id="clear"><!-- --></div>
</div>
<div id="copyright">This design is created by David Ambler for the XHTML and CSS Gallery layout.</div>
</div>
</body>
</html> Style.css Code:
***
margin: 0;
padding: 0;
}
body{
background-color: #EEEEEE;
color: #00314A;
font-family: Tahoma, Arial, Verdana, sans-serif;
font-size: 11px;
}
#container{
width: 700px;
background-color: #F5F5F5;
color: #00314A;
margin: 0 auto;
border: 2px solid #ffffff;
border-top: 0;
padding: 0 5px;
}
#heading{
font-size: 23px;
font-weight: bold;
}
#main{
width: 100%;
margin-top: 5px;
}
#left{
display: inline;
float: left;
width: 340px;
}
#right{
display: inline;
float: right;
width: 340px;
}
#clear{
clear: both;
}
#copyright{
width: 300px;
margin: 5px auto;
font-size: 9px;
border-top: 1px dashed #8D8D8D;
text-align: center;
}
#title{
font-weight: bold;
margin-top: 5px;
}
#description{
width: 100%;
border-top: 1px dashed #8D8D8D;
}
#right img{
border: 2px solid #8D8D8D;
}
#right img:hover{
border: 2px solid #FFFFFF;
} swapImage.js Code:
function swapImage(image,title,description) **
var thetitle = document.getElementById("title");
var thedescription = document.getElementById("description");
thetitle.firstChild.nodeValue = title;
thedescription.firstChild.nodeValue = description;
document.images.largeimg.src = "works/" + image;
document.images.largeimg.alt = title;
}