1. The Javascript. Place the below code above the </head> tag in your webpage:
<script type="text/javascript" language="javascript">function showPic (whichpic) { if (document.getElementById) { document.getElementById('placeholder').src = whichpic.href; if (whichpic.title) { document.getElementById('desc').childNodes[0].nodeValue = whichpic.title; } else { document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; } return false; } else { return true; } }</script>To use it, we must add three parts:
* a list of links where the href attribute contains the URL of the image and the optional title attribute to be displayed
* a block or a label with a specific ID (desc) which displays the text
* an initial image with an ID (placeholder) which will change when we click
2. The CSS. Place the code below either without the <style> tags in your .css file or with <style>, above </head>:
<style>div#galleryExample {background-color: #123;border: 3px solid #234;margin: 0 auto;padding: 10px;width: 480px;}span#desc {color: #ABC;float: left;font-size: 18px;width: 250px;}ul#imgListExample{float: right;margin: 0;}ul#imgListExample li {display: inline;padding: 0 5px;}ul#imgListExample li a {font-size: 16px;}img#placeholder{margin-top: 10px;}</style>3. The HTML. Place the below code where you want the gallery to show up:
<div id="galleryExample"><span id="desc">My gallery</span> <ul id="imgListExample"><li><a onclick="return showPic(this)" href="URL_image1" title="This is the first image">1</a></li><li><a onclick="return showPic(this)" href="URL_image2" title="This is the second image">2</a></li><li><a onclick="return showPic(this)" href="URL_image3" title="This is the third image">3</a></li><li><a onclick="return showPic(this)" href="URL_image4" title="This is the fourth image">4</a></li></ul><img id="placeholder" src="URL_initial_image" /></div>4. Live Demo. Because I use Shutter Reloaded effect when loading images on Web Upd8, I cannot post an example here, but you can see one on an external link: HERE.
[credits: vegabundia]
