8 Replies Latest reply on Feb 10, 2016 4:31 PM by fanan

    Adobe Animate and Fancybox plugin problem

    sbest58

      I am trying to get the Fancybox plugin working with animate but I can only get individual images to display.

      How can I add: rel="gallery" to the individual edge div elements that are the thumbnails for the lightbox slideshow?

       

      Here is the code so far:

      Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {

         $('<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.1"></script>').appendTo("#Stage" );

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

       

         sym.$("Rectangle").fancybox({

                   href: 'images/slides/1_Landscape.jpg',

                   title : 'Title1'

         });

         sym.$("Rectangle2").fancybox({

                   href: 'images/slides/2_Landscape.jpg',

                   title : 'Title2'

         });

       

      });

        • 1. Re: Adobe Animate and Fancybox plugin problem
          heathrowe Most Valuable Participant

          Just before your sym.$("Rectangle")......section, try this

           

          $(function() { 

                      $("div").attr("rel', "gallery");

                                                                

                   });

           

          Darrell

          • 2. Re: Adobe Animate and Fancybox plugin problem
            sbest58 Level 1

            Thank you Darrell, that is the perfect answer to my question.

            It adds rel="gallery" to the rectangle divs, (and every other div but that is easy to filter out).

            Unfortunatly Fancybox does not seem to recognise the 'rel' attribute inside a <div>, maybe its looking for an <a> tag.

            • 4. Re: Adobe Animate and Fancybox plugin problem
              xROYOSTIx

              is it possible to show how u fixed it?

               

               

              I have a symbol with multiple thumbnails in it

              on every thumbnail there is a clickevent with the code:

               

              $.fancybox({

                  href: 'images/rood.png',

                  openEffect:'elastic',

                  closeEffect:'elastic',   

              });

               

              i tried to use

              $("div").attr("rel","gallery");

              $("thumbnailWithClickEvent").attr("rel","gallery");

               

              but that doesn't seem to do the job

              • 5. Re: Adobe Animate and Fancybox plugin problem
                sbest58 Level 1

                Hi,

                For the thumbnails I first create an array and a function:

                 

                var group = [

                          {

                               href : 'images/1.jpg',

                               title : 'Whatever'

                          },

                          {

                               href : 'images/2.jpg',

                               title : 'Whatever'

                          },

                          {

                               href : 'images/3.jpg',

                               title : 'Whatever'

                          },

                 

                ]

                 

                function open_fancybox(index){

                     $.fancybox.open(

                          group,

                          {

                               index: index,

                               padding : 0

                                    }

                          );

                }

                 

                 

                Then for each thumbnail a click event:

                 

                open_fancybox(0);

                 

                 

                Hope this helps

                Steve

                 

                 

                open_fancybox(1);

                 

                 

                open_fancybox(2);

                • 6. Re: Adobe Animate and Fancybox plugin problem
                  xROYOSTIx Level 1

                  Thanks, it works perfect! U just made my day.

                   

                  When i see your code now, it looks so easy... but I lost about 2 days on it

                   

                  Merry christmas & a happy new year

                  • 7. Re: Adobe Animate and Fancybox plugin problem
                    sbest58 Level 1

                    You are very welcome,

                     

                    Happy Christmas and have a great 2013

                    • 8. Re: Adobe Animate and Fancybox plugin problem
                      fanan

                      I know this post is kinda old .. but I have similar problem
                      I want to use fancybox for my gallery with thumbnails at the bottom
                      here are my codes

                       

                      at the compision ready I pasted this:

                       

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

                       

                      I draw a rectangle and on the "Click event" I pasted this:

                       

                      $.fancybox.open([

                      {

                      href : 'images/w1.jpg',

                      title : '600 x 600'

                      },

                      {

                      href : 'images/w2.jpg',

                      title : '800 x 800'

                      }

                      ], {

                      padding : 0

                      });

                       

                      Now the gallery is working fine .. but I want to use "helpers" to add thumbnails at the bottom of the gallery

                      What should I do? and where shall I paste the codes for it?

                      I am using fancybox v2.1.4

                       

                      Hope to hear from you soon

                      Thanks!