How To Create A SlideShow Gallery
iWebBuddy.com - Website Design and Web Development Forum :: Web Design and Development :: Tutorials :: Coding Tutorials
Page 1 of 1 • Share •
How To Create A SlideShow Gallery
by Marc on Sun Oct 18, 2009 2:25 pm
Hello once again,
This tutorial will help you create a gallery for pictures, and you can use it for a slideshow,
To add your images, modify the code :
Find :
You can modify those fields, and use them to display your image, or the author's name.
You can also add more of these if your running out of space to use as pictures in the gallery,
Enjoy now,
Note : You can modify this picture that you get if there are no pictures that you are previewing.
Image :
This is just a sample image from my nintendo gaming forum,
This tutorial will help you create a gallery for pictures, and you can use it for a slideshow,
- Code:
<script language="javascript">
<!--start
var x = 0;
function rotate(num){
x=num%document.slideForm.slide.length;
if(x<0){x=document.slideForm.slide.length-1};
document.images.show.src=document.slideForm.slide.options[x].value;
document.slideForm.slide.selectedIndex=x;
}
function apRotate() {
if(document.slideForm.slidebutton.value == "Stop"){
rotate(++x);window.setTimeout("apRotate()", 5000);}
}
//end -->
</script>
<form name="slideForm">
<table cellspacing=1 cellpadding=4 style="border:1px black solid; border-collapse:collapse">
<tr>
<td align=center>
<b>My Gallery</b>
</td>
</tr>
<tr>
<td align=center width=350 height=300>
<img src="http://i85.servimg.com/u/f85/13/15/52/99/no_pic10.gif" name="show">
</td>
</tr>
<tr><td align=center style="border:1px black solid;"><strong>Author :</strong>
<select name="slide" onChange="rotate(this.selectedIndex);">
<option value="URL OF IMAGE HERE" selected>Author's Name
<option value="URL OF IMAGE HERE">Author's Name
<option value="URL OF IMAGE HERE">Author's Name
<option value="URL OF IMAGE HERE">Author's Name
<option value="URL OF IMAGE HERE">Author's Name
<option value="URL OF IMAGE HERE">Author's Name
<option value="URL OF IMAGE HERE">Author's Name
<option value="URL OF IMAGE HERE">Author's Name
</select>
</td>
</tr>
<tr>
<td align=center style="border:1px black solid;">
<input type=button onclick="rotate(0);" value="|<<" title="Jump to beginning" style="border:1px black solid;">
<input type=button onclick="rotate(x-1);" value="<<" title="Last Picture" style="border:1px black solid;">
<input type=button name="slidebutton" onClick="this.value=((this.value=='Stop')?'Start':'Stop');apRotate();" value="SlideShow" title="Autoplay" style="width:75px; border:1px black solid;">
<input type=button onclick="rotate(x+1);" value=">>" title="Next Picture" style="border:1px black solid;">
<input type=button onclick="rotate(this.form.slide.length-1);" value=">>|" title="Jump to end" style="border:1px black solid;">
</td>
</tr>
</table>
</form>
To add your images, modify the code :
Find :
<option value="URL OF IMAGE HERE">Author's Name
You can modify those fields, and use them to display your image, or the author's name.
You can also add more of these if your running out of space to use as pictures in the gallery,
Enjoy now,
Note : You can modify this picture that you get if there are no pictures that you are previewing.
Image :
This is just a sample image from my nintendo gaming forum,
Marc- Administrator
Posts: 1119
iCoins: 2197
Forum Pet:
Permissions of this forum:
You cannot reply to topics in this forum