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

xeeya

  • Guest
Re: Creating popup window / opening a lightbox
« Reply #15 on: March 29, 2010, 06:23:21 AM »
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

  • Guest
Re: Creating popup window / opening a lightbox
« Reply #16 on: March 29, 2010, 06:32:15 AM »
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

  • Newbie
  • *
  • Posts: 12
Re: Creating popup window / opening a lightbox
« Reply #17 on: March 31, 2010, 03:51:00 PM »
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

« Last Edit: March 31, 2010, 07:19:07 PM by kelvin.cushman »

Florian Nücke

  • κρύα πόδια
  • Administrator
  • Hero Member
  • *****
  • Posts: 1979
  • MegaZine3 Developer
    • MegaZine3
Re: Creating popup window / opening a lightbox
« Reply #18 on: April 04, 2010, 05:42:04 PM »
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).
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.

kelvin.cushman

  • Newbie
  • *
  • Posts: 12
Re: Creating popup window / opening a lightbox
« Reply #19 on: April 04, 2010, 10:36:17 PM »
Hi Guys found the answer to add lightbox to actionscript3 AS3 in a SWF

Quote
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!");
}
}

Quote
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

  • Newbie
  • *
  • Posts: 12
Re: Creating popup window / opening a lightbox
« Reply #20 on: April 04, 2010, 11:00:25 PM »
OK IM A LITTLE STUCK??
Quote
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
« Last Edit: April 05, 2010, 12:40:40 AM by kelvin.cushman »

b3us

  • Newbie
  • *
  • Posts: 3
Re: Creating popup window / opening a lightbox
« Reply #21 on: September 23, 2010, 12:19:54 PM »
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

  • Newbie
  • *
  • Posts: 3
Re: Creating popup window / opening a lightbox
« Reply #22 on: October 25, 2010, 11:01:14 AM »
But that's slower because of the wmode: "transparent"...

ill-stronzo

  • Newbie
  • *
  • Posts: 4
Re: Creating popup window / opening a lightbox
« Reply #23 on: November 09, 2010, 06:00:19 PM »
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

  • Jr. Member
  • **
  • Posts: 26
Re: Creating popup window / opening a lightbox
« Reply #24 on: December 23, 2010, 02:44:34 PM »
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

  • Jr. Member
  • **
  • Posts: 26
Re: Creating popup window / opening a lightbox
« Reply #25 on: January 05, 2011, 02:59:16 PM »
is there a way to load an external swf into the shadowbox?

Thank you

Cy

Arnaud

  • Newbie
  • *
  • Posts: 1
Re: Creating popup window / opening a lightbox
« Reply #26 on: February 02, 2011, 09:40:08 PM »
MPete and Kelvin, you were very helpfull. Thanks a lot for your posts !  :D

kelvin.cushman

  • Newbie
  • *
  • Posts: 12
Re: Creating popup window / opening a lightbox
« Reply #27 on: March 02, 2011, 02:10:07 PM »
All Credit to MPete but thank you for your comment :) :) :) :) :) :P

cduncan

  • Newbie
  • *
  • Posts: 18
Re: Creating popup window / opening a lightbox
« Reply #28 on: September 08, 2011, 08:21:39 PM »
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

  • Newbie
  • *
  • Posts: 2
Re: Creating popup window / opening a lightbox
« Reply #29 on: January 09, 2012, 06:37:35 AM »
Hello everybody! I have one question: How do you add links as javascript in my pdf document?