Lightbox JS-Conflict wt Poor man's multilanguage enhancement

[hulkie]

Hello!
I have a little problem with the Lightbox feature. I use the multilanguage addon, which is done by a JS and implemented in the Header:

<style type="text/css">.invisibleonload {visibility:hidden}</style>
<script type="text/javascript" src="languages.js"></script>
<div class="invisibleonload">

The pb is that it obvioulsy conflicts with the lightbox. I found how to resolve the conflict on this page -> http://www.hypergurl.com/javascriptconflict.html

Could somebody pls tell me how do I have to change my above statement accordingly?

Many thanks in advance!
Christian

[hulkie]

Btw - I use v1.33 with the Poor man's multilanguage enhancement v2.0
Is there anybody who knows JS? I am a newbie

Or.. does anybody know where the Javascript of the phpwcms-lightbox-feature is implemented? As far as I understood I have to load both JS modules by one statement at one place but I dont know how this JS-statement should look like.
Any hint would be highly appreciated!!
Thanks!!

[DeXXus]

The pb is that it obvioulsy conflicts with the lightbox. I found how to resolve the conflict on this page -> http://www.hypergurl.com/javascriptconflict.html

Greetings Christian!

Unfortunately, I don't ~think~ you have found a solution, because I don't ~believe~ that multilanguage addon uses body onload() functionality.
Looks like it is set up to be triggered onmouseover() or onclick()... after the page has been rendered (not onload of the html body tag).

The article to which you point, refers to calling a function... from an already-loaded javascript file... when the body tag is called.

But, I ~think~ you are keying on the loading of the javascript file (languages.js) and thinking that if it could be loaded at same time as lightbox... that might solve the conflict. Not the same thing.

[DeXXus]

Or.. does anybody know where the Javascript of the phpwcms-lightbox-feature is implemented? As far as I understood I have to load both JS modules by one statement at one place but I dont know how this JS-statement should look like.
Any hint would be highly appreciated!!
Thanks!!

Function "defined" here:

Code: Select all

front.func.inc.php"(2927):		function initializeLightbox() {

Function "called" here:

Code: Select all

front.func.inc.php"(1204):			initializeLightbox();
content.article.inc.php"(203):			initializeLightbox();
content\cnt1.article.inc.php"(56):			initializeLightbox();
content\cnt18.article.inc.php"(851):		initializeLightbox();
content\cnt2.article.inc.php"(40):			initializeLightbox();
content\cnt29.article.inc.php"(59):		initializeLightbox();

(Line numbers in parentheses)

[hulkie]

Greetings Dexxus,

thanks for your reply!
I am not sure if I understood you 100% but I see what you mean re my "solution". The multilanguage addon uses definitely onmouseover. The strange thing is, if I take out this statement of the header

Code: Select all

<style type="text/css">.invisibleonload {visibility:hidden}</style>
<script type="text/javascript" src="languages.js"></script>
<div class="invisibleonload"> 

then the built in lightbox feature works. That is the reason why I believe that there must be a conflict between those two. The trouble is, that I really need that addon. Any idea how a solution could look like? What does this "invisibleonload" do?
many thanks!

[DeXXus]

The strange thing is, if I take out this statement of the header

Code: Select all

<style type="text/css">.invisibleonload {visibility:hidden}</style>
<script type="text/javascript" src="languages.js"></script>
<div class="invisibleonload"> 

then the built in lightbox feature works. That is the reason why I believe that there must be a conflict between those two. The trouble is, that I really need that addon. Any idea how a solution could look like?

Too hard to speculate, for someone who does not use the multilanguage addon. Seeing the page(s) and javascript errors might help -or- perhaps someone else that uses that feature and has upgraded... will "chime in".

What does this "invisibleonload" do?

Wildly guessing that it is a CSS class assigned to content that is NOT the default language (in other words...NOT to be shown UNTIL onmouseover).

Sorry to be of no help.

[hulkie]

Never mind.. thank you that you shed some light on this.
And yes, I hope that somebody who is in the same situation like me, will maybe join the discussion!
Many greetings,
christian

[TI&OSM]

I am facing the same problems,
and at first I thought it also was the

Code: Select all

<style type="text/css">.invisibleonload {visibility:hidden}</style>
<script type="text/javascript" src="languages.js"></script>
<div class="invisibleonload"> 

