Post by Hernandez on Nov 16, 2014 7:59:16 GMT -8
Hello!
slideshow that allows visitors to flip through a series of images on your website
you can use it with Sidebar Redux and Also with the Headers and Footers
Installition:
Replace (MAIN IMAGE) with the First image URL will shows at every refresh,and Replace (IMAGE URL NUMBER 1) with the FIRST IMAGE URL will shows next the Main Image , and (IMAGE NAME) with the IMAGE name will shows
and retry this for every Image !
Remember: Don't Forget to delet every line empty (without URL) like this
You can Live Preview at my Test forum
Here is the Code:
slideshow that allows visitors to flip through a series of images on your website
you can use it with Sidebar Redux and Also with the Headers and Footers
Installition:
Replace (MAIN IMAGE) with the First image URL will shows at every refresh,and Replace (IMAGE URL NUMBER 1) with the FIRST IMAGE URL will shows next the Main Image , and (IMAGE NAME) with the IMAGE name will shows
and retry this for every Image !
Remember: Don't Forget to delet every line empty (without URL) like this
<option value="IMAGE URL NUMBER *">IMAGE NAME</option>
You can Live Preview at my Test forum
Here is the Code:
<script type="text/javascript">
var x=0;
function rotate(num){
fs=document.ff.slide;
x=num%fs.length;
if(x<0) x=fs.length-1;
document.images.show.src=fs.options[x].value;
fs.selectedIndex=x;}
function auto() {
if(document.ff.fa.value == "Stop"){
rotate(++x);setTimeout("auto()", 5000);}}
</script>
<form name="ff">
<table cellpadding="3" style="border:1px black solid;border-collapse:collapse;">
<tr><th align="center">Day at the beach</th></tr>
<tr><td align="center">
<img src="MAIN IMAGE " name="show">
</td></tr>
<tr><td align="center" style="border:1px black solid;">
<select name="slide" onChange="rotate(this.selectedIndex);">
<option value="IMAGE URL NUMBER 1">IMAGE NAME</option>
<option value="IMAGE URL NUMBER 2">IMAGE NAME</option>
<option value="IMAGE URL NUMBER 3">IMAGE NAME</option>
<option value="IMAGE URL NUMBER 4">IMAGE NAME</option>
<option value="IMAGE URL NUMBER 5">IMAGE NAME</option>
</select>
</td></tr>
<tr><td align="center" style="border:1px black solid;">
<input type="button" onclick="rotate(0);" value="ll<<" title="Jump to beginning" />
<input type="button" onclick="rotate(x-1);" value="<<" title="Last Picture" />
<input type="button" name="fa" onClick="this.value=((this.value=='Stop')?'Start':'Stop');auto();" value="Start" title="Autoplay" style="width:75px;" />
<input type="button" onclick="rotate(x+1);" value=">>" title="Next Picture" />
<input type="button" onclick="rotate(this.form.slide.length-1);" value=">>ll" title="Jump to end" />
</td></tr></table></form>
var x=0;
function rotate(num){
fs=document.ff.slide;
x=num%fs.length;
if(x<0) x=fs.length-1;
document.images.show.src=fs.options[x].value;
fs.selectedIndex=x;}
function auto() {
if(document.ff.fa.value == "Stop"){
rotate(++x);setTimeout("auto()", 5000);}}
</script>
<form name="ff">
<table cellpadding="3" style="border:1px black solid;border-collapse:collapse;">
<tr><th align="center">Day at the beach</th></tr>
<tr><td align="center">
<img src="MAIN IMAGE " name="show">
</td></tr>
<tr><td align="center" style="border:1px black solid;">
<select name="slide" onChange="rotate(this.selectedIndex);">
<option value="IMAGE URL NUMBER 1">IMAGE NAME</option>
<option value="IMAGE URL NUMBER 2">IMAGE NAME</option>
<option value="IMAGE URL NUMBER 3">IMAGE NAME</option>
<option value="IMAGE URL NUMBER 4">IMAGE NAME</option>
<option value="IMAGE URL NUMBER 5">IMAGE NAME</option>
</select>
</td></tr>
<tr><td align="center" style="border:1px black solid;">
<input type="button" onclick="rotate(0);" value="ll<<" title="Jump to beginning" />
<input type="button" onclick="rotate(x-1);" value="<<" title="Last Picture" />
<input type="button" name="fa" onClick="this.value=((this.value=='Stop')?'Start':'Stop');auto();" value="Start" title="Autoplay" style="width:75px;" />
<input type="button" onclick="rotate(x+1);" value=">>" title="Next Picture" />
<input type="button" onclick="rotate(this.form.slide.length-1);" value=">>ll" title="Jump to end" />
</td></tr></table></form>