Adding a Lightbox to Edge Animate

Today I have posted a new video on how to add a lightbox to Edge Animate.  Click on the next link to download these files. FancyBox with Animate I have updated the files and you can download them here. FancyBox with Animate – Updated

  1. The first step that you need to do is to save your thumbnail files and your larger files for the web.  You need to make sure to do this, so your website will load quickly for your viewers.
  2. The next step is drop your thumbnail images on your stage in Edge Animate.
  3. You can then arrange your files in the order that you could like and position them how you want them to look.  The neat thing about Edge Animate is it allows you to position your files however you would like and it takes care of the margins and padding.  This is still new so if you are working on RWD (responsive web design) then you will need to adjust it more to make your objects flow correctly.
  4. After you have arranged your files, you will need to link your css and javascript files for the FancyBox.  I have place a link to the files above.  You will do this by clicking on the stage and then clicking on the open actions button to the right.  You will need to click on the compositionready action and paste the following code:

    $(‘<script type=”text/javascript” src=”js/jquery.fancybox.js?v=2.1.4″></script>’).appendTo(“#Stage”);
    $(‘<link rel=”stylesheet” type=”text/css” href=”css/jquery.fancybox.css?v=2.1.4″ media=”screen” />’).appendTo(“#Stage”);

  5. If you decide to download a newer version of the FancyBox Code, then make sure to change your version number in the code above.
  6. Next you will need to click on the first image, and click on the open actions.
  7. In the open actions select the click action and paste in the code below.

    $.fancybox({

    href: ‘.jpg’,
    openEasing: ‘swing’,
    arrows: false,
    openEffect:’elastic’,
    closeEffect:’elastic’,
    autoSize: true,
    title : ‘ ‘,
    helpers: {
    title : {
    type : ‘over’
    }
    }
    });

  8. You will need to update the href to have the path of the larger file (i.e. img/600600.jpg) and if you want a title then add it in the title (i.e. 600 x 600 Image).
  9. After this you should save you file, and preview.

Get a Trackback link

18 Comments

  1. Andrea, April 5, 2013:

    Hi Justin.

    Great tutorial. Just a question. If I want to scroll over the gallery with left and right arrows, what should I do? Cos when I added “nextClick: true,”, it doesn’t work.

    Help? thanks so much!

  2. juscook10, April 6, 2013:

    The way Edge Animate works is a little different then the way fancybox handles links. You aren’t encapsulating your image in a link and that is how it handles linking from one image to the next. The only work-around that I have found so far is to hard code each link in the onclick for each image. I have put the code below. Thank you for watching my blog, and I should have a new one up soon on how to make your animate file responsive.

    $.fancybox.open([
    {
    href : 'img/600600.jpg',
    title : '600 x 600'
    },
    {
    href : 'img/800800.jpg',
    title : '800 x 800'
    }
    ], {
    padding : 0
    });

  3. eypuff, May 22, 2013:

    hi. i was wondering what the coding would look like for youtube/vimeo videos. thanks for your help!

  4. juscook10, May 23, 2013:

    You need to add type : ‘iframe’, to your code like below. I hope that helps, and let me know if you have further questions.

    $.fancybox.open([
    {
    type: 'iframe',
    href : 'http://www.youtube.com/embed/6rcKD6eypEY?autoplay=1',
    title : '600 x 600'
    },
    {
    href : 'img/800800.jpg',
    title : '800 x 800'
    }
    ], {
    padding : 0
    });

  5. Richard, June 3, 2013:

    Hello
    I’d like to open an external URL/webpage in edge animate using a fancybox. Since the fancybox will contain a webpage instead of an image what would I need to add/import to the edge animate stage?

    Thanks,
    Richard

  6. juscook10, June 4, 2013:

    You would need to add the iframe. Here is the code that you would need.

    $.fancybox.open([
    {
    type: 'iframe',
    href : 'http://www.gabrielcook.com',
    title : 'gabrielcook.com'
    },
    {
    href : 'img/800800.jpg',
    title : '800 x 800'
    }
    ], {
    padding : 0
    });

  7. juscook10, June 5, 2013:

    Richard,
    To answer your question: I’m having a little trouble with the iFrame. It wont let me scroll thru the webpages after they are loaded. Would an AJAX call allow me to do that? if so, how do I use AJAX?

    I think that the only problem is the css for the arrows. Right now the width is set to 40%, so when you try to scroll with your mouse you are trying to scroll the arrow and not the page. If you change the width to 10% on line 113 of jquery.fancybox.css in the css folder I think it will fix your problem. Hopefully this helps and I have included the updated files in this post.

  8. Richard, June 6, 2013:

    Hi Justin:
    Maybe I’m doing something wrong, but I just realized that the lightbox in edge animate does not or will not open in firefox. Have you seen this before? Is there anything I can do to fix it?

  9. alex, July 14, 2013:

    great example and explanataion, goint to use on my site, thanks

  10. Co6aka, August 12, 2013:

    Hello! Ty wery match 4 your work! Very useful! But i have one question. In your Edge file with a sample everything works fine like Edge preview but dont work in html file (index.html). If i insert my edge animation on web page, lightbox isn’t work! :( Can you help with this issue?

  11. Co6aka, August 12, 2013:

    Doesn’t work just in chrome ! But if you now how to eliminate the problem, I will be very grateful.

  12. Ana, August 28, 2013:

    Hey, thank you for this awesome tutorial! It helped me a lot to complete a project for work, you’re awesome!

  13. juscook10, August 28, 2013:

    I am sorry that I missed this. It will only work in Chrome if it is on a web server due to the way that Chrome handles XML.

  14. Noah, September 4, 2013:

    This is awesome man… THANKS! A real life saver for me.

  15. Matt, February 21, 2014:

    Here’s the code I used for the stage:

    $(‘’).appendTo(“#Stage”);
    $(‘’).appendTo(“#Stage”);

    And here is the code I used on the “button” with a click state:
    $.fancybox.open([
    {
    type: 'iframe',
    href : 'http://www.youtube.com',
    title : '600 x 600'
    },
    {
    href : 'img/700700.png',
    title : '700 x 700'
    }
    ], {
    padding : 0
    });

    I did change to 700 x 700 and created a png. But that was the only change I did in the code. Perhaps because I’m using the newest Edge Animate?

  16. Matt, February 21, 2014:

    I think my stage code got changed in the comment. Here it is.

    “$(‘’).appendTo(“#Stage”);
    $(‘’).appendTo(“#Stage”);”

  17. Matt, February 21, 2014:

    Sorry, my code for the stage is getting stripped when I paste it into the comments. Basically, I copied and pasted exactly what you put.

  18. Matt, February 21, 2014:

    I got it to work. I think when I was copying and pasting your code from this site, it was getting screwed up somehow. But when I downloaded your file, and copy and pasted from your file, it worked.
    Now if I can get cookie detection to work on my homepage.

Leave a comment