I have no solution, I only want to backup Christian with our mutual problem.
So I join the discussion and please help us.

Robert [TI&OSM]

[hulkie]

Hello Robert,

in the meantime, did you find a solution

or anybody else can advise?

thx

christian

[DeXXus]

You could ~TRY~ implementing the latest version of slimbox. It's a bugfix/improved compatibility release by the author. (Fixes the white noise bug in IE, keeps a backup of the visibility of objects to restore the same one on close and hides "embed" Flash animations for people using SWFObject in a non-IE browser)
The code below is that latest version (with OliverG's code "changes" incorporated).

NOTE: This post has been edited because the author of Slimbox released a newer version (1.4) while this topic was "current" and I have re-used this post (to save space). REQUIRES the mootools framework, version 1.1

Make a backup copy of "/template/slimbox/js/slimbox.js" THEN save the following as it's replacement:

Code: Select all

/*
	Slimbox v1.4 - The ultimate lightweight Lightbox clone
	by Christophe Beyls (http://www.digitalia.be) - MIT-style license.
	Inspired by the original Lightbox v2 by Lokesh Dhakar.
*/

var Lightbox = {

	init: function(options){
		this.options = $extend({
			resizeDuration: 400,
			resizeTransition: false,	// default transition
			initialWidth: 250,
			initialHeight: 250,
			animateCaption: true,
			showCounter: true
		}, options || {});

		this.anchors = [];
		$each(document.links, function(el){
			if (el.rel && el.rel.test(/^lightbox/i)){
				el.onclick = this.click.pass(el, this);
				this.anchors.push(el);
			}
		}, this);
		this.eventKeyDown = this.keyboardListener.bindAsEventListener(this);
		this.eventPosition = this.position.bind(this);

		this.overlay = new Element('div', {'id': 'lbOverlay'}).injectInside(document.body);

		this.center = new Element('div', {'id': 'lbCenter', 'styles': {'width': this.options.initialWidth, 'height': this.options.initialHeight, 'marginLeft': -(this.options.initialWidth/2), 'display': 'none'}}).injectInside(document.body);
		this.image = new Element('div', {'id': 'lbImage'}).injectInside(this.center);
		this.prevLink = new Element('a', {'id': 'lbPrevLink', 'href': '#', 'styles': {'display': 'none'}}).injectInside(this.image);
		this.nextLink = this.prevLink.clone().setProperty('id', 'lbNextLink').injectInside(this.image);
		this.prevLink.onclick = this.previous.bind(this);
		this.nextLink.onclick = this.next.bind(this);

		this.bottomContainer = new Element('div', {'id': 'lbBottomContainer', 'styles': {'display': 'none'}}).injectInside(document.body);
		this.bottom = new Element('div', {'id': 'lbBottom'}).injectInside(this.bottomContainer);
		new Element('a', {'id': 'lbCloseLink', 'href': '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
		this.caption = new Element('div', {'id': 'lbCaption'}).injectInside(this.bottom);
		this.number = new Element('div', {'id': 'lbNumber'}).injectInside(this.bottom);
		new Element('div', {'styles': {'clear': 'both'}}).injectInside(this.bottom);

		var nextEffect = this.nextEffect.bind(this);
		this.fx = {
			overlay: this.overlay.effect('opacity', {duration: 500}).hide(),
			resize: this.center.effects($extend({duration: this.options.resizeDuration, onComplete: nextEffect}, this.options.resizeTransition ? {transition: this.options.resizeTransition} : {})),
			image: this.image.effect('opacity', {duration: 500, onComplete: nextEffect}),
			bottom: this.bottom.effect('margin-top', {duration: 400, onComplete: nextEffect})
		};

		this.preloadPrev = new Image();
		this.preloadNext = new Image();

	// enhanced for translated image cpations
		var browserLang  = navigator.language ? navigator.language : navigator.userLanguage;
		if(browserLang) {
			browserLang = browserLang.substr(0,2);
			browserLang = browserLang.toLowerCase();
		} else {
			browserLang = 'en';
		}
		this.captionWords = new Array('Image', 'of');
		switch(browserLang) {
			case 'de':	this.captionWords = Array('Bild', 'von'); break;
			case 'es':	this.captionWords = Array('Imagen', 'de'); break;
			case 'fr':	this.captionWords = Array('Image', 'de'); break;
			case 'nl':	this.captionWords = Array('Afbeelding', 'van'); break;
			case 'da':	this.captionWords = Array('billede', 'fra'); break;
		}
		// end enhancement

	},

	click: function(link){
		if (link.rel.length == 8) return this.show(link.href, link.title);

		var j, imageNum, images = [];
		this.anchors.each(function(el){
			if (el.rel == link.rel){
				for (j = 0; j < images.length; j++) if(images[j][0] == el.href) break;
				if (j == images.length){
					images.push([el.href, el.title]);
					if (el.href == link.href) imageNum = j;
				}
			}
		}, this);
		return this.open(images, imageNum);
	},

	show: function(url, title){
		return this.open([[url, title]], 0);
	},

	open: function(images, imageNum){
		this.images = images;
		this.position();
		this.setup(true);
		this.top = window.getScrollTop() + (window.getHeight() / 15);
		this.center.setStyles({top: this.top, display: ''});
		this.fx.overlay.start(0.8);
		return this.changeImage(imageNum);
	},

	position: function(){
		this.overlay.setStyles({'top': window.getScrollTop(), 'height': window.getHeight()});
	},

	setup: function(open){
		var elements = $A(document.getElementsByTagName('object'));
		elements.extend(document.getElementsByTagName(window.ie ? 'select' : 'embed'));
		elements.each(function(el){
			if (open) el.lbBackupStyle = el.style.visibility;
			el.style.visibility = open ? 'hidden' : el.lbBackupStyle;
		});
		var fn = open ? 'addEvent' : 'removeEvent';
		window[fn]('scroll', this.eventPosition)[fn]('resize', this.eventPosition);
		document[fn]('keydown', this.eventKeyDown);
		this.step = 0;
	},

	keyboardListener: function(event){
		switch (event.keyCode){
			case 27: case 88: case 67: this.close(); break;
			case 37: case 80: this.previous(); break;	
			case 39: case 78: this.next();
		}
	},

	previous: function(){
		return this.changeImage(this.activeImage-1);
	},

	next: function(){
		return this.changeImage(this.activeImage+1);
	},

	changeImage: function(imageNum){
		if (this.step || (imageNum < 0) || (imageNum >= this.images.length)) return false;
		this.step = 1;
		this.activeImage = imageNum;

		this.center.style.backgroundColor = '';
		this.bottomContainer.style.display = this.prevLink.style.display = this.nextLink.style.display = 'none';
		this.fx.image.hide();
		this.center.className = 'lbLoading';

		this.preload = new Image();
		this.preload.onload = this.nextEffect.bind(this);
		this.preload.src = this.images[imageNum][0];
		return false;
	},

	nextEffect: function(){
		switch (this.step++){
		case 1:
			this.center.className = '';
			this.image.style.backgroundImage = 'url('+this.images[this.activeImage][0]+')';
			this.image.style.width = this.bottom.style.width = this.preload.width+'px';
			this.image.style.height = this.prevLink.style.height = this.nextLink.style.height = this.preload.height+'px';

			this.caption.setHTML(this.images[this.activeImage][1] || '');
			//this.number.setHTML((!this.options.showCounter || (this.images.length == 1)) ? '' : 'Image '+(this.activeImage+1)+' of '+this.images.length);
			this.number.setHTML((!this.options.showCounter || (this.images.length == 1)) ? '' : this.captionWords[0]+' '+(this.activeImage+1)+' '+this.captionWords[1]+' '+this.images.length);

			if (this.activeImage) this.preloadPrev.src = this.images[this.activeImage-1][0];
			if (this.activeImage != (this.images.length - 1)) this.preloadNext.src = this.images[this.activeImage+1][0];
			if (this.center.clientHeight != this.image.offsetHeight){
				this.fx.resize.start({height: this.image.offsetHeight});
				break;
			}
			this.step++;
		case 2:
			if (this.center.clientWidth != this.image.offsetWidth){
				this.fx.resize.start({width: this.image.offsetWidth, marginLeft: -this.image.offsetWidth/2});
				break;
			}
			this.step++;
		case 3:
			this.bottomContainer.setStyles({top: this.top + this.center.clientHeight, height: 0, marginLeft: this.center.style.marginLeft, display: ''});
			this.fx.image.start(1);
			break;
		case 4:
			this.center.style.backgroundColor = '#000';
			if (this.options.animateCaption){
				this.fx.bottom.set(-this.bottom.offsetHeight);
				this.bottomContainer.style.height = '';
				this.fx.bottom.start(0);
				break;
			}
			this.bottomContainer.style.height = '';
		case 5:
			if (this.activeImage) this.prevLink.style.display = '';
			if (this.activeImage != (this.images.length - 1)) this.nextLink.style.display = '';
			this.step = 0;
		}
	},

	close: function(){
		if (this.step < 0) return;
		this.step = -1;
		if (this.preload){
			this.preload.onload = Class.empty;
			this.preload = null;
		}
		for (var f in this.fx) this.fx[f].stop();
		this.center.style.display = this.bottomContainer.style.display = 'none';
		this.fx.overlay.chain(this.setup.pass(false, this)).start(0);
		return false;
	}
};

window.addEvent('domready', Lightbox.init.bind(Lightbox));

[hulkie]

Thanks DeXXus for not giving up on me

I updated the js accordingly but result is the same! I still have the feeling that this problem is due to the way how both functions are called ... when I look at the source code, I can see two invisibleloads .. one slimbox and one multilanguage-hack ... I think they interfere wt each other!

many greetings...
christian

[DeXXus]

Without being able to see what's going...it's hard to tell. (I don't know anything about the language "hack").

What exactly is the result (effect) on the page(s), by the "conflict"?? Can you describe it?

[hulkie]

When the lightbox-feature is activated, and when you click on the pic, then the picture opens in a seperate tab/window.

Have a look, I activated lightbox-feature for those pics:
http://www.famhofer.at/cms/index.php?id=7,89,0,0,1,0

When I view the sourcecode you can see the two invisibleonloads , where I suppose that there is a conflict. But maybe I am wrong??

Code: Select all

...
<style type="text/css">.invisibleonload {visibility:hidden}</style> 
<script type="text/javascript" src="languages.js"></script>
<link rel="stylesheet" href="template/slimbox/css/slimbox.css" type="text/css" media="screen"><script src="template/slimbox/js/mootools.v1.00.js" type="text/javascript"></script><script src="template/slimbox/js/slimbox.js" type="text/javascript"></script></head><body><div style="visibility: visible;" class="invisibleonload">
...

I really appreciate your efforts!
c.

[update]

This is what I can see so far:

Code: Select all

<!-- Multilanguage Support -->
<style type="text/css">.invisibleonload {visibility:hidden}</style> 
<script type="text/javascript" src="languages.js"></script>
<div class="invisibleonload">
  <link rel="stylesheet" href="template/slimbox/css/slimbox.css" type="text/css" media="screen" />
  <script src="template/slimbox/js/mootools.v1.00.js" type="text/javascript"></script>
  <script src="template/slimbox/js/slimbox.js" type="text/javascript"></script>
  <!--[if lt IE 7]>
  <style type="text/css">
    body { behavior: url("template/inc_css/specific/csshover2.htc"); }
    img { behavior: url("template/inc_css/specific/pngbehavior.htc"); }
  </style>
  <![endif]-->
</head>
<body>

It opens a div within the header and seems not be closing it - where does it come from?
With the normal slimbox from within CP image <div> there is no invisibleonload (at least not for my test installation...)

claus

[DeXXus]

I have updated my post above (correctly -NOW-) because the Slimbox author has updated the script to ver. 1.4 (requires the mootools framework, version 1.1):

Changelog
v1.4 (2007-05-21), requires mootools >= 1.1.
Updated code for mootools 1.1.
Added an option to hide the counter.

It opens a div within the header and seems not be closing it - where does it come from?
With the normal slimbox from within CP image <div> there is no invisibleonload (at least not for my test installation...)

claus

@hulkie
Make sure to correct this
I just did a file compare of OliverG's phpwcms slimbox (1.3) and my suggested "mod" to (1,31) and I may have caused your symptom.
I must have dropped some code during (cut/paste) -=SORRY=- for v1.31 (that -I- had above):


WAS:

Code: Select all

 // end enhancement

 },

      var j, imageNum, images = [];

SHOULD HAVE BEEN:

Code: Select all

 // end enhancement

 },

	click: function(link){
		if (link.rel.length == 8) return this.show(link.href, link.title);

      var j, imageNum, images = [];