Author Topic: Creating popup window / opening a lightbox  (Read 64131 times)

kelvin.cushman

  • Newbie
  • *
  • Posts: 12
Creating popup window / opening a lightbox
« on: January 29, 2010, 12:14:48 AM »
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

  • Full Member
  • ***
  • Posts: 54
Re: creating popup window??
« Reply #1 on: January 29, 2010, 04:58:34 AM »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 960
  • MegaZine3 Sales Manager
Re: creating popup window??
« Reply #2 on: January 29, 2010, 11:12:09 AM »
I pniged Peter who created that site... I guess we'll hear from him soon!

MPete

  • Guest
Re: creating popup window??
« Reply #3 on: January 29, 2010, 11:48:16 AM »
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: [Select]
javascript:loadLink('link','http://example.com')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: [Select]
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
}
}

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

  • κρύα πόδια
  • Administrator
  • Hero Member
  • *****
  • Posts: 1979
  • MegaZine3 Developer
    • MegaZine3
Re: creating popup window??
« Reply #4 on: February 01, 2010, 07:24:51 PM »
Thanks! Moved to contributions.
For the Snark was a Boojum, you see.

Before you ask a question
          After you get an answer
  • please document your problem with the answer in the Project Wiki. (e.g. in the FAQs)
  • help others out if you can, by answering their questions on the forum.

MPete

  • Guest
Re: Creating popup window / opening a lightbox
« Reply #5 on: February 04, 2010, 02:36:22 AM »
OK so that was all possibly a bit complicated because I understand it in my head, I've uploaded a cut back demo and source files. You may need to make sure you have the JavaScript plug in on the megazine.mz3 file. The source file doesn't include all the megazine files.

Demo: http://www.pacraig.com/megazine/lightbox
Source: http://www.pacraig.com/megazine/lightbox/MegaZine3_lightbox_source.zip

Note: Unfortunately I'm too busy to provide further support to this demo, so take it as it is. But if you do make any changes, add to it or have any comments please let me know! Also if you end up using it, let me know where you're using it so I can come and check it out.
« Last Edit: February 04, 2010, 03:21:23 AM by MPete »

demon

  • Newbie
  • *
  • Posts: 18
Re: Creating popup window / opening a lightbox
« Reply #6 on: February 04, 2010, 03:15:15 AM »
thanx, but link for the zip is dead

MPete

  • Guest
Re: Creating popup window / opening a lightbox
« Reply #7 on: February 04, 2010, 03:21:41 AM »
oops, I fixed the link now.

demon

  • Newbie
  • *
  • Posts: 18
Re: Creating popup window / opening a lightbox
« Reply #8 on: February 04, 2010, 04:02:29 AM »
thanx a lot, if i good understand you make links in pdf and then converts pdf to swf. Did you convert with pdf2megazine.bat? Should we change something in js files? Or just put links in pdf. Should we put somewhere analytics code?
Did you try to put some links in navigationbar as a custom button?
« Last Edit: February 04, 2010, 04:10:07 AM by demon »

MPete

  • Guest
Re: Creating popup window / opening a lightbox
« Reply #9 on: February 04, 2010, 05:03:47 AM »
I used a modified version of pdf2swf but essentially the same, the links will remain in tact, just add them to the original pdf as javascript.

You shouldn't need to change anything in the javascript files.

If you want to track link clicks with something like Google Analytics, you'll need to edit the js file to include event or page clicks.

I didn't touch the navigationbar, I think I actually removed it all together and recreated a javascript version on a js/html side panel. This has the same link structure to load a popup lightbox.


kelvin.cushman

  • Newbie
  • *
  • Posts: 12
Re: Creating popup window / opening a lightbox
« Reply #10 on: February 05, 2010, 12:56:58 AM »
 ;D thank you so much for your input, Mpete your a star...

rbaybayan

  • Full Member
  • ***
  • Posts: 54
Re: Creating popup window / opening a lightbox
« Reply #11 on: February 09, 2010, 05:43:50 AM »
Hi,

I try to use the video which is local to a specific folder. How can I point properly the path file? relative to which file reference?

Lightbox activated but it always give me an error of reading the F4V file. I loaded the desktop application to read the video file and it works fine. So it is the path file from a relative reference.

Below is my directory struture (currently using mz3v2.0.5):

root dir>dir proj > index.html, megazine.xml
                     >dir image
                     >dir music
                     >dir page
                     >dir video>fish.f4v
 
root dir>library>dir mz3v2.0.5> index.html, style.css
                                               > dir js
                                               > dir megazine
                        >dir mz3v2.0.4>

root dir>library>dir shadowbox>index.html, jquery-1.3.2min.js, js, js
                                                 >libraries>mediaplayer
                                                                >sizzle
                                                                >swfobject
                                                 >resources



 

rbaybayan

  • Full Member
  • ***
  • Posts: 54
Re: Creating popup window / opening a lightbox
« Reply #12 on: February 09, 2010, 06:53:11 AM »

My apology,

I finally found the solution. It has to be relative to mediaplayer directory fo shadowbox.

MPete

  • Guest
Re: Creating popup window / opening a lightbox
« Reply #13 on: February 09, 2010, 07:25:44 AM »
yeah I'm not sure, I think relative to the video player within the shadowbox file?

I usually just set the path as /video/file.flv
If you start it with / it references the root directory (public_html or similar) no matter where the shadowbox, video player or megazine is. so then you can just find your video from your root directory so in your case:

/dir proj/dir video/fish.f4v

Not sure if the player plays f4v but should be OK I assume, you might need to update the jwplayer too.

rbaybayan

  • Full Member
  • ***
  • Posts: 54
Re: Creating popup window / opening a lightbox
« Reply #14 on: February 10, 2010, 02:42:25 AM »
Hi MPete,

The JW player works fine without any modification..