cannot make the photo album script work

carthago

04-26-2008, 07:16 PM

I like the script on dynamic drive http://www.dynamicdrive.com/dynamicindex4/photoalbum.htm and followed several steps now. Still not made it work and can need any help possible.

1. The external javascript I put in a folder and call it via the coding in the header.
2. I included the coding part in the header as explained in the script

On the page I am using this part of coding:


<div id="container-africa">
<div id="gallery2" style="margin: 0pt 2px 0pt 2px; float: left; display: inline;">
<script language="JavaScript">
function LoadGallery(pictureName,imageFile)
{
if (document.all)
{
document.getElementById(pictureName).style.filter="blendTrans(duration=1)";
document.getElementById(pictureName).filters.blendTrans.Apply();
}
document.getElementById(pictureName).src = imageFile;
if (document.all)
{
document.getElementById(pictureName).filters.blendTrans.Play();
}
document.getElementById(titleCaption).innerHTML=captionText;
}
</script>
<img src="afrika/foto1.jpg" alt="" title="© " id="" height="282" width="400">

<div class="thumbs2">
<a href="#_self" onclick="LoadGallery('','afrika/foto2.jpg')"><img src="afrika/foto2t.jpg" alt="" title="" height="68" width="97"></a>
<a href="#_self" onclick="LoadGallery('','afrika/foto3.jpg')"><img src="afrika/foto3t.jpg" alt="" title="" height="68" width="97"></a>
<a href="#_self" onclick="LoadGallery('',afrika/foto4.jpg')"><img src="afrika/foto4t.jpg" alt="" title="" height="68" width="97"></a>
<a href="#_self" onclick="LoadGallery('','.jpg')"><img src="t.jpg" alt="" title="" height="68" width="97"></a><br>
<a href="#_self" onclick="LoadGallery('','.jpg')"><img src="t.jpg" alt="" title="" height="68" width="97"></a>
<a href="#_self" onclick="LoadGallery('','.jpg')"><img src="t.jpg" alt="" title="" height="68" width="97"></a>
<a href="#_self" onclick="LoadGallery('','.jpg')"><img src="t.jpg" alt="" title="" height="68" width="97"></a>
<a href="#_self" onclick="LoadGallery('','.jpg')"><img src="t.jpg" alt="" title="" height="68" width="97"></a>
</div>
</div></div>


I took it from http://www.stanseatonphotography.co.uk/portraits.php but get lost now.

- the bigger image is loading and on the right place
- the thumbs are also located on the right place

I read a gallery name in the script on photography site. Images are however all in the same folder. Not understand the 'albumname' and if I can give it just a name there.

When click on small image the bigger has to change without loading the page totally again.

my photos are in: albums/africa/photonumber01.jpg
photos for different country will be in the folder albums/othercountry/photonumber01.jpg

Who can help me with this?

thanks already a lot.

gardenwitch

10-12-2009, 02:51 AM

I am trying to have three different images (bugs) randomly appear on a web page when it is open. Each time it will open, a different bug should appear. I am only including three. I'm not sure if I should be using a preloader for such a small file. Can some one help?!! I thought I was doing really great, but I'm getting know where and spending a lot of time. I think the answer to my problem is simple, but I can't get this to work. I am getting a "undefined" error message when I load, can't get pictures to show up. Here is my code:

<script type="text/javascript"> //bug function

var imageBugs = new Array();
bugs[0] = "images/dragonfly3.gif"
bugs[1] = "images/beetle1.gif"
bugs[2] = "images/spider3.gif"
bugs[3] = "images/dragonfly3.gif"

var p=imageBugs.length;
for (var i=0; i<=3; i++) {
imageBugs[i]=""+(i+1)+".gif"
}
var p=imageBugs.length;
var preBuffer = new Array()
for (i=0; i<p; i++) {
preBuffer[i]= new Image()
preBuffer[i].src=imageBugs[i]
}
var whichBug = parseInt(Math.random()*(p)); // select 1 to highest array element
function showBugs(whichBug) {
var imageBugs = "" + whichBug() +".gif"
}
</script>
</head>

<body>

<div id="banner">
<img src="images/banner2.gif" width="100%" align="center" alt="Witch's Garden" />
</div>
<div id="bug">
<script type="text/javascript"> //bug function
//added color hoping this would show up better.
var bg=showBugs(whichBug);
document.write(showBugs(whichBug);

//document.write('<img src="'+imageBugs[whichBug]+'"/>');
</script>
</div>

Philip M

10-12-2009, 07:39 AM

Rather a lot of errors I am afraid.

var imageBugs = new Array();
imageBugs[0] = "images/dragonfly3.gif"
imageBugs[1] = "images/beetle1.gif"
imageBugs[2] = "images/spider3.gif"
imageBugs[3] = "images/dragonfly3.gif" // why two images the same?

var p=imageBugs.length;
for (var i=0; i<=3; i++) {
imageBugs[i]=""+(i+1)+".gif"
}
//This overwrites your image names with 1.gif, 2.gif etc.

var BugToShow = "" + whichBug() +".gif"
// second declaration overwrites first.

... and others

A pre-loader is not necessary here.

As I see it you are simply trying to show a random image. Try this:-

<html>
<head>

<script type = "text/javascript">

function randomizeImage(){
var arr = new Array("dragonfly3.gif","beetle1.gif","spider3.gif"); //you can put as many images as you wish
var x = Math.floor(Math.random()*arr.length);
document.images['myimage'].src=arr[x];
}
</script>
</head>

<body onload="randomizeImage()">
<img name="myimage" src="beetle1.gif"> // or any of your images
</body>
</html>

Not sure why you have hijacked this old thread, but in future please start a new thread for a new topic.

"In the beginner's mind there are many possibilities, but in the expert's mind there are few” - Shunryu Suzuki (Japanese Zen priest, ?-1971)