Ubuntu / Linux news and application reviews.

In this how to, I will present a quick and easy way of making a one-page gallery that uses a very small JavaScript code to load images and their captions on the fly.

imagegallery

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]