Photoalbum

[Daphne90]

1) Script Title: Photo Album script v2.0

2) Script URL (on DD):http://www.dynamicdrive.com/dynamici...photoalbum.htm

3) Describe problem: I have changed the settings to suit my requirements. However, the script is not working. There have been no changes to the page. I'm not sure what I have done wrong. Here's a link to the page.

http://www.oxfordacs.com/gallery2.html

Thanks,

Daphne

[jscheuer1]

There is no Photo Album script on or associated with that page.

[Daphne90]

Hi,

I apologise for the link not having the javascript. I have been having problems with my server.

The link now has the photoalbum script associated with the page.

Daphne

[jscheuer1]

The main script is not associated with the page. Follow the instructions in Step 1 on the demo page, including downloading the script and placing it in the same folder as your page.

Also, there are several typos and/or mistakes in your initialization code:

	<script type="text/javascript">

//Define your own array to hold the photo album images
//Syntax: ["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]

var events="Images/photos/Christmas Dinner"
christmasdinner[0]=["picture 343.jpg", Timi Naomi Cherish, "photo1-large.jpg"]
christmasdinner[1]=["picture 344.jpg", "Daniel", ""]
christmasdinner[2]=["picture 345.jpg", "Cherish", "photo3-large.jpg"]
christmasdinner[3]=["picture 346.jpg", "Cherish and Daphne", ""]
christmasdinner[4]=["picture 347.jpg", "", "", ""]
christmasdinner[5]=["picture 348.jpg", "", ""]
christmasdinner[6]=["picture 349.jpg", "", ""]

//initiate a photo gallery
//Syntax: new photogallery(imagearray, cols, rows, tablewidth, tableheight, opt_[paginatetext_prefix, paginatetext_linkprefix])
var events=new photogallery(christmasdinner, 5, 3, '700px', '600px', [Browse gallery:', 'Page']))

//OPTIONAL: Run custom code when an image is clicked on, via "onselectphoto"
//DELETE everything below to disable
//Syntax: function(img, link){}, whereby img points to the image object of the image, and link, its link object, if defined
events.onselectphoto=function(img, link){
if (link!=null) //if this image is hyperlinked
window.open(link.href, "", "width=800, height=600, status=1, resizable=1")
return true //cancel default action when clicking on image, by returning false instead of true
}

</script>

It should be:

	<script type="text/javascript">

//Define your own array to hold the photo album images
//Syntax: ["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]

var event="Images/photos/Christmas Dinner"
var christmasdinner = []
christmasdinner[0]=["picture 343.jpg", "Timi Naomi Cherish", "photo1-large.jpg"]
christmasdinner[1]=["picture 344.jpg", "Daniel", ""]
christmasdinner[2]=["picture 345.jpg", "Cherish", "photo3-large.jpg"]
christmasdinner[3]=["picture 346.jpg", "Cherish and Daphne", ""]
christmasdinner[4]=["picture 347.jpg", "", "", ""]
christmasdinner[5]=["picture 348.jpg", "", ""]
christmasdinner[6]=["picture 349.jpg", "", ""]

//initiate a photo gallery
//Syntax: new photogallery(imagearray, cols, rows, tablewidth, tableheight, opt_[paginatetext_prefix, paginatetext_linkprefix])
var events=new photogallery(christmasdinner, 5, 3, '700px', '600px', ['Browse gallery:', 'Page'])

//OPTIONAL: Run custom code when an image is clicked on, via "onselectphoto"
//DELETE everything below to disable
//Syntax: function(img, link){}, whereby img points to the image object of the image, and link, its link object, if defined
events.onselectphoto=function(img, link){
if (link!=null) //if this image is hyperlinked
window.open(link.href, "", "width=800, height=600, status=1, resizable=1")
return false //cancel default action when clicking on image, by returning false instead of true
}

</script>

Once all that is fixed, the images are not on the server in the locations indicated in the code, fix that.

There could also be other problems.

[Daphne90]

Hi,

I've made the changes you suggested below but the script is still not showing on the page. Do you know what else could be wrong?

[jscheuer1]

Here, in your source code:

<!--[if IE]>
<style type="text/css"> /* place css fixes for all versions of IE in this conditional comment */
.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style><script type="text/javascript" src="photogallery.js">

/***********************************************
* Photo Gallery Script v2.0- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type="text/css">

.photogallery{ /*CSS for TABLE containing a photo album*/
}

.photogallery img{ /*CSS for images within an album*/
border: 1px solid purple;
}

.photonavlinks{ /*CSS for pagination DIV*/
font: bold 14px calibri;
}

.photonavlinks a{ /*CSS for each navigational link*/
margin-right: 2px;
margin-bottom: 3px;
padding: 1px 5px;
border:1px solid gray;
text-decoration: none;
background-color: white;
}

.photonavlinks a.current{ /*CSS for currently selected navigational link*/
background-color: yellow;
}
</style>

<![endif]-->

You've placed the code of Step 1 inside the conditional comments for IE of another script you have on your page. This is limiting the script to IE only. It should be:

<!--[if IE]>
<style type="text/css"> /* place css fixes for all versions of IE in this conditional comment */
.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style><![endif]--><script type="text/javascript" src="photogallery.js">

/***********************************************
* Photo Gallery Script v2.0- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type="text/css">

.photogallery{ /*CSS for TABLE containing a photo album*/
}

.photogallery img{ /*CSS for images within an album*/
border: 1px solid purple;
}

.photonavlinks{ /*CSS for pagination DIV*/
font: bold 14px calibri;
}

.photonavlinks a{ /*CSS for each navigational link*/
margin-right: 2px;
margin-bottom: 3px;
padding: 1px 5px;
border:1px solid gray;
text-decoration: none;
background-color: white;
}

.photonavlinks a.current{ /*CSS for currently selected navigational link*/
background-color: yellow;
}
</style>

Once that's taken care of, you should be fine, except the images are still not on the server. For example:

http://www.oxfordacs.com/picture%20343.jpg

Which is pointed to by this (highlighted):

	<script type="text/javascript">

//Define your own array to hold the photo album images
//Syntax: ["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]

var event="Images/photos/Christmas Dinner"
var christmasdinner = []
christmasdinner[0]=["picture 343.jpg", "Timi Naomi Cherish", "photo1-large.jpg"]
christmasdinner[1]=["picture 344.jpg", "Daniel", ""]
christmasdinner[2]=["picture 345.jpg", "Cherish", "photo3-large.jpg"]
christmasdinner[3]=["picture 346 . . .

in your source code is a 404 not found. This could be because the image simply isn't on the server. Or, if it is, it's in a different spot. Or, if it is in that location, the upper and lower case letters in it's filename don't agree with those in the script code. Upper and lower case almost always matter on the web, and almost never on the local machine.