APEX News - Special Edition
Disclaimer: Articles published express the views of the contributing Authors and are not necessarily those of the APEX Board of Directors and / or the APEX Newsletter Editor.
CREATING AN IMAGE GALLERY
Whenever creating image galleries, I have always tried to create a gallery of thumbnails that, when clicked, open the corresponding image in its full size and quality. What used to take me more time is the creation of the pages where the final image was displayed ... simply opening the image in a browser window is not good enough.
The ideal would be to have one "template" that would display a given image, when "clicked" from the thumbnails gallery. This is easy with PHP for instance but not all of us have access to it or the expertise to code it.
[ TOP ]
I have tried a technique involving passing variables by URL and Javascript. It is valid XHTML 1.0 Strict and it was tested in I.E. 6 and 5.5, Firefox, Netscape 7 and Opera 7.23.
Two items are then to be considered:
- The Thumbnails Gallery;
- The page that displays the full-size image;
THE THUMBNAILS GALLERY
For this, I have used a styled <dl> following the tutorial by Russ Weakley, from Maxdesign. Just copy and paste the coding from the code boxes below.
<dl class="thumbnail">
<dt>THUMBNAIL</dt>
<dt>TITLE LINKED TO FULL SIZE IMAGE</dt>
<dd>ADDITIONAL INFO</dd>
</dl> The CSS:
dl.thumbnail{
border: 1px dashed #D49FAA;
width: 150px;
text-align: center;
padding: 10px;
float: left;
margin-right: 1em;
}
.thumbnail dt{
font-weight: bold;
}
.thumbnail dt img{
border: 1px solid #000;
}
.thumbnail dd{
margin: 0;padding: 0;
}
[ TOP ]
The page displaying the full-size image is invoked this way:
<a href="folder/image.jpg" title="Image
Title" onclick="window.open('imageshow.htm?'+ this.href, 'Image',
scrollbars=yes, status=no, width=680, height=540'); return false"
onkeypress="window.open('imageshow.htm?'+ this.href, 'Image', scrollbars=yes,
status=no, width=680, height=540'); return false">Explaining:
- The link inside href="" is the real link to the image. This way, if your visitor is not using a javascript-enabled browser, it will open the image in a regular browser window.
- If you use a different value, for each image, in the second parameter of the window.open ('Image' in the example above), every image will open in a new and different browser window; if you keep the same value for every image, only one window will be open and the images will load in it; if you changed it to '_self' or '_top', the full-size image page will open in the same window as the thumbnail gallery;
- The image filename is passed by URL: the onclick and onkeypress events will try to open the following url:
imageshow.htm?'+ this.href => imageshow.htm?folder/image.jpg
[ TOP ]
This means that all you have to change is the href="",the onclick and onkeypress events will take it from there. By the way, those two events are used simultaneously to ensure that users using keyboard are able to use the page as intended. As you can see also, the only javascript used in this page is the one used at those two events.
FULL IMAGE PAGE
This page relies heavily in Javascript. This is not a serious problem since, as we have seen above, if the browser does not support Javascript, the image will be opened in a regular browser window, and this page will not be loaded. Remember, this page will be used to open all the full-size images in the gallery, so you do not have to create a page per image...
CREATING THE IMAGE PLACEHOLDER
The main content of this page is the image. We have to create an <img> tag like this:
<img src="" alt="Image from
the gallery" name="Image1" width="540" height="405"
/> Notice that there is no source (src) defined (given that we do not know what will be the source of the image) and there is an attribute name="Image1"; This attribute is fundamental for the scripts below, so if you change it, you will have to change the scripts to match the new name.
[ TOP ]
GETTING THE IMAGE LOCATION FROM THE URL
As said above, this page was called as "imageshow.htm?folder/image.jpg" so all we have to do is extract the piece of text following the "?" and we will have the image location:
var img_src=new Array();
img_src[0]= new Image();
img_src[0].src= document.location.search.substring("?").substr(1)This will return:
img_src[0].src=folder/image.jpg
CHANGING THE SOURCE OF THE "IMAGE"
Now it is time to change the current src="" to src="folder/image.jpg". For this I have used two Dreamweaver's built-in scripts..
function MM_findObj(n, d) {
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
return x;
}
function MM_changeProp(objName,x,theProp,theValue) {
var obj = MM_findObj(objName);
if (obj && (theProp.indexOf("style.")==-1 || obj.style))
eval("obj."+theProp+"='"+theValue+"'");
}In addition you will need to add one event:
<body onload="MM_changeProp ('Image1','','src',img_src[0].src,'IMG')">
[ TOP ]
So, briefly, when the page loads, the script will extract the image location from the URL and will change the Image source to it. The image will then be loaded.
Both pages validated as XHTML 1.0 Strict and Transitional. More, the gallery is usable when javascript is turned off, the deprecated "target" attribute was removed and you can select where the full-size image page will be open (if in a new window or in the same window).
Follows the complete code of the two pages.
1. THUMBNAILS PAGE
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Thumbnails Gallery</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css"
/>
<meta http-equiv="content-language" content="en"
/>
<meta http-equiv="Content-Script-Type" content="text/javascript"
/>
<style type="text/css">
<!--
body {font-family: Arial, Helvetica, sans-serif;font-size: 76.01%;background-color:
#fff}
dl.thumbnail{
border: 1px dashed #D49FAA;
width: 150px;
text-align: center;
padding: 10px;
float: left;
margin-right: 1em;}
.thumbnail dt { font-weight: bold; }
.thumbnail dt img{border: 1px solid #000;
}
.thumbnail dd{margin: 0;padding: 0;}
-->
</style>
</head>
<body>
<dl class="thumbnail">
<dt><img src="papers/oneringtmb.jpg" alt=""
width="150" height="113" /></dt>
<dt><a href="papers/onering800.jpg" title="The
One Ring" onclick="window.open('imageshow.htm?'+ this.href,
'Image', 'scrollbars=yes, status=no, width=680, height=540'); return
false" onkeypress="window.open('imageshow.htm?'+ this.href,
'Image', 'scrollbars=yes, status=no, width=680, height=540'); return
false">The
One Ring</a></dt>
<dd>Available at <a href="http://www.../fractals/">
Fractal Dreams</a></dd>
</dl>
<dl class="thumbnail">
<dt><img src="papers/palantirtmb.jpg" alt=""
width="150" height="113" /></dt>
<dt><a href="papers/palantir800.jpg" title="The
Palantir" onclick="window.open('imageshow.htm?'+ this.href,
'Image', 'scrollbars=yes, status=no, width=680, height=540'); return
false" onkeypress="window.open('imageshow.htm?'+ this.href,
'Image', 'scrollbars=yes, status=no, width=680, height=540'); return
false">The
Palantir</a></dt>
<dd>Available at <a href="http://www.../fractals/">
Fractal Dreams</a></dd>
</dl>
<dl class="thumbnail">
<dt><img src="papers/guardianstmb.jpg" alt=""
width="150" height="113" /></dt>
<dt><a href="papers/guardians800.jpg" title="The
Guardians" onclick="window.open('imageshow.htm?'+ this.href,'Image',
'scrollbars=yes, status=no, width=680, height=540'); return false"
onkeypress="window.open('imageshow.htm?'+ this.href, 'Image', 'scrollbars=yes,
status=no, width=680, height=540'); return false">The
Guardians</a></dt>
<dd>Available at <a href="http://www...fractals/">
Fractal Dreams</a></dd>
</dl>
<dl class="thumbnail">
<dt><img src="papers/peektmb.jpg" alt=""
width="150" height="113" /></dt>
<dt><a href="papers/peek800.jpg" title="Peek
Island" onclick="window.open('imageshow.htm?'+ this.href,'Image',
'scrollbars=yes, status=no, width=680, height=540'); return false"
onkeypress="window.open('imageshow.htm?'+ this.href, 'Image', 'scrollbars=yes,
status=no, width=680, height=540'); return false">The
Peek Island</a></dt>
<dd>Available at <a href="http://www...fractals/">
Fractal Dreams</a></dd>
</dl>
<dl class="thumbnail">
<dt><img src="papers/poletmb.jpg" alt=""
width="150" height="113" /></dt>
<dt><a href="papers/pole800.jpg" title="Flying
over the Pole" onclick="window.open('imageshow.htm?'+ this.href,'Image',
'scrollbars=yes, status=no, width=680, height=540'); return false"
onkeypress="window.open('imageshow.htm?'+ this.href, 'Image', 'scrollbars=yes,
status=no, width=680, height=540'); return false">The
Pole</a></dt>
<dd>Available at <a href="http://www...fractals/">
Fractal Dreams</a></dd>
</dl>
</body>
</html>
[ TOP ]
2. FULL-SIZE IMAGE DISPLAY
<!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">
<head>
<title>Image Showcase</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css"
/>
<meta http-equiv="content-language" content="en"
/>
<meta http-equiv="Content-Script-Type" content="text/javascript"
/>
<style type="text/css">
<!--
#imageshow {
text-align: center;
margin: 5px auto;
border-top: 1px dashed #D49FAA;
border-right: 1px dashed #D49FAA;
border-left: 1px dashed #D49FAA;
padding: 5px;
}
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 76.01%;
text-align: right;
padding: 5px;
border-top: 1px dashed #D49FAA;
border-bottom: 1px dashed #D49FAA;
}
-->
</style>
<script type="text/JavaScript">
//<![CDATA[
var img_src=new Array();
img_src[0]= new Image();
/* img_src[0].src='papers/'+window.name+'.jpg' */
img_src[0].src= document.location.search.substring("?").substr(1)
function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
return x;
}
function MM_changeProp(objName,x,theProp,theValue) { //v3.0
var obj = MM_findObj(objName);
if (obj && (theProp.indexOf("style.")==-1 || obj.style))
eval("obj."+theProp+"='"+theValue+"'");
}
//]]>
</script>
</head>
<body onload="MM_changeProp('Image1','','src',img_src[0].src,'IMG')">
<div id="imageshow">
<p><img src="" alt="Image from the gallery"
name="Image1" width="540" height="405"
/></p>
</div>
<p id="footer"><a href="#top" onclick="window.close()"
onkeypress="window.close()" title="Close this window">Close
this window</a></p>
</body>
</html>
Acknowledgement: The above article was originally published in the July 2004 APEX Newsletter, is Copyright © Carlos Simöes 2004 - 2010 and may not be republished and / or redistributed without the written permission of the Author.