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

JavaScript
1

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

Hopefully this quick and basic example will help you get it working

<!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>