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:
