PDA

View Full Version : image scrollers


canadian_legend
09-07-2002, 01:31 AM
k, I would like to know how to do something like what this site has: http://www.crazynews.net/dp/2-37.htm

you click an arrow and it loads the next image on a list.

can anyone help?

ACJavascript
09-07-2002, 04:07 AM
Hows this:D?

http://www.wsabstract.com/script/script2/pslide.shtml

canadian_legend
09-08-2002, 12:35 PM
that's almost perfect. I just want to know one thing, what happens if not all the images are the same size?

will it distort the image to fit the predetermined size? or will it change to the pic's real size?

canadian_legend
09-08-2002, 12:38 PM
oh, and one more thing, is there a way to have written blurbs/description/punchline about each pic underneath?

ACJavascript
09-08-2002, 04:22 PM
Like this:D?

____________

<table border="0" cellpadding="0">
<caption><strong>Air Show Photos</strong></caption>
<tr>
<td width="100%">
<BR>
<div id="text"><b>Pane 1</div><BR><img src="plane1.gif" width="300" height="240" name="photoslider"></td>
</tr>
<tr>
<td width="100%"><form method="POST" name="rotater">
<div align="center"><center><p><script language="JavaScript1.1">
var photos=new Array()
var m=0
var msg=new Array()
var which=0

/*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/
photos[0]="plane1.gif"
photos[1]="plane2.gif"
photos[2]="plane3.gif"
photos[3]="plane4.gif"
photos[4]="plane5.gif"

/*Change the below variables to reference your own messages. You may have as many messages in the slider as you wish*/
msg[0]="plane1"
msg[1]="plane2"
msg[2]="plane3"
msg[3]="plane4"
msg[4]="plane5"



function backward(){
if (which>0 && m>0){
window.status=''
which--
m--
document.images.photoslider.src=photos[which]
document.all.text.innerHTML="<b>"+msg[m]+"</b>"
}
}

function forward(){
if (which<photos.length-1 && m<msg.length-1){
which++
m++
document.images.photoslider.src=photos[which]
document.all.text.innerHTML="<b>"+msg[m]+"</b>"
}
else window.status='End of gallery'
}
</script><input type="button" value="&lt;&lt;Back" name="B2"
onClick="backward()"> <input type="button" value="Next&gt;&gt;" name="B1"
onClick="forward()"><br>
<a href="#" onClick="which=1;backward();return false"><small>Start Over</small></a></p>
</center></div>
</form>
</td>
</tr>
</table>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>


________________


Hope this works for ya :D:D

canadian_legend
09-08-2002, 09:53 PM
hum, I wish I could say that it did help me, but I can't. The scroller works good, but I can't get the words to appear, I got the first one to appear, but then it never changed. Then I tried editing stuff myself, didn't help.

So here's the page I have it on:
http://randominsanity.reallyrules.com/images.html

hopefully you can look at it's source code and figure out how to fix it. That is if you want to spend the time to do so.

Thanks in advance to everyone!