SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to implement div slider + prev/next buttons + ability to select a specific* div

    Hi guys,

    I'm starting to delve into JavaScript and consequently have a lot to learn. I'm trying to implement a JavaScript or.. JQuery.. content rotator to cycle through different projects in a portfolio.

    I want to be able to click Next or Previous to cycle through the different divs (This part is working fine).

    But I also want to be able to click text links to display specific divs I choose.

    You can see what I'm working on here: http://loft14test.com/loft14design.com/portfolio.html

    Next and Previous works, but when I try clicking the "Wisconsin Natural Acres" or "Abstract Electric" text links to show those respective divs it breaks.

    Any ideas about how I could accomplish this?

    Thank you!

  2. #2
    Non-Member
    Join Date
    Jun 2012
    Posts
    88
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Hopefully this quick and basic example will help you get it working

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #imgCont img {
                    display: none;
                }
                #linksCont a {
                    display: block;
                }
            </style>
            <script type="text/javascript">
                function hideChildElements(elemID){
                    var childElems = document.getElementById(elemID).childNodes;
                    for(var i=0; i<childElems.length; i++){
                        if(childElems[i].nodeType == 1){
                            childElems[i].style.display = 'none';
                        }
                    }
                }
                function swapImage(dirn){
                    curImg += dirn;
                    if(curImg < 0){
                        curImg = imgsO.length-1;
                    } else if(curImg == imgsO.length){
                        curImg = 0;
                    }
                    unhideElement();
                }
                function unhideElement(){
                    hideChildElements('imgCont');
                    imgsO[curImg].style.display = 'block';
                }
                window.onload=function(){
                    curImg = 0;
                    imgsO = document.getElementById('imgCont').getElementsByTagName('img');
                    imgsO[curImg].style.display = 'block';
                    document.getElementById('btnNext').onclick=function(){swapImage(1);}
                    document.getElementById('btnPrev').onclick=function(){swapImage(-1);}
                    var divLinksO = document.getElementById('linksCont').getElementsByTagName('a');
                    for(var i=0; i<divLinksO.length; i++){
                        divLinksO[i].num = i;
                        divLinksO[i].onclick=function(){
                            curImg = this.num;
                            unhideElement();
                            return false;
                        }
                    }
                }
            </script>
        </head>
        <body>
            <div id="imgCont">
                <img src="num1.jpg" alt="" />
                <img src="num2.jpg" alt="" />
                <img src="num3.jpg" alt="" />
                <img src="num4.jpg" alt="" />
                <img src="num5.jpg" alt="" />
            </div>
            <div>
                <button id="btnPrev">Prev</button><button id="btnNext">Next</button>
            </div>
            <div id="linksCont">
                <a href="">Show Image 1</a>
                <a href="">Show Image 2</a>
                <a href="">Show Image 3</a>
                <a href="">Show Image 4</a>
                <a href="">Show Image 5</a>
            </div>
        </body>
    </html>


Bookmarks

Posting Permissions

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