...

View Full Version : Please help - need prev and next btns implemented in existing code



Cim
01-08-2012, 10:49 PM
Hey,

I need help. I have my HTML/CSS/Javascript slideshow working fine, the images fades in and out nicely. Now I realized I'd like to implement next and prev buttons, but I don't know how to code this and what to refer to in the existing code. Please help? I have ten thumbnails total. Here's the Javascript:

<script type="text/javascript">

slidePrefix = "slide-";
slideControlPrefix = "slide-control-";
slideHighlightClass = "highlight";
slidesContainerID = "slides";
slidesControlsID = "slides-controls";
slideDelay = 3000;
slideAnimationInterval = 30;
slideTransitionSteps = 10;

function setUpSlideShow()
{
// collect the slides and the controls
slidesCollection = document.getElementById(slidesContainerID).children;
slidesControllersCollection = document.getElementById(slidesControlsID).children;

totalSlides = slidesCollection.length;

if (totalSlides < 10) return;

//go through all slides
for (var i=0; i < slidesCollection.length; i++)
{
// give IDs to slides and controls
slidesCollection[i].id = slidePrefix+(i+1);
slidesControllersCollection[i].id = slideControlPrefix+(i+1);

// attach onclick handlers to controls, highlight the first control
slidesControllersCollection[i].onclick = function(){clickSlide(this);};

//hide all slides except the first
if (i > 0)
slidesCollection[i].style.display = "none";
else
slidesControllersCollection[i].className = slideHighlightClass;
}

// initialize vars
slideTransStep= 0;
transTimeout = 0;
crtSlideIndex = 1;

// show the next slide
showSlide(2);
}

function showSlide(slideNo, immediate)
{
// don't do any action while a transition is in progress
if (slideTransStep != 0 || slideNo == crtSlideIndex)
return;

clearTimeout(transTimeout);

// get references to the current slide and to the one to be shown next
nextSlideIndex = slideNo;
crtSlide = document.getElementById(slidePrefix + crtSlideIndex);
nextSlide = document.getElementById(slidePrefix + nextSlideIndex);
slideTransStep = 0;

// start the transition now upon request or after a delay (default)
if (immediate == true)
transSlide();
else
transTimeout = setTimeout("transSlide()", slideDelay);
}

function clickSlide(control)
{
showSlide(Number(control.id.substr(control.id.lastIndexOf("-")+1)),true);
}



function transSlide()
{
// make sure the next slide is visible (albeit transparent)
nextSlide.style.display = "block";

// calculate opacity
var opacity = slideTransStep / slideTransitionSteps;

// fade out the current slide
crtSlide.style.opacity = "" + (1 - opacity);
crtSlide.style.filter = "alpha(opacity=" + (100 - opacity*100) + ")";

// fade in the next slide
nextSlide.style.opacity = "" + opacity;
nextSlide.style.filter = "alpha(opacity=" + (opacity*100) + ")";

// if not completed, do this step again after a short delay
if (++slideTransStep <= slideTransitionSteps)
transTimeout = setTimeout("transSlide()", slideAnimationInterval);
else
{
// complete
crtSlide.style.display = "none";
transComplete();
}
}

function transComplete()
{
slideTransStep = 0;
crtSlideIndex = nextSlideIndex;

// for IE filters, removing filters reenables cleartype
if (nextSlide.style.removeAttribute)
nextSlide.style.removeAttribute("filter");

// show next slide
showSlide((crtSlideIndex >= totalSlides) ? 1 : crtSlideIndex + 1);

//unhighlight all controls
for (var i=0; i < slidesControllersCollection.length; i++)
slidesControllersCollection[i].className = "";

// highlight the control for the next slide
document.getElementById("slide-control-" + crtSlideIndex).className = slideHighlightClass;
}


</script>


And here's the HTML:

<body onload="setUpSlideShow()">

<div id="slideshow">

<div id="slides">

<div class="slide"><img src="images/image1.jpg" width="1020" height="500"/>Slide content 1</div>

<div class="slide"><img src="images/image2.jpg" width="1020" height="500"/>Slide content 2</div>

<div class="slide"><img src="images/image3.jpg" width="1020" height="500"/>Slide content 3</div>

<div class="slide"><img src="images/image4.jpg" width="1020" height="500"/>Slide content 4</div>

<div class="slide"><img src="images/image5.jpg" width="1020" height="500"/>Slide content 5</div>

<div class="slide"><img src="images/image6.jpg" width="1020" height="500"/>Slide content 6</div>

<div class="slide"><img src="images/image7.jpg" width="1020" height="500"/>Slide content 7</div>

<div class="slide"><img src="images/image8.jpg" width="1020" height="500"/>Slide content 8</div>

<div class="slide"><img src="images/image9.jpg" width="1020" height="500"/>Slide content 9</div>

<div class="slide"><img src="images/image10.jpg" width="1020" height="500"/>Slide content 10</div>

</div>


<div id="slides-controls">

<a href="#">1</a>

<a href="#">2</a>

<a href="#">3</a>

<a href="#">4</a>

<a href="#">5</a>

<a href="#">6</a>

<a href="#">7</a>

<a href="#">8</a>

<a href="#">9</a>

<a href="#">10</a>


</div>

</div>

xelawho
01-09-2012, 04:07 AM
hello.

as far as I can tell, you can just add this to your html:


<input type="button" value="-" onclick="showSlide(crtSlideIndex-1, true)";>
<input type="button" value="+" onclick="showSlide(crtSlideIndex+1, true)";>


but I didn't fully test it - let us know if it works.

Cim
01-09-2012, 06:25 PM
It works! Thank you!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum