Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.slideshow {
position:relative;left:25px;top:10px;width:200px;height:150px;border:solid #FF3333 1px;
}
.img {
width:100%;height:100%;
}
.div {
text-Align:center;background-Color:#FFCC66;
}
.panel {
left:0px;width:100%;height:30px;background-Color:#FFFFCC;
}
.paginate {
position:relative;z-Index:10;left:0px;top:10px;width:300px;height:150px;
}
.item {
position:relative;width:100px;height:20px;background-Color:#FFFFCC;
}
.text {
position:absolute;left:50px;top:0px;font-Size:12px;
}
.default {
position:absolute;left:0px;top:0px;width:15px;height:15px;background-Color:#FFFFCC;border:solid #FF3300 1px;
cursor:pointer;text-Align:center;font-Size:12px;
}
.mseover {
background-Color:#FFCC66;
}
.active {
background-Color:#FFCC66;
}
/*]]>*/
</style>
<script src="http://www.vicsjavascripts.org.uk/Animate/Animate.js" type="text/javascript"></script>
<script src="http://www.vicsjavascripts.org.uk/OneStopSlideShow/OneStopSlideShow.js" type="text/javascript"></script>
</head>
<body>
<div class="demo" >
<div id="tst1" class="slideshow">
<img class="img" alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
<div class="panel" ><a href="#">Panel 1</a></div>
<img class="img" alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
<div class="panel" style="background-Color:red;">Panel 2</div>
<img class="img" alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
<div class="panel" style="background-Color:green;" >Panel 3</div>
<img class="img" alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" />
<div class="panel" style="background-Color:green;" >Panel 4</div>
</div>
<div id="Page1" class="paginate" >
<div class="item" >
<div class="default" ></div><div class="text" >Egypt 5</div>
</div>
<div class="item" >
<div class="default" ></div><div class="text" >Egypt 6</div>
</div>
<div class="item" >
<div class="default" ></div><div class="text" >Egypt 7</div>
</div>
<div class="item" >
<div class="default" ></div><div class="text" >Egypt 8</div>
</div>
</div>
<div class="buttons" >
<input type="button" name="" value="Next" onclick="S1.Next(1);" />
<input type="button" name="" value="Prev" onclick="S1.Next(-1);" />
<input type="button" name="" value="Auto" onclick="S1.Auto();"/>
<input type="button" name="" value="Pause" onclick="S1.Pause();"/>
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
S1=new zxcOneStopSlideShow({
ID:'tst1', // the unique ID name of the images parent node. (string)
FramesClassName:'img', // the common class name of the 'fade' frames. (string)
Mode:100, //(optional) mode of effect execution(see **** Modes of Execution. (digits, default = 0('opacity'))
Duration:1000, //(optional) the duration of the fade effect in milliseconds. (digits, default = 1000)
AutoHold:2000, //(optional) the hold duration of automatic changing of images. (digits, default = Duration*2)
AutoDirection:1, //(optional) 1 = rotate forward, -1 = rotate back. (digits, default = 1)
AutoStart:true, //(optional) true = the images will start auto rotation. (boolean, default = true)
Days:0, //(optional) the persistance in days to remember the last frame on initialisation. (digits, default = no persistance)
SlidePanels:{ //(optional) an object defining slide in panels options. (object, default = no slide in panels)
Mode:'bottom', // mode of effect execution, 'left', 'right' 'top', 'bottom'. (string)
ClassName:'panel', // the common class name of the 'panel' elements. (string)
SlideIn:'onchange', // the event type to slide the panel in, 'mouseover', 'mouseout' or 'onchange'. (string)
SlideOut:'mouseout', // the event type to slide the panel out, 'mouseover', 'mouseout'. (string)
Duration:1000, //(optional) the duration of the fade effect in milliseconds. (digits, default = 1000)
FadeIn:50 //(optional) true = fade in the panel. (boolean, default = no fade in)
},
Paginate:{ //(optional) an object defining pagination options. (object, default = no pagination)
ID:'Page1', // the unique ID name of the parent node containing the paginate elements. (string)
DefaultClassName:'default', // the default class name of the paginate elements. (string)
MouseOverClassName:'mseover', //(optional) the mouseover modifier class name of the paginate elements. (string, default = mouseover class name)
ActiveClassName:'active', //(optional) the 'active' modifier class name of the paginate elements. (string, default = active class name)
GoToEvent:'mouseup', //(optional) the event type to goto the associated image. (string, default = no goto)
HTML:['1','2','3','4'] //(optional) innerHTML of each page element. (array, default = no or existing HTML)
},
AddEvents:[ //(optional) an array of arrays defining the events to be added. (array)
// where each field is an array:
// field 0 = the unique ID name of the element. (string)
// field 1 = the function name. (string)
// field 2 = the event type. (string)
// field 3 = the parameter to pass to the function. (see Script Functions)
['tst1','Auto','mouseout'],
['tst1','Pause','mouseover']
]
});
/*]]>*/
</script></body>
</html>
the full application notes can be found at
need similar to "Featured Content Slider" but want navigation to be vertical
Reply With Quote
Bookmarks