Building Dynamic Shadows for an Image Gallery with JavaScript and CSS
If you're looking for a way to get realistic shading effects on your web site with some JavaScript and CSS, you've come to the right place. This third part of a three-part series applies what you learned in the first two parts to adding dynamic shadows to a simple image gallery.
Building Dynamic Shadows for an Image Gallery with JavaScript and CSS - Working with an image gallery (Page 3 of 4 )
To implement this DOM-based approach for building dynamic shadows in the context of a real-word example, I'm going to define a sample (X)HTML file, which will contain a few example images.
Them, with the help of JavaScript and CSS, I'm going to incorporate a dynamic shadow into each of those images, so you can see how this technique can be applied in a truly useful fashion.
But, for the moment, pay attention to the signature of the (X)HTML file below, which is responsible for displaying the images on screen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
As shown previously, the above (X)HTML file includes three sample images, which also are wrapped by some additional DIVs, identified generically as "container." Also, you should notice that each of these images is absolutely positioned with reference to the wrapping DIVs, which will facilitate the inclusion of the pertinent dynamic shadows at a later time.
In addition, to complement the previous explanation, below I included all the sample images coded before. Here they are:
So far, so good. At this stage I've built a primitive image gallery to test out the JavaScript shading application developed earlier. Next, I'm going to slightly modify the signature of the "addShadow()" JavaScript function, to provide it with the ability to add a dynamic shadow to each picture of the gallery.
The brand new definition of this function is as follows:
function addImageShadows(){
var images=document.getElementsByTagName('img');
if(!images){return};
for(var i=0;i<images.length;i++){
if(images[i].parentNode.className=='container'){
//images[i].parentNode.style.zIndex=10-i;
// create shadow
var shadow=document.createElement('div');
shadow.className='shadow';
// append shadow to image
images[i].parentNode.appendChild(shadow);
}
}
}
As I explained earlier, now I've defined a new JavaScript function, called "addImageShadow()" that has the capacity to add a dynamic shadow to each image of the gallery. In this case, the function iterates over each image, and appends to it the pertinent shadow, via the DOM. That was really simple to understand, wasn't it?
Of course, the previous function should be called after the web page has been loaded, as shown below:
// add dynamic shadows to images after web page has been loaded
Now that you've grasped the logic that drives the prior "addImageShadow()" JavaScript function, you might want to see how these sample images look after incorporating into them the respective shadows. Therefore, below I included the "shadowed" version of them. Here they are:
See how easy it is to build lightweight shadows with JavaScript? I told you it was a simple process! In this case, I used this approach with some sample images, but the same concept can be extended to other web page elements as well.
Having demonstrated how the previous "addImageShadow()" JavaScript function does its thing, it's time to pick up all the pieces that compose this shading application and merge them into one single file.
Naturally, this will be done in the last section of this tutorial, so click on the link shown below and keep reading.
JavaScript 
Using the DOM to Build Dynamic Shadows with JavaScript and CSS
