4 Replies Latest reply on Feb 28, 2014 9:07 AM by Matbathome

    Shadowbox revisited

    Matbathome Level 1

      I'll start off by saying that I don't understand how to call an external javascript into Animate. I know how to load, I just don't know how to call it.


      I got Fancybox.js to work with Animate. I thought it would be easy to get Shadowbox.js to work, just by swapping out the code I used for Fancybox. Here's what I currently have in the compositionReady:


      $('<script type="text/javascript" src="js/shadowbox.js?v=3.0.3"></script>').appendTo("#Stage");

      $('<link rel="stylesheet" type="text/css" href="css/shadowbox.css?v=3.0.3" media="screen" />').appendTo("#Stage");


      When you click on an object, this is the code I have that is supposed to launch Shadowbox:




      type: 'iframe',

      href : 'http://player.vimeo.com/video/69182633?autoplay=1',

      width : 960,

      height : 540,





      href : 'img/700700.png',

      title : '800 x 800'


      ], {

      padding : 0


        • 1. Re: Shadowbox revisited
          Mücahit Çakır Level 1

          You can import external js by this way:


          I dont know how to adapt shadowbox into EA. I'm following this topic to learn how to do it.

          • 2. Re: Shadowbox revisited
            Matbathome Level 1

            I know how to do that part, to import. I just don't know what to do after that. How do I call anything in that imported file?

            • 3. Re: Shadowbox revisited
              Matbathome Level 1

              Here is how you do it. Put this in compostionReady:

              $('<script type="text/javascript" src="js/shadowbox.js"></script>').appendTo("#Stage");

              $('<link rel="stylesheet" type="text/css" href="css/shadowbox.css" media="screen" />').appendTo("#Stage");



              var shadowElement = sym.lookupSelector('_nameofsymbol');

              $(shadowElement).append($('<a style="display:block;width:100%;height:100%;" rel="shadowbox[Gallery];height=500;width=800" href="addurlhere.html" /> '));



              var shadowElement = sym.lookupSelector('_anothernameofsymbol');

              $(shadowElement).append($('<a style="display:block;width:100%;height:100%;" rel="shadowbox[Gallery]" href="img/nameoffile.jpg" />'));




                  // a darker overlay looks better on this particular site

                  overlayOpacity: 0.8,

                  counterType: "skip"

                  // setupDemos is defined in assets/demo.js



              Make sure all the Shadowbox core files are in the right folders.

              • 4. Re: Shadowbox revisited
                Matbathome Level 1

                FYI, my answer came from Justin Allen. He has a fantastic blog. He hasn't updated the blog since he sent me this answer, but he said he'd probably do it for Shadowbox.