Trigga lightbox

Tjena,

Använder mig av lightboxes på sidan och behöver nu kunna trigga en lightbox via javascript istället för som vanligt i <a>-tagen..

Standard för att trigga gör jag m.h.a. följande class och rel

<a href="#" rel="lightbox1" class="lbOn">Visa lightbox</a>

Har testat att försöka köra lite funktioner från lightbox.js inom <script>-tagar utan lyckat resultat.

Jag skickar även med koden för lightbox.js här under.
Är medveten om att det är en hel del kod i den men för de som kan detta med javascript bra samt inte så insatta i lightbox så kanske det underlättar något.

Tack på förhand!

Event.observe(window, 'load', initialize, false);
Event.observe(window, 'load', getBrowserInfo, false);
Event.observe(window, 'unload', Event.unloadCache, false);

var lightbox = Class.create();

lightbox.prototype = {

	yPos : 0,
	xPos : 0,

	initialize: function(ctrl) {
		this.content = ctrl.rel;
		Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
		ctrl.onclick = function(){return false;};
	},
	
	// Turn everything on - mainly the IE fixes
	activate: function(){
		if (browser == 'Internet Explorer'){
			this.getScroll();
			this.prepareIE('100%', 'hidden');
			this.setScroll(0,0);
			this.hideSelects('hidden');
		}
		this.displayLightbox("block");
	},
	
	// Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
	prepareIE: function(height, overflow){
		bod = document.getElementsByTagName('body')[0];
		bod.style.height = height;
		bod.style.overflow = overflow;
  
		htm = document.getElementsByTagName('html')[0];
		htm.style.height = height;
		htm.style.overflow = overflow; 
	},
	
	// In IE, select elements hover on top of the lightbox
	hideSelects: function(visibility){
		selects = document.getElementsByTagName('select');
		for(i = 0; i < selects.length; i++) {
			selects[i].style.visibility = visibility;
		}
	},
	
	// Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
	getScroll: function(){
		if (self.pageYOffset) {
			this.yPos = self.pageYOffset;
		} else if (document.documentElement && document.documentElement.scrollTop){
			this.yPos = document.documentElement.scrollTop; 
		} else if (document.body) {
			this.yPos = document.body.scrollTop;
		}
	},
	
	setScroll: function(x, y){
		window.scrollTo(x, y); 
	},
	
	displayLightbox: function(display){
		document.getElementById("S7FlashMovie").style.display = 'none';
		$('overlay').style.display = display;
		$(this.content).style.display = display;
		if(display != 'none') this.actions();		
	},
	
	// Search through new links within the lightbox, and attach click event
	actions: function(){
		lbActions = document.getElementsByClassName('lbAction');

		for(i = 0; i < lbActions.length; i++) {
			Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
			lbActions[i].onclick = function(){return false;};
		}

	},
	
	// Example of creating your own functionality once lightbox is initiated
	deactivate: function(){
		if (browser == "Internet Explorer"){
			this.setScroll(0,this.yPos);
			this.prepareIE("auto", "auto");
			this.hideSelects("visible");
			document.getElementById("S7FlashMovie").style.display = 'block';
		}
		
		this.displayLightbox("none");
		document.getElementById("S7FlashMovie").style.display = 'block';
	}
}

/*-----------------------------------------------------------------------------------------------*/

// Onload, make all links that need to trigger a lightbox active
function initialize(){
	addLightboxMarkup();
	lbox = document.getElementsByClassName('lbOn');
	for(i = 0; i < lbox.length; i++) {
		valid = new lightbox(lbox[i]);
	}
}

// Add in markup necessary to make this work. Basically two divs:
// Overlay holds the shadow
// Lightbox is the centered square that the content is put into.
function addLightboxMarkup() {

	bod 				= document.getElementsByTagName('body')[0];

	overlay 			= document.createElement('div');
	overlay.id			= 'overlay';

	bod.appendChild(overlay);
}

<script language="text/javascript">
var trigger = document.getElementById('Picture');
myLightbox.start(trigger);
</script>

Glöm inte sätta ID-attributet 'Picture' på det element som ska triggas. :)

SPiN skrev:

<script language="text/javascript">
var trigger = document.getElementById('Picture');
myLightbox.start(trigger);
</script>

Glöm inte sätta ID-attributet 'Picture' på det element som ska triggas. :)

Tackar, men det fungerar tyvärr inte.

Jag får fel om att "myLightbox is not defined"
Missar jag att sätta rätt namn där?

Rent logiskt tycker jag att jag borde använda "lightbox.funktionsnamn" eller något liknande...alltså ett funktionsnamn som finns inne i lightbox.js.

Just det, IE har tydligen lite problem med 'myLightbox' - följande borde fixa till det:

myLightbox = new Lightbox();

Vad använder du förresten för version? Det ska fungera i Lightbox 2 - fram till version 2.04...

SPiN skrev:

Just det, IE har tydligen lite problem med 'myLightbox' - följande borde fixa till det:

myLightbox = new Lightbox();

Sedär ja..något framåt iaf :)

ctrl has no properties
/_inc/js/lightbox.js
Line 72

Kod som jag kör nu:

var trigger = document.getElementById("lightbox2");
myLightbox = new lightbox();
myLightbox.start(trigger);

Sen En div då:

<div id="lightbox2" class="leightbox">TEST</div>

Verkar som att den felar på "click" controllen..eller jag vet inte..lite för avancerat för min kunskaper :)

Du måste nog fortfarande använda dig av a-länkar och rel-attributet!

...
<script type="text/javascript">
myLightbox = new Lightbox();
var trigger = document.getElementById("Picture");
myLightbox.start(trigger);
</script>
...
<a href="image.jpg" rel="lightbox[PhotoGallery]" id="Picture"><img src="image.jpg"></a>
...

Hittade en lösning på mitt problem.

Klantig som jag var så glömde jag nämna att det var leightbox (inline content) som jag använde mig utav.
Funktionerna används väl på samma sätt som lightbox antar jag :)

I vilket fall så kommer här lösningen:

lightbox.js (justeringa i fet stil):

Event.observe(window, 'load', initialize, false);
Event.observe(window, 'load', getBrowserInfo, false);
Event.observe(window, 'unload', Event.unloadCache, false);

var lightbox = Class.create();

lightbox.prototype = {

	yPos : 0,
	xPos : 0,

	initialize: function(ctrl) {
		[B]if(ctrl) { //ADDED CONTROL[/B]
			this.content = ctrl.rel;
			Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
			ctrl.onclick = function(){return false;};
		[B]}[/B]
	},
	
	[B]//OWN FUNCTION
	initCallable: function(rel) {
		this.content = rel;
	},[/B]
	
	// Turn everything on - mainly the IE fixes
	activate: function(){
		if (browser == 'Internet Explorer'){
			this.getScroll();
			this.prepareIE('100%', 'hidden');
			this.setScroll(0,0);
			this.hideSelects('hidden');
		}
		this.displayLightbox("block");
	},
	
	// Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
	prepareIE: function(height, overflow){
		bod = document.getElementsByTagName('body')[0];
		bod.style.height = height;
		bod.style.overflow = overflow;
  
		htm = document.getElementsByTagName('html')[0];
		htm.style.height = height;
		htm.style.overflow = overflow; 
	},
	
	// In IE, select elements hover on top of the lightbox
	hideSelects: function(visibility){
		selects = document.getElementsByTagName('select');
		for(i = 0; i < selects.length; i++) {
			selects[i].style.visibility = visibility;
		}
	},
	
	// Taken from lightbox implementation found at [url]http://www.huddletogether.com/projects/lightbox/[/url]
	getScroll: function(){
		if (self.pageYOffset) {
			this.yPos = self.pageYOffset;
		} else if (document.documentElement && document.documentElement.scrollTop){
			this.yPos = document.documentElement.scrollTop; 
		} else if (document.body) {
			this.yPos = document.body.scrollTop;
		}
	},
	
	setScroll: function(x, y){
		window.scrollTo(x, y); 
	},
	
	displayLightbox: function(display){
		document.getElementById("S7FlashMovie").style.display = 'none';
		$('overlay').style.display = display;
		$(this.content).style.display = display;
		if(display != 'none') this.actions();		
	},
	
	// Search through new links within the lightbox, and attach click event
	actions: function(){
		lbActions = document.getElementsByClassName('lbAction');

		for(i = 0; i < lbActions.length; i++) {
			Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
			lbActions[i].onclick = function(){return false;};
		}

	},
	
	// Example of creating your own functionality once lightbox is initiated
	deactivate: function(){
		if (browser == "Internet Explorer"){
			this.setScroll(0,this.yPos);
			this.prepareIE("auto", "auto");
			this.hideSelects("visible");
			document.getElementById("S7FlashMovie").style.display = 'block';
		}
		
		this.displayLightbox("none");
		document.getElementById("S7FlashMovie").style.display = 'block';
	}
}

/*-----------------------------------------------------------------------------------------------*/

// Onload, make all links that need to trigger a lightbox active
function initialize(){
	addLightboxMarkup();
	lbox = document.getElementsByClassName('lbOn');
	for(i = 0; i < lbox.length; i++) {
		valid = new lightbox(lbox[i]);
	}
}

// Add in markup necessary to make this work. Basically two divs:
// Overlay holds the shadow
// Lightbox is the centered square that the content is put into.
function addLightboxMarkup() {

	bod 				= document.getElementsByTagName('body')[0];

	overlay 			= document.createElement('div');
	overlay.id			= 'overlay';

	bod.appendChild(overlay);
}

Kod i <head>:

<script>
	myLightbox = new lightbox();
	myLightbox.initCallable('lightbox2');
	myLightbox.activate();
</script>

Div att visa med innehåll:

<div id="lightbox2" class="leightbox">SHOW YOURSELF</div>