Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Next/Previous image javascript

Featured Replies

Hi everyone,

 

I downloaded a piece of "next/previous" javascript code to allow me to go through images using a previous and next function but I can't get it to work. I think it may have something to do with the image path but seeing as I've tried every combination of path I can think of, (website/images, ../images, .../images, ..images, ...images etc) I'm at a loss as to what to do next as it simply won't preview the images!

 

Is there something wrong in the code???

 

The javascript code is as follows:

 

// List image names without extension

var myImg= new Array(3)

myImg[0]= "games_icon_blackjack_at_city";

myImg[1]= "games_icon_blackjack_eur";

myImg[2]= "games_icon_blackjack_singledeck";

myImg[3]= "games_icon_blackjack_vegas_strip";

 

// Tell browser where to find the image

myImgSrc = "/images";

 

// Tell browser the type of file

myImgEnd = ".jpg"

 

var i = 0;

 

// Create function to load image

function loadImg(){

document.imgSrc.src = myImgSrc + myImg + 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;

 

<---END CODE--->

 

The images folder is simply set to "images" as everything is in the root. The javascript is in the "Scripts" folder so I don't know what's going on?!!

 

I've been trying to solve this for a good couple of days now and if there's anyone out there who can shed some light on how to get it to work, I shall be immensely grateful!

 

Thanks,

 

Harry

  • Author

Are you getting script errors? If not and the problem is the image src it could be

 

myImgSrc = "/images";

 

should be

 

myImgSrc = "/images/";

 

No sorry, that still doesn't work.Iw onder if there is somethign wrong with the actual code as I've tried everything else. Even the example code doesn't want to work unless I'm doing something drastically wrong.

Are you getting scripting errors?

 

I'd personaly take a different approach. I'd name all the image files the same but with a different number at the end, e/g image_01.jpg, image_02.jpg etc. then have the JS change the image src by varying adding or taking away 1 from the image src. This does make it a pain to change the slide order, which may be why you're using an array in the first place, but if you're not bothered on the order, this is a slightly simpler way.

 

There are loads of free to use Javascript slideshows, I'd try one of these, unless you're doing this to build your own knowlege, fair play if you are.

  • Author

Are you getting scripting errors?

 

I'd personaly take a different approach. I'd name all the image files the same but with a different number at the end, e/g image_01.jpg, image_02.jpg etc. then have the JS change the image src by varying adding or taking away 1 from the image src. This does make it a pain to change the slide order, which may be why you're using an array in the first place, but if you're not bothered on the order, this is a slightly simpler way.

 

There are loads of free to use Javascript slideshows, I'd try one of these, unless you're doing this to build your own knowlege, fair play if you are.

 

This was something that I downloaded off the internet so I would assume that it should work regardless but not sure why. I'm not greatly advanced in javascript!

  • Author

I've just found something wrong within the IE debugging tool:

 

<td><div align="left"><a href="#" onClick="next();"> <img src="images/arrow_next_1.png" alt="Next Arrow" width="30" height="30" border="0" /> </a></div></td>

 

<td><div align="left"><a href="#" onClick="prev();"> <img src="images/arrow_next_1.png" alt="Next Arrow" width="30" height="30" border="0" /> </a></div></td>

 

Keep saying "object expected".

  • Author

I've got it working. There was a tiny bit of code that was missing in the javascript. Thanks for your help though!

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.