New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="" lang="en" xml:lang="en">
<script type="text/javascript" src=""></script>

<style type="text/css">

#myslideshow{ /*sample CSS for demo*/
border:2px solid black;


<script src="translucentslideshow.js" type="text/javascript">

* Translucent slideshow- (c) Dynamic Drive (
* This notice MUST stay intact for legal use
* Visit for this script and 100s more.


<script type="text/javascript">

var translideshow1=new translideshow({
wrapperid: "myslideshow", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
[""], //["image_path", "optional_link", "optional_target"]
["", "", "_new"],
[""] //<--no trailing comma after very last image element!
displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true},
orientation: "h", //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 400 //transition duration (milliseconds)



<div id="myslideshow"></div>

<a href="javascript:translideshow1.navigate('back')" style="margin-right:190px;">back</a> <a href="javascript:translideshow1.navigate('forth')">forth</a>
<br />
<b>Or go to a particular slide:</b><br />
<a href="javascript:translideshow1.navigate(0)">1st slide</a> | <a href="javascript:translideshow1.navigate(1)">2nd slide</a> | <a href="javascript:translideshow1.navigate(2)">3rd slide</a> |<a href="javascript:translideshow1.navigate(3)">4th slide</a>