Javascript gallery
- 11th August 2006 | permanent link
- comments (10)
The very word Javascript has long been associated with those pesky pop-ups, pop-unders and what-not. Developers used it to do just about every anoying thing you could possibly imagine. Well, with the recent resurgance of the DOM, Javascript is gaining serious ground and is being used for what it was intended in the first place. Behaviour.
That is why when I was recently confronted with the idea of creating a slideshow gallery, I jumped at the chance of using Javascript & DOM.
The plan was to create a XHTML and CSS valid, cross-browser, accessible gallery, that would degrade gracefuly in browsers that have Javascript disabled. Quite a mouthfull, I know :) As usual lets first take a look at the XHTML we will be using.
...
<ul id="slideshow_set">
<li><img src="images/2.jpg" alt="Img 2" /></li>
<li><img src="images/3.jpg" alt="Img 3" /></li>
<li><img src="images/4.jpg" alt="Img 4" /></li>
<li><img src="images/5.jpg" alt="Img 5" /></li>
</ul>
...
Looks pretty straigthforward. Now in order to make it look like a slideshow we make a window. We do this by adding a wrapper around our gallery that will be the exact width and height of our desired window, while only the content of the gallery currently inside the window will be shown.
<div id="slideshow_wrapper">
<ul id="slideshow_set"> ...
</ul>
</div>
#slideshow_wrapper {
/* we use relative to catch the children */
position: relative;
overflow: scroll;
width: 200px;
height: 130px;
left: 21px;
top: 5px;
}
#slideshow_set {
position: absolute;
}
#slideshow_set li {
float: left;
}
You might be wondering how are we going to navigate through all of the images if no scroller is seen and no navigation links are present. Here is where DOM does all the work. In order to make this gallery accesible, we really should not show a bunch of behavioral links, that the visitors without Javascript will not be able to use. So we add them with DOM instead. One downside of DOM is that to insert this little bit of code takes up quite a few lines. Even more because I decided to make it semantic and put inside its very own ul.
// left
var navigation = document.createElement("ul");
navigation.setAttribute("id", "navigation");
var li = document.createElement("li");
var scroll_left = document.createElement("a");
scroll_left.setAttribute("id", "scroll_left");
scroll_left.href ="#";
var text = document.createTextNode("Left");
scroll_left.appendChild(text);
li.appendChild(scroll_left);
navigation.appendChild(li);
slideshow.insertBefore(navigation, wrapper);
You might be wondering wich object is slideshow referencing. In order to make our example a bit more flexible I've added another wrapper around the whole slideshow, wich is appropriately named slideshow. So now we have our two behavioral links generated by DOM, but they still don't do much apart from sitting there and looking pretty.
// Attach onmouseover event for left
scroll_left.onclick = function() {
// get the current position of the gallery element
var slideshow_set = document.getElementById("slideshow_set");
var x = parseInt(slideshow_set.style.left);
if (x % 200 == 0) {
moveSlideshow("slideshow_set",x+200,0,10);
}
return false;
}
I've used an anonymous Javascript function to attach an event to our left behavioral link. As you can see moveSlideshow does much of the acctual work. We pass it the current position of the slideshow set, wich we then add to the width of the images used for our gallery, so the function knows where to move the slideshow set. The code for moveSlideshow is well documented, so I will not be going into further detail. All you need to know is that it moves the set just as we want it to :)
Lets review:
- XHTML and CSS? Check!
- Cross-browser? Check!
- Accessible? Check!
- Degrades gracefuly? Ahem, not quite.
All that we need to do to make it degrade gracefuly is to allow the visitors without Javascript to scroll on their own. To do this we set overflow: scroll and then use Javascript to set overflow to hidden.
var wrapper = document.getElementById("slideshow_wrapper");
wrapper.style.overflow = "hidden";
And that's it. You can test the gallery or download the complete source code.
Just one ergonomic feature I am missing:
If you are seeing the first or the last slide the right or the left button should be disabled and dimmed... Pretty sure not that hard to do...
Apparently this becomes quite ugly if you try to give each photo a history entry.
Testimony:
http://blog.pairwise.net/2006/08/18/magic-is-hard/
whose website fails for me.