Easy Java Script Code for Sideways Slide show
By Stephen Bucaro
Sideways sliding slide shows are very popular on the Web, especially with companies
that want to display their products or feature various aspects of their business.
It's not difficult to program a sideways slide show, and in this article I show you
how to create one with some basic Java Script.
The first thing you need to do is create your slides. To use this code, all the slide
images need to be the same dimensions. You can resize all your images to be the same
size using a graphics application. Sometimes, if an image is much smaller than the
others, increasing its size too much can make it appear blurry. In that case you may
choose to put a border around the image to increase its size.
You can use three or more images in the slide show. This example uses four images
which are all 256 by 256 pixels in size.
The second thing you need to do is place the html code to display the first and second
slide in the body section of your webpage. Shown below is the code used for this example.
<div id="pan" class="pan">
<img id="leftImage" src="images/scene2.jpg" /><img id="rightImage" src="images/scene1.jpg" />
Note the images id attributes are set to leftImage and rightImage,
and that the images are nested in a div element with its id attribute set to
pan and its class attribute set to pan. And that div is nested
in another div with its class attribute set to cliparea.
Next, you need to paste the style block shown below into the head section of your
web page, just below the title tag.
clip: rect(0 256 256 0);
The style code above defines two classes. Note the bottom class, .pan. This
is the style class for the div that we will use java script to slide back-and-forth.
You need to change the height value to the height of your images. You need to
change the Width value to 2 times the width of your images.
Note the top class, cliparea. This class defines the div as a clip area, which
is like a viewport through which we will view the slide show. You need to change the
height value to the height of your images. You need to change the Width
value to the width of your images.
In the cliparea class, you'll need to change the top and left
values in order to position the slide show on your webpage. The CSS clip rule
only applies to absolute positioned elements. This may make it a bit difficult
to position the slide show where you want it on your webpage. In fact the hardest part
of this example may be positioning the slide show. We'll discuss that later, but for
now lets examine the java script code.