SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a simple onclick slideshow

    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.

    ://i133.photobucket.com/albums/q75/MacXII/image.jpg
    didnt let me post a picture cause Im new, Im no spammer but ok , good to know xD type in http in the begining and it should work

    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.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You may want to look at some existing image galleries before rolling your own.
    http://mondaybynoon.com/2007/02/19/s...ightbox-redux/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah Ive looked at many free image galleries including lightbox but they all seem so slow and not quite the way I want them. I know it can be done quiet e easily since I dont want any special functions or so. just to preload the pictures and be able to show the next one in line if you click next and the previous one if you click the back arrow, thats pretty much it.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    This article about building your own lightbox should provide plenty of inspiration.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •