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
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Picture Changing Photo Gallery Website.. NEED HELP!

    Im new to this and I need to make a website for my computer science class that includes a photo gallery within a table and there has to be two buttons on top so you can scroll through the pictures.. a next and a back button. here is a link to the assignment http://montcs.bloomu.edu/110/Asns/As...-changer.shtml.. here is our teachers example http://myweb.bloomu.edu/rmontant/pictures-project.. I tried to make my website but i am stuck! heres the code for mine and if anybody could tell me what the hell im doing wrong it would be greatly appreciated.. Thanks in advance

    <html> <head>
    <title>GMC Duramax Photo Gallery</title>
    <style type="text/css">
    p.pretty{
    font-family: "Marker SD" ;
    font-size: 20pt ;
    }

    Img#pix { width:800px;}
    table {border-collapse: collapse;
    border: 8px inset rgb(255,140,0);
    width:800px;
    background: rgb(0,0,128);
    color: rgb(255,255,255); }

    td {border: 1px solid black;
    text-align: center;}

    </style>

    <script type="text/javascript">
    var piclist = [
    "Chevy1.jpg" ,
    "GMC1.jpg" ,
    "Ironhide.jpg" ,
    "Chevy2.jpg" ,
    "Monster.jpg" ,
    "DenaliHD.jpg" ,
    "DenaliHD1.jpg" ,
    "3500HD.jpeg" ,
    ]

    Var i = 0;

    function next() {
    var elt = document.getElementById "Chevy1.jpg", "GMC1.jpg", "Ironhjide.jpg", "Chevy2.jpg"
    el1.src = "images/" + piclist [ i ] ;
    el1.style.width = "800px" ;

    el1 = document.getElementDyId("caption") ;
    el1.innerHTML="number" +i+ ":" piclist[i] ;

    i=i+ 1;/
    if (i>=piclist.length)
    i = 0; }

    function prev() {

    var elt = document.getElementById("pix") ;
    el1.src = "images/" + piclist [ i ] ;
    el1.style.width = "800px" ;

    el1 = document.getElementDyId("caption") ;
    el1.innerHTML="number" -i- ":" piclist[i] ;

    i=i+ 1;/" Comment: This counts UP, to next picture. "/
    if (i>=piclist.length)
    i = 0; }
    </script>
    </head> <body>
    <p class="pretty">
    GMC Trucks
    </p>

    <table>
    <tr><td> <button onclick="prev();"> Backward </button>&nbsp;<button onclick="next();"> Forward</button> </td></tr>
    <tr><td> <img id="chevy1.jpg" src="Chevy1.jpg"> </td></tr>
    <tr><td id="caption"> Lifted Chevy 2500HD</td></tr>
    </table>
    </body> </html>

  • #2
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    This is a javascript question, you'd get better responses in the Javascript forum. Anyway, your code is pretty sloppy all around- document.getElementByID content should be enclosed in parenthesis (Javascript doesn't have to end with semicolons, but it's good to be consistent, so you should put one after all or none of your statements); your if(i>..) statement doesn't have a { starting it; the correct enclosing of comments is /* */. Clean up a little, then post back if you still have problems.
    "Yeah science!"
    Online Science Tools

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    839
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Or, look at the codes used for the Previous/Next image galleries at this site:

    http://www.stunicholls.com/gallery/index.html

    Or, this one:

    http://www.dynamicdrive.com/dynamicindex4/indexb.html

    See how they do theirs and then re-write your code. Validate your pages:

    CSS Validator

    HTML Validator

    Why Validate?: http://validator.w3.org/docs/why.html
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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