Dynamic Galleries with DOM and CSS - Old School Dynamic Galleries
(Page 3 of 8 )
When Javascript became more common, many developers with a lot of time and a lot of enthusiasm on their hands came up with hundreds of “DHTML galleries,” at times appallingly one-browser-centric and bloated ones. Nearly all of them used pop-up windows to display the images, and relied on a lot of inline event calls with a lot of parameters:
HTML:
<a href="javascript:showpic('images/archway.jpg',300,300) ">
<img src="images/tn_archway.jpg" alt="Archway with natural green roof" />
</a>
JavaScript:
function showpic(pic,x,y)
{
newwin=window.open(pic,'newwin','width='+x+',height='+y+'toolbar=no')
newwin.moveTo(screen.width/2-x/2,200);
}
This practice leads to completely dead galleries in browsers without JavaScript. A better way is to always ensure there is a link to the image and JavaScript that adds the pop-up functionality on top of that.
<a href="images/archway.jpg"
onclick="showpic('images/archway.jpg',300,300);return false;">
<img src="images/tn_archway.jpg" alt="Archway with natural green roof" />
</a>
These pop-up window examples still did not allow for a link back or extra information to be displayed. Seeing that as a problem, developers started writing out HTML dynamically:
HTML:
<a href="images/archway.jpg"
onclick="showpic('images/archway.jpg','An archway in Santorini',300,300);return false;">
<img src="images/tn_archway.jpg" alt="Archway with natural green roof" /></a>
Javascript:
function showpic(pic,message,x,y)
{
newwin=window.open(pic,'newwin','width='+x+',height='+y+'toolbar=no')
newwin.document.open();
newwin.document.write('<html><head><title>Big picture</title></head>');
newwin.document.write('<body bgcolor="#0000000">');
newwin.document.write('<a style="float:right;font-family:arial;color:#369;"
href="javascript:window.close()">Close</a>');
newwin.document.write('<h1
style="color:#fff;font-size:12px;font-family:arial;">'+message+'</h1>');
newwin.document.write('<img src="'+pic+'" alt="'+message+'">');
newwin.document.write('</body></html>');
newwin.moveTo(screen.width/2-x/2,200);
}
There was no end to their creativity: sliding windows, fading in images, galleries with templates using the window location to read image location and message, and lots more. All of them had several drawbacks:
- Bad maintainability - the idea of a dynamic gallery is that it enhances the basic HTML without any extra link event calls with a lot of parameters.
- Bad Accessibility - they relied on Javascript for the functionality.
- Bad performance – Instead of one browser, the machine needed to start a new window every time the user clicked a thumbnail.
- Pop-ups - These might be blocked by a lot of users nowadays.
Let’s try to keep things as simple as possible, and not listen to the "feature creature" on our shoulders telling us to add more, more and some more later.
Next: Sketching our Gallery >>
More Style Sheets Articles
More By Chris Heilmann
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 22 
