a simple onclick slideshow

Discussion in 'JavaScript' started by G01kur_Kisel, Aug 19, 2008.

0
  1. #1
    Hello Im very new to javascript, Ive had some experience with c++ , java and python but nothing really advanced, just enough to make a small game like hanoid towers or so (scholl stuff), but that was ages ago and Ive forgotten some.

    Im making my webpage for displaying my portfolio and Im in a need of little bit of assistance.
    I have a thumbnail gallery containing 5 images and when you click on either one of these they will enlarge after you have enlarged one image, next arrows will appear beside allowing you to click next or previous. And thats what Im having problem with at the moment. Here is an extraction of what the page looks like in photoshop :p so thats how I wold like it to be. The xhtml part is no problem just how the gallery behaves.

    [​IMG]

    So here is what Ive done and been helped with so far.

    var number = 1;
    var total = 19;
    function show(myID) {
    $(".myclass").style.display = 'none';
    $("#number" + myID).style.display = 'block';
    }

    function next() {
    show((number+=1)%totalt);
    }

    <img class="myclass" id="number01" onclick="show(01);" />
    <img class="myclass" id="number02" onclick="show(02);" />
    <img class="myclass" id="number03" onclick="show(03);" />
    <img class="myclass" id="number04" onclick="show(04);" />
    <img class="myclass" id="number05" onclick="show(05);" />


    So the thought is that I assign each image with a value which is checked in the next function, and each time you click on the next arrow it will send back that value of the picture and which is then displayed on or off. But it doesnt quite work, I would greatly apprciete your time on this if you can.
    Thank you, or if you have a better solution or way to show my gallery like I want it.
     
    G01kur_Kisel, Aug 19, 2008 IP
    dynashox likes this.
  2. cont911

    cont911 Peon

    Messages:
    50
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    try something like this

    <html>
    <script>

    url = new Array();
    url[0] = "http://tbn0.google.com/images?q=tbn:_gnflpjxhoI-7M:http://www.childlife.com/images/accessories/520x320/adjustable-wave-slide.jpg";
    url[1] = "http://tbn0.google.com/images?q=tbn:kjfQRwKnRJ8FSM:http://static.howstuffworks.com/gif/water-slide-5.jpg";
    url[2] = "http://tbn0.google.com/images?q=tbn:7cprflxXlSxOzM:http://static.howstuffworks.com/gif/water-slide-3.jpg";

    var counter = 0;
    function slideme()
    {
    var img = document.getElementById("image");
    counter = (counter + 1) % url.length;
    var newUrl = url[counter];
    img.src = newUrl;
    }
    </script>

    <body>
    <a href="#" onclick="slideme()" >
    <img id="image" src="http://tbn0.google.com/images?q=tbn:_gnflpjxhoI-7M:http://www.childlife.com/images/accessories/520x320/adjustable-wave-slide.jpg" />
    </a>
    </body>

    </html>
     
    cont911, Aug 21, 2008 IP