I want to create a gallery like this

**bigu** · 06-11-2009, 06:28 PM

http://www.lincah.com/2010-peugeot-5008

Click on one of image then see: http://www.lincah.com/2010-peugeot-5...08-front-angle

Its seem he's using wordpress, but which pluggin can create same site like this?

Please help me thank you!

**bigu** · 07-05-2009, 02:52 PM

Anyone can tell me know?

**vwphillips** · 07-06-2009, 09:20 AM

The way that works does no need javascript.

Each thumbnail has a link to a new page.

It is quite easy to do this using javascript by swapping the main image without linking to new pages or to pop up the new image/description using a 'lightbox' type script.

These scripts are readily available.

in the simplest form

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#txt {
  width:800px;height:50px;border:solid black 1px;text-Align:center;
}

/*]]>*/
</style><script type="text/javascript">
/*<![CDATA[*/
var ImgAry=[];
ImgAry[0]=['http://www.lincah.com/wp-content/uploads/2009/06/2010-peugeot-5008-front-angle-800x600.jpg'];
ImgAry[1]=['http://www.lincah.com/wp-content/uploads/2009/06/2010-peugeot-5008-front-side-800x600.jpg'];
ImgAry[2]=['http://www.lincah.com/wp-content/uploads/2009/06/2010-peugeot-5008-side-800x600.jpg'];

var TxtAry=[];
TxtAry[0]=['Car 1'];
TxtAry[1]=['Car 2'];
TxtAry[2]=['Car 3'];

function SwapImage(nu){
 document.getElementById('main').src=ImgAry[nu];
 document.getElementById('txt').innerHTML=TxtAry[nu];

}



/*]]>*/
</script></head>

<body>

<div id="txt" >Car 1</div>
<img id="main" src="http://www.lincah.com/wp-content/uploads/2009/06/2010-peugeot-5008-front-angle-800x600.jpg" />
<br />
<img onclick="SwapImage(0)" src="http://www.lincah.com/wp-content/uploads/2009/06/2010-peugeot-5008-front-angle-80x80.jpg" />
<img onclick="SwapImage(1)"src="http://www.lincah.com/wp-content/uploads/2009/06/2010-peugeot-5008-front-side-80x80.jpg" />
<img onclick="SwapImage(2)"src="http://www.lincah.com/wp-content/uploads/2009/06/2010-peugeot-5008-side-80x80.jpg" />
</body>

</html>