Trouble with slideshow 1

juvesteve · Jan 22, 2008

I've created a slideshow and I'm having a few problems.
When the page loads up, no image is being shown and I want the first image in the slide show to come up automatically.

Also if you get the last picture and if you keep pressing the 'next' button, it keeps incrementing by 1. So then when you press 'previous' you have to press it a few times.

Code:

<body>

<div id="wrapper">

<div id="header">
	<h1 id="header1">Showroom</h1>

</div>


<div id="content_slideshow">
	<p id="p_title_slideshow">
		Slideshow
	</p>
<div id="slideshow">
	
<p><img id="img1" src="" width="400" height="325"></p>
<input type="button" onClick="javascript:moveToFirstSlide()" value="FIRST">
<input type="button" onClick="javascript:moveToPreviousSlide()" value="PREVIOUS">
<input type="button" onClick="javascript:moveToNextSlide()" value="NEXT">
<input type="button" onClick="javascript:moveToLastSlide()" value="LAST">


<script>
var index=-1;
var titles=[1,2,3,4,6,7,8];

function moveToNextSlide()
{
index = index + 1;
var img = document.getElementById("img1");
var slideName="images/img" + titles[index] + ".jpg";
img.src=slideName;
}


function moveToPreviousSlide()
{
index = index - 1;
var img = document.getElementById("img1");
var slideName="images/img" + titles[index] + ".jpg";
img.src=slideName;
}

function moveToFirstSlide()
{
index = 0;
var img = document.getElementById("img1");
var slideName="images/img" + titles[index] + ".jpg";
img.src=slideName;
}

function moveToLastSlide()
{
index = 6;
var img = document.getElementById("img1");
var slideName="images/img" + titles[index] + ".jpg";
img.src=slideName;
}

</script>
</div>

</div>


<div id="leftSidebar">
<div id="menu">
<ul>
<li><a href="MainMenu.html">Home</a></li>
<li id="active"><a href="assignment_slideshow.html">Slide Show</a></li>
<li><a href="assignment_calculator.html">Calculator</a></li>
<li><a href="dvd.xml">Top DVD's</a></li>
<li><a href="assignment_contact.html">Contact Form</a></li>
<li><a href="assignment_report">My Report</a></li>
</ul>
</div>
</div>

<div id="rightSidebar">

<div id="rightSidebar_advertisement1">
<a href="[URL unfurl="true"]http://www.mvm-films.com/"[/URL] target="_blank">
<img src="images/mvm_logo.jpg"/>
</a>
</div>

<div id="rightSidebar_advertisement2">

<a href="[URL unfurl="true"]http://www.carltondrama.org.uk/"[/URL] target="_blank">
<img src="images/cds_logo.gif"/>
</a>
</div>
</div>

<div id="footer">
</div>
</div>

</body>

I would be grateful if anyone out there could tell me where I'm going wrong.
Thanks

dwarfthrower · Jan 22, 2008

juvesteve said:
When the page loads up, no image is being shown and I want the first image in the slide show to come up automatically.

Code:

<body onload="moveToFirstSlide()">

juvesteve said:
Also if you get the last picture and if you keep pressing the 'next' button, it keeps incrementing by 1. So then when you press 'previous' you have to press it a few times.

And if you got back to the first slide you'd have a similar issue.

You'd be better off using the length of your array to determine the last index and check the boundary conditions:

Code:

function moveToNextSlide()
{
index = index + 1;
[COLOR=red]if(index >= titles.length){
index = index - 1;
}[/color]
var img = document.getElementById("img1");
var slideName="images/img" + titles[index] + ".jpg";
img.src=slideName;
}


function moveToPreviousSlide()
{
index = index - 1;
[COLOR=red]if(index < 0){
index = index + 1;
}[/color]
var img = document.getElementById("img1");
var slideName="images/img" + titles[index] + ".jpg";
img.src=slideName;
}

function moveToLastSlide()
{
[COLOR=red]index = titles.length - 1;[/color]
var img = document.getElementById("img1");
var slideName="images/img" + titles[index] + ".jpg";
img.src=slideName;
}

_{Never be afraid to share your dreams with the world.

There's nothing the world loves more than the taste of really sweet dreams.}
Webflo

juvesteve · Jan 23, 2008

Thanks a lot dwartthrower, that worked a treat.

trollacious · Jan 23, 2008

When I use a slideshow, I make it so after the last slide, the first one is displayed, and previous to the first slide, the last one is displayed. That makes the set of photos appear circular, if you know what I mean.

Code:

var img = document.getElementById("img1");
function moveToNextSlide()
{
index++;
index %= titles.length;

img.src="images/img" + titles[index] + ".jpg";
}

function moveToPreviousSlide()
{
index--;
if(index < 0)
  {
  index = titles.length - 1; 
  }

img.src="images/img" + titles[index] + ".jpg";
}

Also, you don't need to use javascript: in the onclick event handlers.

Lee

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Trouble with slideshow 1

juvesteve

Programmer

dwarfthrower

Programmer

juvesteve

Programmer

trollacious

Programmer

Similar threads

Part and Inventory Search

Sponsor