5 Replies Latest reply: Jun 6, 2012 7:04 AM by fac586 RSS

    Image Gallery Using Jquery Fancy Box

    SriG
      Hi Everyone,

      I am new to Apex. Using Apex 4.1 on Oracle 10g. Now am working in a gallery application, For image viewer i trying to use Jquery Fancy Box.

      Am followed this site [http://saradesh.com/tajuddin/index.php/fancybox-in-apex-dynamic-report/] its working perfectly.

      What i want is when i click on image in interactive report i want open the image in fancy box and i want to navigate next and previous image.Can anyone help me on this.

      Thanks,
      Sri
        • 1. Re: Image Gallery Using Jquery Fancy Box
          jariola
          Hi,

          You need create dynamic action that fires after report refresh and set again Fancy Box.


          Regards,
          Jari

          -----
          My Blog: http://dbswh.webhop.net/dbswh/f?p=BLOG:HOME:0
          Twitter: http://www.twitter.com/jariolai
          • 2. Re: Image Gallery Using Jquery Fancy Box
            fac586
            >

            Please update your forum profile with a real handle instead of "891791".
            I am new to Apex. Using Apex 4.1 on Oracle 10g. Now am working in a gallery application, For image viewer i trying to use Jquery Fancy Box.

            Am followed this site [http://saradesh.com/tajuddin/index.php/fancybox-in-apex-dynamic-report/] its working perfectly.

            What i want is when i click on image in interactive report i want open the image in fancy box and i want to navigate next and previous image.Can anyone help me on this.
            It's straightforward to do this for the images shown in the currrent IR page. It would be much more complicated to do this for all of the images returned by the IR query, including those not visible on the current page.

            1. Create an image thumbnail column in the IR using the built-in BLOB support. If necessary size and style the thumbnail images using a style sheet in the page HTML Header:
            <style>
            #employees td[headers="PHOTO"] img {
              width: 40px;
              border: 1px solid #bbb;
              padding: 4px;
              background: #fff;
              cursor: pointer;
            }
            </style>
            2. Create a Dynamic Action to bind the Fancybox calls to the thumbnail images when the IR is refreshed.

            When

            Event: After Refresh
            Selection Type: Region
            Region: Gallery IR // whatever your region is

            True Actions

            Action: Execute JavaScript Code
            Fire On Page Load: Yes
            /*
              Wrap each thumbnail image in the link element required by Fancybox.
            
              The rel attribute enables the Fancybox gallery feature.
            
              (jQuery is used for this because it appears APEX does not provide a good way of making the BLOB
              into a link that references its source.)
            */  
            $('#employees td[headers="PHOTO"] img').wrap(function() {
              return '<a rel="employees" href="' + $(this).attr('src') + '" />';
            });
            /*
              Bind the required Fancybox call to the thumbnail links.
            */
            $('#employees td[headers="PHOTO"] a').fancybox({
              'type'          : 'image',
              'transitionIn'  : 'elastic',
              'transitionOut' : 'elastic',
              'speedIn'       : 300, 
              'speedOut'      : 300
            });
            3. Tweak the Fancybox options used for the required appearance and behaviour.
            • 3. Re: Image Gallery Using Jquery Fancy Box
              SriG
              Hi fac586,

              Thanks for your help. I changed my handle but still it showing the number only.

              Thanks,
              Sri
              • 4. Re: Image Gallery Using Jquery Fancy Box
                SriG
                Hi fac586,

                I need one more help, It is possible to show page item in fancy box image viewer.

                Thanks,
                Sri
                • 5. Re: Image Gallery Using Jquery Fancy Box
                  fac586
                  891791 wrote:

                  I need one more help, It is possible to show page item in fancy box image viewer.
                  This thread is closed. Post a new question, including as much relevant information as possible upfront. This should include:

                  <li>Full APEX version
                  <li>Full DB/version/edition/host OS
                  <li>Web server architecture (EPG, OHS or APEX listener/host OS)
                  <li>Browser(s) and version(s) used
                  <li>Theme
                  <li>Template(s)
                  <li>Region/item type(s)

                  and considerably more detail about what you want to do.

                  With APEX we also have a great resource in apex.oracle.com where we can reproduce and share problems. Reproducing things there is the best way to troubleshoot most issues, especially those relating to layout and visual formatting. If you expect a detailed answer then it's appropriate for you to take on a significant part of the effort by getting as far as possible with an example of the problem on apex.oracle.com before asking for assistance with specific issues, which we can then see at first hand.

                  This is an occasion when it would be appropriate to use apex.oracle.com. Fancybox is not part of standard APEX and it would be better for you to create an environment suitable for working on the problem rather than expecting others to install the plug-in from scratch.