Lightbox

From Wikicliki
Jump to: navigation, search

when i have time i will write something comparing all the many lightboxes out there - shadowbox, thickbox, lightbox, lytebox, and all the other jquery bits and bobs.

but first in summary - my favourite has to be Lytebox

  • Links can originate from an inframe in the page that will overlay the ENTIRE page.
  • Script can be easily modded so that it can come from a link in flash as well.

Using Lytebox with link from within Flash

JS

define the function in js by faking an anchor link in the html (since thats the point from which lytebox opens the lightbox frame)....

function openLyteFrame(title, url) {
      var anchor = this.document.createElement('a');
      anchor.setAttribute('rev', 'width: 600px; height: 480px; scrolling: auto;');
      anchor.setAttribute('title', title);
      anchor.setAttribute('href', url);
      anchor.setAttribute('rel', 'lyteframe');
      alert(anchor.getAttribute('href'));
      myLytebox.start(anchor, false, true);
} 

AS2

use the handydandy external interface to call js function

import flash.external.ExternalInterface;
room_mc.onRelease = function() {
	getURL("javascript:openLyteFrame('', 'filename.html');", "_self"); 
};

Simultaneous flash and html mouseover effect

if using lightbox links in flash, you might want something else in the html page also light up at the same time if there's some "legend" with the same link....

JS & HTML

<script type="text/javascript" src="swfobject.js"></script>
<link rel="stylesheet" type="text/css" href="js/lytebox/lytebox.css">
<script type="text/javascript" src="js/lytebox/lytebox.js"></script>
<script type="text/javascript">

	<style>
	a {font-family:arial; padding:10px; text-decoration:none}
	a:hover {background:black; color:red}

	 a.flashOver {background:black; color:red}
	 </style>

// get flash movie object

function getFlashMovie(floor) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
        return (isIE) ? window[floor] : document[floor];
}

// html link lights up the flash country

function asMouseOver(id){
  try{
    getFlashMovie("floor").textMouseOver(id);
  }catch(e){
  
  }
}
function asMouseOut(id){
  try{
    getFlashMovie("floor").textMouseOut(id);
  }catch(e){
  
  }
}

// flash country lights up html link

function countryMouseOver(id){
	addClass(document.getElementById(id),'flashOver');
}

function countryMouseOut(id){
	removeClass(document.getElementById(id),'flashOver');
}

function addClass(element, value) {
	if (!element.className) {
		element.className = value;
	} else {
		var newClassName = element.className;
		newClassName += " ";
		newClassName += value;
		element.className = newClassName;
	}
}

function removeClass(element, value){
	element.className = element.className.replace(eval('/'+value+'/'),'');
}

Shadowbox.init({
    language: 'en',
    players:  ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']
});


function openLyteFrame(title, url) {
      var anchor = this.document.createElement('a');
      anchor.setAttribute('rev', 'width: 600px; height: 480px; scrolling: auto;');
      anchor.setAttribute('title', title);
      anchor.setAttribute('href', url);
      anchor.setAttribute('rel', 'lyteframe');
      alert(anchor.getAttribute('href'));
      myLytebox.start(anchor, false, true);
} 
</script>
<a id="BM" onmouseout="asMouseOut(this.id)" onmouseover="asMouseOver(this.id)" rel="lyteframe[flash1]" 
title="" rev="width: 800px; height: 365px; scrolling: auto;" href="flash1.html">BLUE LINK</a>

AS

 // COLOURWANG! -- using prototype to define the clearRGB function for the mouseOut

Color.prototype.clearRGB = function(){
     this.setTransform({ra:100, rb:0,ga:100,gb:0,ba:100,bb:0,aa:100,ab:0});
}

// FUNCTIONWANG! -- defines the mouseovers and mouseouts colour changes

function countryOver(id) {
	var newColor = new Color(eval(id));
	newColor.setRGB(0x2A87AC);
}
function countryOut(id) {
	var newColor = new Color(eval(id));
	newColor.clearRGB();
}
function countryOverHTML(id){
	ExternalInterface.call("countryMouseOver",id);
}
function countryOutHTML(id){
	ExternalInterface.call("countryMouseOut",id);
}

// COUNTRYFUNCTIONWANG! -- defines the rollovrs and rollouts for 
// the mouseovers and mouseouts hover captions functions (for each specific movieclip)

BM.onRollOver  = function()  {
	countryName(true, "Bermuda", this);
	countryOver("BM");
	countryOverHTML("BM");
	this.onRollOut = function() {
		countryName(false);
		countryOut("BM")
		countryOutHTML("BM");
	};
}; 

// WORDWANG! -- defines the hover caption function - thanks to kirupa hover tutorial

countryName =  function (showCaption, captionText, bName)  {
if (showCaption) {
	_root.createEmptyMovieClip("hoverCaption", this.getNextHighestDepth());
	cap.desc.text = captionText;
	cap._width = 8*cap.desc.text.length;
	cap._alpha = 75;
	hoverCaption.onEnterFrame = function() {
		cap._x = _root._xmouse;
		if ((cap._x-(cap._width/2))<0) {
			cap._x = cap._width/2;
		}else if((cap._x + (cap._width/2))>330){
			cap._x = 330 - (cap._width/2);
		}else{
		}
		cap._y = _root._ymouse-15;
		cap._visible = true;
	};
} else {
	delete hoverCaption.onEnterFrame;
	cap._visible = false;
}
};

// EXTERNALINTERFACEWANG! -- externalinterface callback that 
// allows Actionscript to access the Javascript functions 
// (by declaring them in advance)

var method1:Function = countryOver;
var method2:Function = countryOut;
var instance:Object = null;
ExternalInterface.addCallback("textMouseOver", instance, method1);
ExternalInterface.addCallback("textMouseOut", instance, method2);