Pixelpost

BuzzLeclaiR · #1 03-21-2007, 08:11 PM

Hello All,

I'm a proud owner of PP 1.5.
I'm currently working on a new template for my web site. and I'm facing a strange issue but maybe this is very simple for web developers...

I'm using the fader.js to fade in the images. This is working perfectly.
But I'm trying to use the boxover.js at the same time and each time I load it the fader.js is not working any more.

So my question is : how to use several js at the same time in one web page ?

What I did :

<script src= "fader.js " type= " text/Javascript " ></script>
<script src= "boxover.js " type= " text/Javascript " ></script>

If anyone could help it would be cool.

Thanks !

Philippe

http://www.thebutterflysoup.com http://thebutterflysoup.free.fr/photoblog/

**austriaka**+ · #2 03-21-2007, 08:50 PM

do you have a JavaScript error on your page?
Please tell it here!

KArin

BuzzLeclaiR · #3 03-22-2007, 05:37 PM

Thanks for answering!
Actually I don't have any error message. The thing is I first use the fader script, it worked. Then, when I try to use in the same page the boxover, bith JS are not working anymore. I don't have any image loaded in my page...
My feeling is for some reason using two different at the same time is not working.
Do you have any tips regarding this problem ?
Thanks !

**austriaka**+ · #4 03-23-2007, 09:21 AM

I looked at the source code of your main page, I cannot find anything corresponding to the two scripts you mentioned.
As I don't have my cristal ball at the hand it is hard to tell you anything...

KArin

BuzzLeclaiR · #5 03-23-2007, 09:04 PM

IN fact this is a new template I'm working on..
You are right without example this is very difficult... sorry for that.

So a bit of my code.
If i'm doing that :

Code:

<script type="text/javascript" src="fader.js"</script>

<a href="index.php?showimage=<IMAGE_PREVIOUS_ID>"> <img src="images/<IMAGE_NAME>" alt="<IMAGE_TITLE>" title="<IMAGE_TITLE>" width="<IMAGE_WIDTH>" height="<IMAGE_HEIGHT>" id="photo" /> </a>

This is working, the fader script work well.

The I want to add the boxover.js and the result I got is nothing displayed anymore (I mean no image anymore!) :

Code:

<script type="text/javascript" src="fader.js"</script>
<script type="text/javascript" src="boxover.js"</script>

<a href="index.php?showimage=<IMAGE_PREVIOUS_ID>"> <img src="images/<IMAGE_NAME>" alt="<IMAGE_TITLE>" title="<IMAGE_TITLE>" width="<IMAGE_WIDTH>" height="<IMAGE_HEIGHT>" id="photo" /> </a>

I guess for any reason both scripts are using the same variables or something related...
Thank you very much anyway for the help!

BuzzLeclaiR · #6 03-23-2007, 09:37 PM

I finnaly found...
It was actually very easy....

first after <body> I put my calls to the box bover :

Code:

<BODY>
<script src="templates/scripts/boxover.js" type="text/javascript"></script>

Then I use the fader just before the image :

Quote:

It finnally works like that!
Thanks you anyway Karim, this was very cool from you at least to try

kvdv · #7 05-16-2007, 08:13 AM

I've been looking into the sames problem for a long time actually... :-)

Thanks man!!

-Kris

jgrayson · #8 05-18-2007, 04:52 PM

Quote:

Originally Posted by BuzzLeclaiR

Hello All,

I'm a proud owner of PP 1.5.
I'm currently working on a new template for my web site. and I'm facing a strange issue but maybe this is very simple for web developers...

I'm using the fader.js to fade in the images. This is working perfectly.
But I'm trying to use the boxover.js at the same time and each time I load it the fader.js is not working any more.

So my question is : how to use several js at the same time in one web page ?

What I did :

<script src= "fader.js " type= " text/Javascript " ></script>
<script src= "boxover.js " type= " text/Javascript " ></script>

If anyone could help it would be cool.

Thanks !

Philippe

http://www.thebutterflysoup.com http://thebutterflysoup.free.fr/photoblog/

if i recall correctly the problem has to do with the fact that both scripts use a function with the same name called "fadeIn". because of that only one of the scripts (or neither) will work.

since the fader script has less scripting then it easier to update that file. make a backup copy of the fader.js file and then replace all the code in the current fader.js file, which looks like this:

Code:

document.write("<style type='text/css'>#photo {visibility:hidden;}</style>");

function initImage() {
	imageId = 'photo';
	image = document.getElementById(imageId);
	setOpacity(image, 0);
	image.style.visibility = "visible";
	fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
		if (opacity <= 100) {
			setOpacity(obj, opacity);
			opacity += 5;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 20);
		}
	}
}
function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}

to this:

Code:

document.write("<style type='text/css'>#photo {visibility:hidden;}</style>");

function initImage() {
	imageId = 'photo';
	image = document.getElementById(imageId);
	setOpacity(image, 0);
	image.style.visibility = "visible";
	faderIn(imageId,0);
}
function faderIn(objId,opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
		if (opacity <= 100) {
			setOpacity(obj, opacity);
			opacity += 5;
			window.setTimeout("faderIn('"+objId+"',"+opacity+")", 20);
		}
	}
}
function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}

all i did was rename fadeIn to faderIn (you can name it anything you want just make sure you update it in every instance in fader.js file)

let me know if that worked.

theMezz · #9 03-12-2008, 03:12 AM

Thanks for posting that jgrayson
It saved me from pulling out the rest of my hair !!!!!!!!

AND fixed the issue

THANKS

Pixelpost

Authentic Photoblog Flavour