473,386 Members | 1,798 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

Image Scrolling Problem

I have created some simple code to allow me to flip through thumbnail
images via "Previous" and "Next" links. The idea is that I can have
multiple sets of images that can be scrolled through, via
document.images[<n>].src.

However, the problem is, once the "last" image is reached, the code
refuses to go back to the "first" image.

Help is appreciated.

<title>Test Page</title>
</head>

<script language="javascript">
<!--
var imagearray1 = new Array("./image1.gif","./image2.gif");
var lastelement1 = imagearray1.length - 1;
var currentelement1 = 0;
function showpicture(imageindex, imagearray, current)
{
document.images[imageindex].src=imagearray[current];
}

function nextpicture(imageindex, imagearray, current, last)
{
current += 1;

if (current>last)
{
current = 0;
}

showpicture(imageindex, imagearray, current);
}

function prevpicture(imageindex, imagearray, current, last)
{

current -= 1;

if (current < 0)
{
current = last;
}

showpicture(imageindex, imagearray, current);

}
-->
</script>

<body>
<img src="image1.gif"><br>
<a href="javascript:prevpicture(0, imagearray1, currentelement1,
lastelement1)">Previous</a><br>
<a href="javascript:nextpicture(0, imagearray1, currentelement1,
lastelement1)">Next</a><br>

</body>
Jul 20 '05 #1
1 1245
On 29 Jan 2004 07:09:31 -0800, Jason Ferguson
<fe***********@sbcglobal.net> wrote:
I have created some simple code to allow me to flip through thumbnail
images via "Previous" and "Next" links. The idea is that I can have
multiple sets of images that can be scrolled through, via
document.images[<n>].src.

However, the problem is, once the "last" image is reached, the code
refuses to go back to the "first" image.
If you tried to test the script as it is with more than two images, you
would find bigger issues than not being able to wrap between the first and
last images.

Declaration:
var currentelement1 = 0;

Definition:
function nextpicture(imageindex, imagearray, current, last) {
current += 1;
if (current>last) {
current = 0;
}
showpicture(imageindex, imagearray, current);
}

Call:
nextpicture(0, imagearray1, currentelement1, lastelement1)

When called, nextpicture is passed 0 for the third argument (current in
the function). This value is modified in the function, but currentelement1
will still remain 0; the variable is not passed by reference. The simple
solution here is to use the global variable directly.

As for the non-functional wrapping, you're forgetting how arrays are
indexed: 0 to n-1. You are treating them as 0 to n. The fix here is:

if( current == last ) current = 0;

and

if( 0 > current ) current = last - 1;

for nextpicture and prevpicture, respectively.
<a href="javascript:prevpicture(0, imagearray1, currentelement1,
lastelement1)">Previous</a><br>
<a href="javascript:nextpicture(0, imagearray1, currentelement1,
lastelement1)">Next</a>


Finally, change the above links to use the onclick attribute instead of
the JavaScript pseudo-protocol in the href attribute. This doesn't have
any direct bearing on the problem, but it is a bad habit (for the most
part), and should be avoided. It is covered in the group FAQ:

http://jibbering.com/faq/#FAQ4_24

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
Jul 20 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: delong | last post by:
Hi I am trying to display a large image on the form and make the form scrollable. My image is about 4200 x 7000 pixel. private void Form1_Paint(object sender,...
1
by: Vangelis Natsios | last post by:
I want to create a page with a scrolling image that will cause different messages to appear on another part of the page (say, another <div>) as the image will scroll. Imagine something like this: ...
12
by: Major Man | last post by:
Hi, I have this .jpg picture that's 700 x 200. What I wanna do is display it on a 300 x 200 window, and have it scroll left and right, back and forth. Can anyone help this newbie? TIA
12
by: Sharon | last post by:
I’m wrote a small DLL that used the FreeImage.DLL (that can be found at http://www.codeproject.com/bitmap/graphicsuite.asp). I also wrote a small console application in C++ (unmanaged) that uses...
2
by: Sam | last post by:
Hope someone can help... I have an image on the page which i have made scrollable with the following code: <div id="Layer1" style="LEFT: 8px; TOP: 368px; height: 180px; width:780px; ...
3
by: Andy Baxter | last post by:
I have an image scrolling in a viewport for a panoramic image viewer. The viewport can be resized to several set resolutions so people can adjust the size according to their bandwidth. There are...
4
by: tshad | last post by:
I am trying to set up an Image authorization where you type in the value that is in a picture to log on to our site. I found a program that is supposed to do it, but it doesn't seem to work. ...
8
by: Warren Post | last post by:
At <http://snow.prohosting.com/srcopan/dry/test.es.html>, you will see that the background image runs down the left margin. The right hand side of it is faded, watermark style, but it is one single...
2
by: bradyounie | last post by:
I'm trying to use a Form's BackgroundImage to display the base image that I'm placing controls on top of. To make the form scroll to the bounds of the image, I set the AutoScrollMinSize. This works...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.