View Full Version : Picture Changing Photo Gallery Website.. NEED HELP!

10-31-2010, 09:08 PM
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">
font-family: "Marker SD" ;
font-size: 20pt ;

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

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


<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; }
</head> <body>
<p class="pretty">
GMC Trucks

<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>
</body> </html>

11-01-2010, 10:31 AM
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.

Major Payne
11-01-2010, 09:35 PM
Or, look at the codes used for the Previous/Next image galleries at this site:


Or, this one:


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

CSS Validator (http://jigsaw.w3.org/css-validator/)

HTML Validator (http://validator.w3.org/#validate_by_uri+with_options)

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