homepage Welcome to WebmasterWorld Guest from 54.205.254.108
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / WebmasterWorld / New To Web Development
Forum Library, Charter, Moderators: brotherhood of lan & mack

New To Web Development Forum

    
javascript
New to javascript
Atilla




msg:3617996
 11:41 am on Apr 3, 2008 (gmt 0)

Hi, I admit I new to javascript, but found what I thought was a neat bit of code for a picture gallery. After designing all the pages setting the external javascript files I found it would only show four images, and nothing I seem to be able to do will make it go beyond four.

This is the code

<!-- Paste this code into an external JavaScript file named: nextPrevious.js -->

/* This script and many more are available free online at
The JavaScript Source :: [javascript.internet.com...]
Created by: Solomon, the Sleuth :: [freewebs.com...] */

// List image names without extension
var myImg= new Array(3)
myImg[0]= "pix1";
myImg[1]= "pix2";
myImg[2]= "pix3";
myImg[3]= "pix4";

// Tell browser where to find the image
myImgSrc = "/img";

// Tell browser the type of file
myImgEnd = ".jpg"

var i = 0;

// Create function to load image
function loadImg(){
document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}

// Create link function to switch image backward
function prev(){
if(i<1){
var l = i
} else {
var l = i-=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}

// Create link function to switch image forward
function next(){
if(i>2){
var l = i
} else {
var l = i+=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}

// Load function after page loads
window.onload=loadImg;

<!-- Paste this code into the HEAD section of your HTML document.
You may need to change the path of the file. -->

<script type="text/javascript" src="nextPrevious.js"></script>

<!-- Paste this code into the BODY section of your HTML document -->

<div style="width:400px; height:300px; margin: auto;">
<img name="imgSrc" id="imgSrc">
</div>
<!-- Controller -->
<table width="400" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000000; width:400px; margin: auto;">
<tr>
<td align="center"><a href="#" onClick="prev();"> </a></td>
<td align="center"><a href="#" onClick="next();"> </a></td>
</tr>
</table>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>

If I add an additional image say

myImg[4]= "pix5";

It won't show,

I have tried changing
var myImg= new Array(3) to var myImg= new Array(4)

which is the only thing I can see that mentions any number it has no effect. Now I know it is my lack of knowledge but I'm puzzled.

Being developed on a Mac, Leopard and tested in Safari, Firefox and Opera.

Many thanks

 

piatkow




msg:3618004
 11:55 am on Apr 3, 2008 (gmt 0)

I am no js expert but I would have done exactly the same.

It could be that the old .js file had been cached and you simply weren't executing the changes.

Atilla




msg:3618014
 12:20 pm on Apr 3, 2008 (gmt 0)

Thanks, tried three browsers, cleared all caches etc., no avail.
I will try replacing all the images in case something odd going on there.

daveVk




msg:3618603
 12:05 am on Apr 4, 2008 (gmt 0)

// Create link function to switch image forward
function next(){
if(i>
2){
var l = i
} else {
var l = i+=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}

The red number needs to be 1 less than last index used here

myImg[3]= "pix4";

UG

piatkow




msg:3618884
 9:30 am on Apr 4, 2008 (gmt 0)

Which shows how important it is to comment your code.

Atilla




msg:3620346
 4:02 pm on Apr 6, 2008 (gmt 0)

Thank you all very much, it works now.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / New To Web Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved