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:

       

      $.shadowbox.open([

      {

      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:

          http://i.imgur.com/ZtVmUkP.png

          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" />'));

               

               

              Shadowbox.init({

                  // 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.

                 

                http://businessanywhere.biz/blog/2013/03/adding-a-lightbox-to-edge-animate/