Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 09-22-2012, 09:59 PM   PM User | #1
ageranger361
New to the CF scene

 
Join Date: Sep 2012
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
ageranger361 is an unknown quantity at this point
Image Scroller Help

Hey all,
I'm trying to create a scrolling image slider and i found the following script, but if anyone knows of a completed script that will be better than this one i'm open to changing to it. I will have 3 images in a css with left and right buttons and I would like the images to scroll to the left or right when the buttons are clicked. Here's what I have now, but its only set up to scroll one image in the function.
Code:
<table border="0" cellpadding="0">

<tr>

<td width="100%">
<img src="images/pic_3.jpg" width="117" height="74" name="photoslider1">
<img src="images/pic_3.jpg" width="117" height="74" name="photoslider2">
<img src="images/pic_3.jpg" width="117" height="74" name="photoslider3">
</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 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]="images/pic_3.jpg"
photos[1]

="images/pic_4.jpg"
photos[2]="images/pic_5.jpg"




function backward()
{
if (which>0){
window.status=''
which--
document.images.photoslider1.src=photos[which]
}
}



function forward(){
if (which<photos.length-1){
which++
document.images.photoslider1.src=photos[which]
}


else window.status='End of gallery'
}
</script>

<input type="button" value="&lt;&lt;Back" name="B2"
      onClick="backward()">
<a href="#" onClick="which=1;backward();return false"><small>Start Over</small></a><input type="button" 

value="Next&gt;&gt;" name="B1"
      onClick="forward()">

</p>

</center>
</div>

</form>

</td>
</tr>

</table>
Any help would be appreciated. Heres a link to the site that will be using this script for an idea of how it will be set up. http://www.bitsofbalance.org
ageranger361 is offline   Reply With Quote
Old 09-23-2012, 03:12 AM   PM User | #2
AndrewGSW
Senior Coder

 
Join Date: Apr 2011
Location: London, England
Posts: 2,120
Thanks: 15
Thanked 354 Times in 353 Posts
AndrewGSW will become famous soon enough
Code:
<div align="center">
<center>
<p>

<script language="JavaScript1.1">
JavaScript 1.1 ?? and the align attribute and center tag have been deprecated for a long time.

Your images won't scroll because you only have three images, and they all fit within their container.

BTW Images don't have a name attribute (maybe they used to years ago..) and I'm not sure why you are embedding everything within a form.

BTWW That code doesn't look like it will work as it's only attempting to change the first image. If you Google I'm sure you will find many examples - try the phrase "javascript image carousel".
__________________
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS

Last edited by AndrewGSW; 09-23-2012 at 03:24 AM..
AndrewGSW is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 06:51 PM.


Advertisement
Log in to turn off these ads.