MegaZine3 Version 2 > User Contributions

Creating popup window / opening a lightbox

(1/6) > >>

kelvin.cushman:
please can some one advise me how i can create a popup effect when i click an area within a page. i basically want to call an external webpage in a wrapper, like youtube or news or gallery! these guys have done it http://www.kryztoff.com/issues/007/#/6 please can some one share this.

thanks in advance

kelvin

rbaybayan:
Hi Krystof,

I hope you read this request. Any chance to share your work on the above magazine link?
We will appreciate if yo can share the files...

Thanks,

Ruel

Hans Nücke:
I pniged Peter who created that site... I guess we'll hear from him soon!

MPete:
When linking to an external website it's nice have people take a look then continue reading without leaving the book and getting lost. There are various ways of doing it (and I've seen better, although can't remember where it was now) but can try and detail what I've done.

The links in the flash pages are javascript that loads a "lightbox". There's a great site listing heaps of lightbox scripts you can use based on your javascript framework (if any) and license at http://planetozh.com/projects/lightbox-clones/ but for my example, I've used the jQuery lightbox at http://leandrovieira.com/projects/jquery/lightbox/

The page links go to something like:

--- Code: ---javascript:loadLink('link','http://example.com')
--- End code ---
This loads a custom javascript function I built from the lightbox api explanations so different types of windows can be loaded. I've also added Google Analytics tracking to each of the links for statistics.

My example loads different window sizes, iframes, flash video players etc depending on the action sent to the function. It also adds the start and end url strings to make it easier to add the links without mistakes, these include:

video - self hosted video (loaded in jwplayer)
music - self hosted music (load in jwplayer with mp3 visualisation)
youtube - loads autoplay, english, high quality
fbvideo - loads the source video from facebook
myspace - loads in new window because myspace have frame detection and jumps out of the frame, leaving your book so you need to load a completely new window
popup - loads a new window with target _blank (don't load lightbox in this case!)
section - loads an anchor from within the book, set in the book.xml file (make sure you don't load the lightbox for this!)
email - loads a mailto:link
mailto - loads a contact form by putting hte to and subject fields in automatically selected

The other part I've added is the hashchange jquery script at http://plugins.jquery.com/project/hashchange so when the hash changes it runs the same script so you can share the popup address by going to something like www.example.com/mybook/#myspace/http://myspace.com/username - then you break up the hash value into two parts, the action and link.


--- Code: ---function loadLink(hashAction,url){

//default set when shadowbox closed or no hash
if(hashAction && hashAction !="" && hashAction !='mag'){
//set defaults;
startUrl='';endUrl='';
loadHeight='';loadWidth='';

if(hashAction=="video" || hashAction=="music"){
if(hashAction=="music"){
startUrl = "http://www.example.com/mp3/";
//endUrl = "&plugins=revolt"; //mp3 visualisation
} else {
startUrl = "http://www.example.com/flv/";
}
loadHeight = 350;
loadWidth = 622;

loadPlayer = "flv";

} else if(hashAction=="youtube" || hashAction=="fbvideo" || hashAction=="othervideo" || hashAction=="link"){
if(hashAction=="youtube"){
endUrl = "&autoplay=1&hl=en&fs=1&ap=%2526fmt%3D18"; //&fmt=18 to force HQ

} else if(hashAction=="fbvideo"){
//startUrl = "http://www.facebook.com/video/video.php?v="; //include comments but window needs to be bigger
startUrl = "http://www.facebook.com/v/"; //raw video
}
if(hashAction!="link"){
loadHeight = 505;
loadWidth = 854;
}
loadPlayer = "iframe";

} else if(hashAction=="myspace" || hashAction=="popup"){
window.open(url,"popup");
pageTracker._trackPageview("/outgoing/"+hashAction+"/"+url); // Analytics
hashAction = false;
dontLoadShadowbox = true;

} else if(hashAction=="section"){
location.hash="#/"+url;
hashAction = false; dontLoadShadowbox = true;

} else if(hashAction=="email" || hashAction=="mailto"){
if(hashAction=="email"){
hashAction = false; dontLoadShadowbox = true;
sendEmail(url);
} else {
startUrl = "http://www.example.com/pages/message.php?";
}
loadHeight = 450;
loadWidth = 622;

loadPlayer = "iframe";

}

if(hashAction || !dontLoadShadowbox){
Shadowbox.open({ content:startUrl+url+endUrl, player:loadPlayer, height:loadHeight, width:loadWidth });
pageTracker._trackPageview("/outgoing/"+hashAction+"/"+url); // Analytics
}

} else {
Shadowbox.close(); //fix for using browser history retaining shadowbox
}
}

--- End code ---

The main drawback of using a javascript lightbox is that you can't have layers going on top of flash so you need to make sure flash is switched to invisible when popup and visible when closing (the lightbox script usually does this automatically). A better approach is to use the jpg flash freeze/print frame and have that as the background image so it looks as though the popup goes over the book - I've seen this in one example but can't remember where.

I know it sounds a bit complicated because I've added a whole bunch of other things as it's been used and as the client wanted other things.

In summary, just load a lightbox in your links!

Florian Nücke:
Thanks! Moved to contributions.

Navigation

[0] Message Index

[#] Next page