Q:
How can I set up my gallery of thumbnails in the without-flash version
so that they work similarly to the Flash version?
A: This is a real template example of how it can be done in JavaScript.
Create your thumbnails with the help of some graphic editor and put them into a DIV block. You must
have a film-like DIV block that can be moved by JavaScript to the right-hand and left-hand sides
depending on what number you have clicked.
With the help of the clip "CSS" style you should create a mask that will serve as a window
which the DIV block will be shown through. Actually this style defines a clipping region of a
positional element. The clipping region is the area of the element layer in which the content is
visible (to learn more about this style turn to the appropriate literature). To display different
thumbnails you should change the horizontal coordinate of this "film" and place it precisely in the
left CSS style. Therefore you have two DIV blocks positioned absolutely (position: absolute;). The
first DIV block (the "film") should be placed inside the second one (the "window") which the clip
"CSS" style is assigned to:
<div style="
position:absolute; top:374px;
clip:rect(0px 255px 46px 0px); left: 383px; width:400px">
<div id="stripe" style="
position:absolute; height:48px; left:0px; top:0px;">
<a href="javascript:Swap(1)"><img src="images/thumbnails/one1.gif" border="0"
hspace="1"></a>
<a href="javascript:Swap(2)"><img src="images/thumbnails/one2.gif" border="0"
hspace="1"></a>
<a href="javascript:Swap(3)"><img src="images/thumbnails/one3.gif" border="0"
hspace="1"></a>
<img src="images/thumbnails/two1.gif" border="0" hspace="1">
<img src="images/thumbnails/two2.gif" border="0" hspace="1">
<img src="images/thumbnails/two3.gif" border="0" hspace="1">
<img src="images/thumbnails/three1.gif" border="0" hspace="1">
<img src="images/thumbnails/three2.gif" border="0" hspace="1">
<img src="images/thumbnails/three3.gif" border="0" hspace="1">
<img src="images/thumbnails/four1.gif" border="0" hspace="1">
<img src="images/thumbnails/four2.gif" border="0" hspace="1">
<img src="images/thumbnails/four3.gif" border="0" hspace="1">
<img src="images/thumbnails/five1.gif" border="0" hspace="1">
<img src="images/thumbnails/five2.gif" border="0" hspace="1">
<img src="images/thumbnails/five3.gif" border="0" hspace="1">
</div>
</div>
See that the inner DIV block contains thumbnails. These are images that follow one after the
other. Now to make this film-like DIV block move to the necessary side and stop at the correct
position. Here's given a java script function that will do it:
<a href="#"
onClick="setInterval('Position()', 1); num = 0;" ><img alt=""
src="images/n1.gif" border="0" style="margin-right:6px "></a>
<a href="#"
onClick="setInterval('Position()', 1); num = 1;" ><img alt=""
src="images/n2.gif" border="0" style="margin-right:6px "></a>
<a href="#"
onClick="setInterval('Position()', 1); num = 2;" ><img alt=""
src="images/n3.gif" border="0" style="margin-right:6px "></a>
<a href="#"
onClick="setInterval('Position()', 1); num = 3;" ><img alt=""
src="images/n4.gif" border="0" style="margin-right:6px "></a>
<a href="#"
onClick="setInterval('Position()', 1); num = 4;" ><img alt=""
src="images/n5.gif" border="0" style="margin-right:6px "></a>
Every time that you click a certain thumbnail you redefine the global num variable. It begins
with 0 for the first digit because the array indexes begin from zero in javascript.
And now for the prev. and next buttons. Declare two more functions for these buttons:
<a href="#"
onClick="Prev();" ><img alt="" src="images/prev.gif" border="0"
style="margin-right:20px "></a>
.........
<a href="#"
onClick="Next();" ><img alt="" src="images/next.gif" border="0"></a>
See also:
How to set up
gallery thumbnails demo movie
