frog.js image gallery problem

I'm making a site with the script frog.js, used to load gallery images, the images loads but sometimes the thumbnails disappear, and i have to go back and that go on again to make the thumb appear. The example is here: gallery
and the code has been taken here: frog.js
Please help me..

That's what the loading animation image (right click and save it to get your own copy):

http://www.dynamicdrive.com/dynamici...es/loading.gif

is for. If you configure it in your script here:

Code:

---

//-------------------------------------------------------------
//  FrogJS v.1.1
//  Created by Eric Puidokas (www.puidokas.com)
//
//  Licensed under the Creative Commons Attribution 2.5 License
//  (http://creativecommons.org/licenses/by/2.5/)
//-------------------------------------------------------------

// CONFIGURATION VARIABLES
var thumbTop = '10px'; // distance you want you thumbnails to be from the top of their container
var loadingAni = 'http://www.puidokas.com/wp-content/uploads/2007/08/loading.gif'; // image displayed when preloading images
var scalePercent = '200'; // percent thumbnails expand when fading into main image

// GLOBALS
var imageArray = new Array;

// Extensions to the Element class from prototype.js
Object.extend(Element, {
        removeDimensions: function(element){
                  element . . .

---

Then when the thumbnail isn't ready yet, it will display the loading image. For more on this script on DD, see:

http://www.dynamicdrive.com/dynamici...ogjs/index.htm

I know jscheuer1, thanks for reply but that's not the problem ..i yet made that modification to the code and the result it's the same, i see the preload icon, but sometimes the thumbs don't appears and i can't continue: i have to go back to 1 photo and than go ahead to make the thumb appear.
I really can't understand where my problem start.
The first piece of code of the script frog.js it's this:

//-------------------------------------------------------------
// FrogJS v.1.1
// Created by Eric Puidokas (www.puidokas.com)
//
// Licensed under the Creative Commons Attribution 2.5 License
// (http://creativecommons.org/licenses/by/2.5/)
//-------------------------------------------------------------

// CONFIGURATION VARIABLES
var thumbTop = '60px'; // distance you want you thumbnails to be from the top of their container
var loadingAni = 'images/loading.gif'; // image displayed when preloading images
var scalePercent = '300'; // percent thumbnails expand when fading into main image

// GLOBALS
var imageArray = new Array;

// Extensions to the Element class from prototype.js
Object.extend(Element, {
removeDimensions: function(element){
element = $(element);
element.style.width = '50';
element.style.height = '';
},
removeOnclick: function(element){
element = $(element);
element.onclick = function(){}
},
setCursor: function(element, cursor){
element = $(element);
element.style.cursor = cursor;
}
});

// Frog Class
var Frog = Class.create();
Frog.prototype = {

// initialize()
// Constructor runs once the page has been loaded. It extracts any linked images within an element with id 'FrogJS' and builds the array for the FrogJS Gallery
// It then empties the 'FrogJS' element and inserts the neccessary DOM elements to run a FrogJS gallery. Lastly, it calls the functions to load the first image and thumbnail.
initialize: function(){

if(!document.getElementsByTagName){ return; }

// Builds imageArray of all images, thumbnails, credits, and captions
var anchors = $('FrogJS').getElementsByTagName('a');
for (var i=0; i<anchors.length; i++){
imageArray[i] = new Array();
imageArray[i]['full'] = anchors[i].getAttribute('href');
imageArray[i]['credit'] = anchors[i].getAttribute('title');
imageArray[i]['thumb'] = anchors[i].getElementsByTagName('img')[0].getAttribute('src');
imageArray[i]['caption'] = anchors[i].getElementsByTagName('img')[0].getAttribute('alt');
imageArray[i]['link'] = anchors[i].getAttribute('rel');
}

//-----------------------------------------
// Inserting new HTML elements into 'FrogJS' Element
//-----------------------------------------
var ribbit = $('FrogJS');
ribbit.innerHTML = '';
ribbit.style.position = 'relative';
ribbit.style.display = 'block';
ribbit.style.textAlign = 'center';

var mainContainer = document.createElement("div");
mainContainer.setAttribute('id','FrogJSMainContainer');
mainContainer.style.margin = '0 auto';
ribbit.appendChild(mainContainer);

var mainImage = document.createElement("img");
mainImage.setAttribute('id','FrogJSImage');
mainImage.style.display = 'none';
mainContainer.appendChild(mainImage);

var credit = document.createElement("div");
credit.setAttribute('id','FrogJSCredit');
mainContainer.appendChild(credit);

var caption = document.createElement("div");
caption.setAttribute('id','FrogJSCaption');
mainContainer.appendChild(caption);

var loadingImg = document.createElement("img");
loadingImg.setAttribute('id','FrogJSLoadingAni');
loadingImg.src = loadingAni;
loadingImg.style.display = 'none';
loadingImg.style.position = 'absolute';
loadingImg.style.top = thumbTop;
ribbit.appendChild(loadingImg);

var rThumb1 = document.createElement("img");
rThumb1.setAttribute('id','FrogJSrightThumb1');
rThumb1.style.display = 'none';
rThumb1.style.position = 'absolute';
rThumb1.style.top = thumbTop;
rThumb1.style.right = '0';
rThumb1.style.cursor = 'pointer';
ribbit.appendChild(rThumb1);

var lThumb1 = document.createElement("img");
lThumb1.setAttribute('id','FrogJSleftThumb1');
lThumb1.style.display = 'none';
lThumb1.style.position = 'absolute';
lThumb1.style.top = thumbTop;
lThumb1.style.left = '0';
lThumb1.style.cursor = 'pointer';
ribbit.appendChild(lThumb1);

var rThumb2 = document.createElement("img");
rThumb2.setAttribute('id','FrogJSrightThumb2');
rThumb2.style.display = 'none';
rThumb2.style.position = 'absolute';
rThumb2.style.top = thumbTop;
rThumb2.style.right = '0';
ribbit.appendChild(rThumb2);

var lThumb2 = document.createElement("img");
lThumb2.setAttribute('id','FrogJSleftThumb2');
lThumb2.style.display = 'none';
lThumb2.style.position = 'absolute';
lThumb2.style.top = thumbTop;
lThumb2.style.left = '0';
ribbit.appendChild(lThumb2);
//-----------------------------------------
// End Inserting new elements
//-----------------------------------------

// Preloads first image and displays image along with next thumbnail
var myFrog = this; // IE can't use the global `myFrog` until it's been initialized
var imgPreloader = new Image();
imgPreloader.onload=function(){
myFrog.loadMainImage(0, imgPreloader.width);
myFrog.thumbIn(1, 'right');
}
imgPreloader.src = imageArray[0]['full'];
},

// loadImage()
// Loads main image and updates thumbnails accordingly. Uses all other functions of the Frog class.
loadImage: function(imageNum, side, width){

myFrog.loadMainImage(imageNum, width);

if(side=='right'){
myFrog.mainIn(imageNum, 'right');
myFrog.thumbIn(imageNum+1, 'right');
myFrog.mainOut(imageNum-1, 'left');
myFrog.thumbOut(imageNum-2, 'left');
}else{
myFrog.mainIn(imageNum, 'left');
myFrog.thumbIn(imageNum-1, 'left');
myFrog.mainOut(imageNum+1, 'right');
myFrog.thumbOut(imageNum+2, 'right');
}
},

and this i'ts the second:

// loadMainImage()
// Fades out old main image and fades in new one. Also updates credit and caption
loadMainImage: function(imageNum, width){
Element.setCursor('FrogJSImage','');
$('FrogJSImage').onclick = function(){};
new Effect.Fade('FrogJSMainContainer', { duration:0.5, afterFinish: function(){ showMainImage(); } });
function showMainImage(){
$('FrogJSImage').style.display = 'block';
$('FrogJSImage').src = imageArray[imageNum]['full'];
$('FrogJSMainContainer').style.width = width+'px';
$('FrogJSCredit').innerHTML = imageArray[imageNum]['credit'];
$('FrogJSCaption').innerHTML = imageArray[imageNum]['caption'];
new Effect.Appear('FrogJSMainContainer', { duration: 0.5, afterFinish: function(){ addOnclick(); } });
function addOnclick(){
if(imageArray[imageNum]['link']){
Element.setCursor('FrogJSImage','pointer');
$('FrogJSImage').onclick = function(){
location.href = imageArray[imageNum]['link'];
}
}
}
}
},

// thumbIn()
// Loads in new thumbnail and preloads image if neccessary
thumbIn: function(imageNum, side){
Element.hide('FrogJS'+side+'Thumb1');
if(imageArray[imageNum]){
Element.setCursor('FrogJS'+side+'Thumb1','');
$('FrogJSLoadingAni').style.left = (side=='left') ? '0' : '';
$('FrogJSLoadingAni').style.right = (side=='right') ? '0' : '';
Element.show('FrogJSLoadingAni');
var imgPreloader = new Image();
imgPreloader.onload=function(){
Element.hide('FrogJSLoadingAni');
Element.removeDimensions('FrogJS'+side+'Thumb1');
Element.setCursor('FrogJS'+side+'Thumb1','');
$('FrogJS'+side+'Thumb1').onclick = function(){};
$('FrogJS'+side+'Thumb1').src = imageArray[imageNum]['thumb'];
new Effect.Appear('FrogJS'+side+'Thumb1',{duration:1.0});
new Effect.Scale('FrogJS'+side+'Thumb1', 100, { duration: 1.0, scaleFrom: 0.1, afterFinish: function(){ addOnclick(); } });
function addOnclick(){
Element.setCursor('FrogJS'+side+'Thumb1','pointer');
$('FrogJS'+side+'Thumb1').onclick = function(){
myFrog.loadImage(imageNum, side, imgPreloader.width);
Element.removeOnclick('FrogJSleftThumb1');
Element.removeOnclick('FrogJSrightThumb1');
}
}
}
imgPreloader.src = imageArray[imageNum]['full'];
}
},

// thumbOut()
// Removes old thumbnail
thumbOut: function(imageNum, side){
if(imageArray[imageNum]){
$('FrogJS'+side+'Thumb2').src = imageArray[imageNum]['thumb'];
Element.show('FrogJS'+side+'Thumb2');
Element.removeDimensions('FrogJS'+side+'Thumb2');
new Effect.Fade('FrogJS'+side+'Thumb2',{duration:1.0});
new Effect.Scale('FrogJS'+side+'Thumb2', 0, { duration: 1.0, scaleFrom: 100 });
}
},

// mainIn()
// Fades thumbnail into main image
mainIn: function(imageNum, side){
$('FrogJS'+side+'Thumb2').src = imageArray[imageNum]['thumb'];
Element.removeDimensions('FrogJS'+side+'Thumb2');
Element.show('FrogJS'+side+'Thumb2');
new Effect.Fade('FrogJS'+side+'Thumb2',{duration:1.0});
new Effect.Scale('FrogJS'+side+'Thumb2', scalePercent, { duration: 1.0 });
},

// mainOut()
// Fades old main image into thumbnail
mainOut: function(imageNum, side){
Element.hide('FrogJS'+side+'Thumb1');
if(imageArray[imageNum]){
Element.setCursor('FrogJS'+side+'Thumb1','');
var imgPreloader = new Image();
imgPreloader.onload=function(){
Element.removeDimensions('FrogJS'+side+'Thumb1');
$('FrogJS'+side+'Thumb1').src = imageArray[imageNum]['thumb'];
new Effect.Appear('FrogJS'+side+'Thumb1',{duration:1.0});
new Effect.Scale('FrogJS'+side+'Thumb1', 100, { duration: 1.0, scaleFrom: scalePercent, afterFinish: function(){ addOnclick(); } });
function addOnclick(){
Element.setCursor('FrogJS'+side+'Thumb1','pointer');
$('FrogJS'+side+'Thumb1').onclick = function(){
myFrog.loadImage(imageNum, side, imgPreloader.width);
Element.removeOnclick('FrogJSleftThumb1');
Element.removeOnclick('FrogJSrightThumb1');
}
}
}
imgPreloader.src = imageArray[imageNum]['full'];
}
}
}

// It's time for this frog to hop
function initFrog(){ myFrog = new Frog(); }
Event.observe(window, 'load', initFrog, false);

I hope you didn't expect me to go through that code line by line. Anyways, the loading image is still missing from the server:

Code:

---

http://www.betfer.co.uk/ruwett/images/loading.gif

---

is an HTTP Error 404 File not found. I also notice that with each progression of the gallery, FF is generating an error:

Quote:

---

Warning: Error in parsing value for property 'width'. Declaration dropped.
Source File: http://www.betfer.co.uk/ruwett/photo.html
Line: 0

---

Line: 0 means this is script generated. I would suggest getting all fresh script files from the demo page to see if it helps (the demo page isn't giving that error):

http://www.dynamicdrive.com/dynamici...ogjs/index.htm

ok, i've uploaded the loads icon on the server, but the problem still remains, the code is the same as that of the link you suggested.. maybe the thumb sizes are wrong?? i don't know
please someone help me..

Well, the script you have is v1.0. The one on DD is v1.1. There are differences. From looking at these, I'm not confident that they will change anything about the problem, but they may.

However, I only checked the main (frog.js file). There may also be differences in the two resource files:

prototype.js
scriptaculous.js

Download the archive:

FrogJS1.1.zip

and use the files from it.

After that, you can try validating your page and/or removing other scripts from it.

If none of that 'gets it', then it may have something to do with your server, or it could be some inherent flaw in frog.

I've uploaded to the server the version 1.1 of the script, i've modified the thumb size..
The problem still remain. Please check here: http://www.betfer.co.uk/ruwett/scena.html

I need somone help me please :confused:

At this writing (and after clearing my cache), the link you supplied in your previous post is still using the old version of the script, and now there is no loading image again.

This is killing me. as I click on the next image, at some point the thumbnail I just left disappears and you can't go back thru the pics. I have to refresh which take you to the beginning again. Sometimes the Next pic thumbnail is not there to proceed on thru the list of pics. Not Good. Very inconsistent code. Unreliable. It would really be great if someone could spot the issue with this code. I'd really like to keep it in the site.

Please start a new thread for a new question.