This is a demo I posted to a similar request in another thread. Maybe use it as a guide to get you started.
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>
<title></title>
<style type="text/css">
#ulThumbs {
clear: both;
list-style-type: none
}
#ulThumbs li {
margin: 0px 10px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline
}
#imgEnlargeContainer {
width: 50%;
float: left
}
#descContainer {
width: 50%;
float: right
}
#enlargeContainer {
opacity: 0;
filter:alpha(opacity=0)
}
</style>
<script type="text/javascript">
var thumbMaxWidth = 100;
var thumbMaxHeight = 100;
//preload the images
var picData = [
['num1.jpg','description 1'],
['num2.jpg','description 2'],
['num3.jpg','description 3'],
['num4.jpg','description 4'],
['num5.jpg','description 5']
];
picO = new Array();
for(i=0; i < picData.length; i++){
picO[i] = new Image();
picO[i].src = picData[i][0];
}
var fadeTimer;
function showEnlargement(picNum){
if(fadeTimer){
clearInterval(fadeTimer);
curOpac = 0;
setOpacityCSS();
}
imgEnlargeO.src = picO[picNum].src;
descContainerO.innerHTML = picData[picNum][1];
fadeTimer = setInterval(setOpacity,100);
}
var curOpac = 0;
var speed = 0.2;
function setOpacity() {
curOpac = curOpac + speed;
if(curOpac <= 10){
setOpacityCSS();
}
}
function setOpacityCSS(){
if(typeof(enlargeContainerO.style.opacity) == 'string'){
enlargeContainerO.style.opacity = curOpac/10;
} else {
enlargeContainerO.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
}
}
window.onload=function(){
//create the thumbnails
var ulThumbsO = document.getElementById('ulThumbs');
var thumbDims = new Array();
for(i=0; i < picO.length; i++){
liO = document.createElement('li');
imgO = document.createElement('img');
imgO.src = picO[i].src;
thumbDims = calcNewDimensions(picO[i].width, picO[i].height, thumbMaxWidth, thumbMaxHeight);
imgO.width = thumbDims['width'];
imgO.height = thumbDims['height'];
imgO.num = i;
imgO.onmouseover=function(){
showEnlargement(this.num);
}
liO.appendChild(imgO);
ulThumbsO.appendChild(liO);
}
enlargeContainerO = document.getElementById('enlargeContainer');
imgEnlargeO = document.getElementById('imgEnlarge');
descContainerO = document.getElementById('descContainer');
//set a default random enlargement and description
var picNum = Math.floor(Math.random()*picData.length);
showEnlargement(picNum);
}
//-------------------------------------------
function calcNewDimensions(width, height, maxWidth, maxHeight){
newDims = new Array();
var xRatio = maxWidth / width;
var yRatio = maxHeight / height;
//calculate the new width and height
if(width <= maxWidth && height <= maxHeight) { //image does not need resizing
newDims["width"] = width;
newDims["height"] = height;
} else if(xRatio * height < maxHeight) {
newDims["height"] = Math.round(xRatio * height);
newDims["width"] = maxWidth;
} else {
newDims["width"] = Math.round(yRatio * width);
newDims["height"] = maxHeight;
}
return newDims;
}
</script>
</head>
<body>
<div id="enlargeContainer">
<div id="imgEnlargeContainer">
<img id="imgEnlarge" src="" alt="" />
</div>
<div id="descContainer"></div>
</div>
<ul id="ulThumbs"></ul>
</body>
</html>
and this demo slides divs from left to right. The 2 demos could be blended to produce the effect in your link.
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>
<title></title>
<style type="text/css">
body {
position: relative
}
#main {
overflow: hidden;
border: 10px solid black;
color: black;
text-align: center;
position: absolute; top: 30px; left: 50px;
background-color: white
}
#enlargeCont {
display: none;
position: absolute;
top: 100px;
left: 300px
}
</style>
<script type="text/javascript">
var thumbWidth = 150; //in pixels
var thumbHeight = 150;
var picPaths = ['pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic6.jpg'];
//preload the images
var numPics = picPaths.length;
var picO = new Array();
for(var i=0; i < numPics; i=i+1) {
picO[i] = new Image();
picO[i].src = picPaths[i];
}
//assign the pics to their containers
window.onload=function() {
//first set the thumbnails' container width and height
document.getElementById("main").style.width = thumbWidth+'px';
document.getElementById("main").style.height = thumbHeight+'px';
//now create the thumbnails
for(var i=0; i < numPics; i=i+1) {
//create a div for the thumbnail
var imgDiv = document.createElement("div");
imgDiv.setAttribute("id", 'div'+i);
imgDiv.style.display = 'none';
imgDiv.style.position = 'absolute';
imgDiv.style.top = thumbHeight+'px';
imgDiv.style.left = '0px';
//create the thumbnail img element and set its attributes
var imgElem = document.createElement("img");
imgElem.setAttribute("src", picO[i].src);
imgElem.setAttribute("alt", '');
imgElem.setAttribute("title", 'Click to see enlargement');
var newDims = calcNewDimensions(picO[i].width, picO[i].height, thumbWidth, thumbHeight);
imgElem.src = picO[i].src;
imgElem.width = newDims['width'];
imgElem.height = newDims['height'];
//create onclick to display the enlargement
imgElem.onclick=function() {
document.getElementById("imgEnlarge").src = this.src;
document.getElementById("enlargeCont").style.display = 'block';
}
//append the new elements to their parents
imgDiv.appendChild(imgElem);
document.getElementById("main").appendChild(imgDiv);
}
//start the sliding images
swapDiv(1);
}
//section to control the sliding images
var curDiv = 0;
var divSlide;
var divId;
var curLeft = -thumbWidth;
var zedIndex = 0;
var pauser;
function swapDiv(dir) {
divId = "div"+curDiv;
zedIndex = zedIndex + 100;
curLeft = curLeft * dir;
document.getElementById(divId).style.display = 'block';
divSlide = setInterval(function() {slideDiv(dir)},30);
}
function slideDiv(dir) {
document.getElementById(divId).style.zIndex = zedIndex; //this line has to be here and not in swapDiv() to eliminate flickering during 2nd loop through
document.getElementById(divId).style.top = 0+"px"; //this line has to be here and not in swapDiv() to stop flickering if thumbs have different heights
curLeft = curLeft + (1*dir);
if(dir == 1 && curLeft > 0) { //we have scrolled all the way to the right
clearInterval(divSlide);
clearTimeout(pauser);
curDiv = curDiv + 1;
if(curDiv > numPics-1) curDiv = 0;
curLeft = -thumbWidth * dir;
pauser = setTimeout(function() {swapDiv(dir)},2000);
} else if (dir == -1 && curLeft < 0) { //we have scrolled all the way to the left
clearInterval(divSlide);
clearTimeout(pauser);
curDiv = curDiv + 1;
if(curDiv > numPics-1) curDiv = 0;
curLeft = thumbWidth * dir;
pauser = setTimeout(function() {swapDiv(dir)},2000);
} else { //keep scrolling to the right
document.getElementById(divId).style.left = curLeft+"px";
}
}
function calcNewDimensions(width, height, maxWidth, maxHeight){
newDims = new Array();
//scaling factors
var xRatio = maxWidth / width;
var yRatio = maxHeight / height;
//calculate the new width and height
if(width <= maxWidth && height <= maxHeight) { //image does not need resizing
newDims["width"] = width;
newDims["height"] = height;
} else if(xRatio * height < maxHeight) {
newDims["height"] = Math.round(xRatio * height);
newDims["width"] = maxWidth;
} else {
newDims["width"] = Math.round(yRatio * width);
newDims["height"] = maxHeight;
}
return newDims;
}
</script>
</head>
<body>
<div id="main">
<!-- **************************************************************
The sliding images are created dynamically and placed in here
***************************************************************-->
</div>
<div id="enlargeCont">
<img id="imgEnlarge" src="" alt="" />
<div>
<button onclick="this.parentNode.parentNode.style.display='none';">Close enlargement</button>
</div>
</div>
</body>
</html>
Before you post, read our: 
