Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Cim
    Cim is offline
    New Coder
    Join Date
    Jan 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Please help - need prev and next btns implemented in existing code

    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>
    Last edited by Cim; 01-08-2012 at 10:51 PM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,920
    Thanks
    56
    Thanked 547 Times in 544 Posts
    hello.

    as far as I can tell, you can just add this to your html:
    Code:
    <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.

  • #3
    Cim
    Cim is offline
    New Coder
    Join Date
    Jan 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It works! Thank you!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •