Creating popup window / opening a lightbox

[xeeya]

Hello,

I searched in google for a lightbox modification and finally found a solution here. Thanks a lot, it works very fine.

But I got one question: Is it possible to use megazine-book inside a iframe and also have the lightbox-function? I want to include the book inside an already existing webpage-layout. The easiest way is to make an iframe and call an external file for the megazine-book. Of course the lightbox-function does not work in this case, but is there a way to archive this?

Hope you can help me

greetings
Michael

[MPete]

Of course the lightbox-function does not work in this case, but is there a way to archive this?

I would assume the lightbox would still work fine as long as the javascript files are being loaded in that iframe - the thing that wouldn't work is the lightbox loading outside of the iframe - it would load inside it. So you would need to change your link target for the javascript links to "_top" or "_parent" so they send the javascript command to load the lightbox to the main window instead of the iframe. OR you could redirect teh javascript from the iframe to the parent.

[kelvin.cushman]

Wonder if anyone can help me? im trying to call the lightbox function, in AS2 this would be done like this am i right?:-

on (press)
{
    getURL("javascript:loadLink(\'youtube\',\'http://www.youtube.com/watch/v/rE3hle3FoTE\')", "_parent");
}

But how can i call it in Flash CS4 AS3? can someone help me please...

PS could i use getURL?? ive been yrying to ude this but with errors

myButton.addEventListener(MouseEvent.CLICK, onMouseClick);

function onMouseClick(e:MouseEvent):void
{
var request:URLRequest = new URLRequest("javascript:loadLink(\'youtube\',\'http://www.youtube.com/watch/v/rE3hle3FoTE\')", "_parent");
}




Regards

Kelvin C

[Florian Nücke]

If you have some AS2 experience, have a look at this site to get started with AS3:
http://www.adobe.com/devnet/actionscript/as3_migration_table.html

Try using the navigateToURL method (which replaces getURL).

[kelvin.cushman]

Hi Guys found the answer to add lightbox to actionscript3 AS3 in a SWF

just add this script to the actions in cs4:-

youtube.addEventListener(MouseEvent.CLICK, myBtnClicked);
function myBtnClicked(e:MouseEvent):void {
var url:String = "javascript:loadLink(\'youtube\',\'http://www.youtube.com/watch/v/rE3hle3FoTE\')"
var request:URLRequest = new URLRequest(url);
try {
navigateToURL(request, '_parent');
} catch (e:Error) {
trace("Error occurred!");
}
}

GREEN IS THE LIGHTBOX CALL FUNCTION "IN THIS CASE ITS YOUTUBE"
RED IS THE BUTTON INSTANCE NAME

I HOPE THIS HELPS SOMEONE

KELVIN C. ALL CREDIT TO MPETE.

[kelvin.cushman]

OK IM A LITTLE STUCK??

I NOW NEED TO ADD LOAD SWF ON PAGE TURN I HAVE LOOKED AT THE WIKI BUT HOW CAN I IMPLEMENT THIS INTO THE AS3 CODE ABOVE

Start when main page

To start the SWF when the containing page side becomes the main page (i.e. it is not only visible, but the current "main" page, i.e. the page visible if no page is dragged):

import de.mightypirates.megazine.interfaces.*;
import de.mightypirates.megazine.events.*; //< additionally.
stop();
 
var pageNumber:int;
 
function megazineSetup(megazine:IMegaZine, pageside:IPageSide):void {
    pageNumber = pageside.number + (pageside.number & 1); // get even number of the double page this page side belongs to
    megazine.addEventListener(PageChangeEvent.PAGE_CHANGE, handlePageChange, //< event string is "page_change"
        false, 0, true); //< avoid memory leaks
}
 
function handlePageChange(e:PageChangeEvent):void {
    if (e.newPage == pageNumber) {
        // Now main page
        start();
    } else if (e.oldPage == pageNumber) {
        // No longer main page (remove this if unneeded).
        stop();
    }
}
but I KEEP getting errors

function megazineSetup(megazine:IMegaZine, pageside:IPageSide):void {
function megazineSetup(megazine:IMegaZine, pageside:IPageSide):void {
function handlePageChange(e:PageChangeEvent):void {

What am i doing wrong? PLEASE HELP

[b3us]

Hello the community !
Thanks for your sharing of information and sorry for my English, I'm french...

So I found how to let the book visible behind the shadowbox :
- add ' wmode: "transparent" ' to the params of the shadowbox (in the index.html)
- switch off the background color of the  ' body, html { ' of the style.css of the megazine
- Change this line:
troubleElements: ['select', 'object', 'embed', 'canvas']
To this:
troubleElements: ['select', 'canvas']
in the shadowbox.js

Here it is !

[b3us]

But that's slower because of the wmode: "transparent"...

[ill-stronzo]

I'm really stuck.. i try my best to understand this whole topic, but this just eludes me.

i have my megazine fine and running. now i want to add streamed videos with the lightbox.
how do i achieve this? i am really sorry for this, but i would really love a step-to-step guide.

so far i added the shadowbox folder as well als jquery and js files to my mainfolder.
i also added the <script> lines to my index and all the same plugins as in the example *.mz3.

did i miss something?

now, how do i call the function? obviously not like this, cause it doesn't work...

Code: [Select]

<area left="195" top="569" width="96" height="37" url="javascript:loadLink('test','http://google.com') " overlay="none"/>
some replies earlier, there was something about action script. do i have to alter the flashfiles?

i really appreciate your help with this!

[cyprus]

The solution you offer is brilliant but I can´t get it working.
Maybe you can give me a hint about my mistake.
After many tries I sorted the filetree like yours just to prevent a path mistake.
I prepared a pdf with links
like you said in the last version I copied your links to Acrobat where I build an area with a weblink.
Then I took the batch prozess from megazine an converted the pdf to swf files.
If I now open the megazine it looks fine. I can go over the linked area and get a hand cursor.
But if I click on it nothings happen.
I implemented the page01.swf too and it works fine. So I start to believe I made a mistake in the Acrobat but I ain´t got no clue what I´m doing wrong. Is there anything special I missed to do or implement.

My index.html

Code: [Select]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>MegaZine3 PageFlip Book </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" href="style.css" rel="stylesheet" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfaddress.js"></script>
<script type="text/javascript" src="megazine/megazine.js"></script>
<script type="text/javascript">
//<![CDATA[
var flashvars = {

xmlFile: "megazine.mz3" ,

//wmode: "transparent"
/* When set to true, log messages are printed to the JavaScript console (using the console.log() function) */
//logToJsConsole: "true"
};
var params = {
/* This must be the same as the ID of the HTML element that will contain the Flash element. */ 
menu: "false",
/* Necessary for proper scaling of the content. */
scale: "noScale",
/* Necessary for fullscreen mode. */
allowFullscreen: "true",
/* Necessary for SWFAddress and other JavaScript interaction. */
allowScriptAccess: "always",
/* This is the background color used for the Flash element. */
bgcolor: "#ffffff"
};
var attributes = {
id: "megazine"
};
swfobject.embedSWF("megazine/preloader.swf", "megazine", "100%", "100%", "9.0.115", "js/expressInstall.swf", flashvars, params, attributes);
//]]>
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

/*<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>*/
/*<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />*/

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div id="megazine">
<h1>MegaZine3 requires FlashPlayer 9</h1>
<p><a href="http://get.adobe.com/flashplayer/"><img src="http://www.adobe.com/images/shared/download_buttons/get_adobe_flash_player.png" alt="Get Adobe Flash player" /></a></p>
       <p>Please try the above link first. If you still encounter problems after installing the Flash Player, try this one:</p>
       <p><a href="http://get.adobe.com/shockwave/"><img src="http://www.adobe.com/images/shared/download_buttons/get_adobe_shockwave_player.png" alt="Get Adobe Shockwave Player"/></a></p>
<p><a href="http://megazine3.de/">Powered by MegaZine3</a></p>
</div>
</body>
</html>

And the megazine.mz3

Code: [Select]

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE book SYSTEM "http://megazine3.de/megazine2.dtd">
<!-- Hier beginnt die Buch-Definition. Alle Buch-Parameter werden hier definiert -->
<!-- Auch die Plugins muessen hier aufgelistet werden -->
<!-- Auch der Lizenzschluessel (bei kommerziellem Einsatz) mass als Parameter eingegeben werden: licensekey="1234licensekeynumer890"  -->
<book plugins="console, keyboardnavigation, navigationbar, links, swfaddress, pdflinks, anchors, zoom, index , batchpages, bookmarks , googleanalytics, gallery, elementids, javascript overlays,"
    gaaccount="UA-20219102-1" gatrackevent="buttonClicked,Outgoing,{url}"
     pagewidth="528" 
     pageheight="764" 
errorlevel="WARNUNG"
     thumbloadtext="Einen Moment"
     thumbloadtextsize="12"
zoomminscale="0.25"
zoommaxscale="2.0"
zoomsnap="0.25,0.5, 0.75, 1.0, 1.5, 2.0, 3.0, 4.0"
zoomsteps="4"
dragrange="30"
maxloaded="6"
qualitycontrol="true"
thumbscale="0.35"
     elementsfadein="false"
cornerhint="false"
pagethickness="0.13"
shadows="0.6"
startpage="1"
centercovers="true"
pageoffset="0"
sameappdomain="true"
samesecdomain="true"
>


<!-- Batch begin -->
  <chapter
         pages="scale('../pages/page_l{{num}}.swf');
         count(1,4);
  settings(true, true, true, true, true)">
</chapter>

<chapter>
<page>
<!--<img height= "764" width ="528"  src= "../fuer_mich/01/de/pages/page01.swf"/>-->
<img height= "764" width ="528"  src= "../pages/page_l5.swf"/>

</page>
<page>

<img height= "764" width ="528"  src= "../pages/page_l6.swf"/>

</page>
</chapter>

<chapter
pages="scale('../pages/page_l{{num}}.swf');
         count(7,57);
         settings(true, false, false, false, false)">
<!-- batch end -->
  </chapter>
</book>

Any hint is welcome

Merry christmas

[cyprus]

is there a way to load an external swf into the shadowbox?

Thank you

Cy

[Arnaud]

MPete and Kelvin, you were very helpfull. Thanks a lot for your posts ! 

[kelvin.cushman]

All Credit to MPete but thank you for your comment

[cduncan]

I just ran into a new problem that doesn't seem to be covered in this topic.
I've been using the shadowbox system that MPete helped us out with last year (Feb 4, 2010). The Megazine that he set up as a demo is at http://www.pacraig.com/megazine/lightbox/.
Most of the links in that demo are no longer available, but the one for Youtube is still good. But the code no longer works correctly. It just takes you to the www.youtube.com site.

The fix that I found was to replace /watch/ with /embed/
So
javascript:loadLink('youtube','http://www.youtube.com/watch/v/rE3hle3FoTE')
becomes
javascript:loadLink('youtube','http://www.youtube.com/embed/v/rE3hle3FoTE')

I've used it to show my students the Ultra Deep Field in 3D video at http://www.dl.ket.org/ePhysics/ap-hon.html#/pdfdownloads

[valentinperciun]

Hello everybody! I have one question: How do you add links as javascript in my pdf document?