This discussion is archived
10 Replies Latest reply: Jun 29, 2011 3:29 AM by Mindmap RSS

Fancy Box

Mindmap Pro
Currently Being Moderated
Hi guys,

I am wondering whether any one can spare sometime and explain how can we utilize Fancybox in APEX 4.0.2. Really, I would highly appreciate doing that in details

http://fancybox.net/

Best Regards,
Fateh
  • 1. Re: Fancy Box
    suhaibeg Newbie
    Currently Being Moderated
    hey,

    why do not you go through sample application in Apex 4.0




    Suhaib
  • 2. Re: Fancy Box
    Mindmap Pro
    Currently Being Moderated
    Thanks,

    I have never seen Fancy Box in the Sample Application. Perhaps you can tell me where exactly Fancy Box is used in the Sample Application.

    Best Regards,
  • 3. Re: Fancy Box
    fac586 Guru
    Currently Being Moderated
    I am wondering whether any one can spare sometime and explain how can we utilize Fancybox in APEX 4.0.2. Really, I would highly appreciate doing that in details
    What kind of details? Do you have a specific problem with the How To instructions provided?

    Implementing 3rd party plug-ins and libraries is dependent on more than your APEX version. To get a fast and accurate response to your questions, you must provide full information in the initial post:

    <li>Full APEX version
    <li>Full DB version, edition and host OS
    <li>Web server architecture (EPG, OHS or APEX listener) and host OS
    <li>Browser(s)/version(s) used
    <li>Theme
    <li>Templates
    <li>Region type(s)
  • 4. Re: Fancy Box
    Mindmap Pro
    Currently Being Moderated
    Thanks Fac,

    Actually, I do not know how or where to use the information in "How To" Page in APEX.
    I am thinking of using this feasible tool in IR. I have a report that contains information of apartments,
    and there is "Video" Column that contains links of Videos on Youtube. Namely, when an end user clicks on a link he will see the video in Fancy Box.

    If you do not have time to teach me this, perhaps you can direct me to some documentations.

    Best Regards,
    Fateh
    Full APEX version
    Application Express 4.0.2.00.08
    Full DB version, edition and host OS.
    Oracle Database 11g Express Edition Release 11.2.0.2.0 - Beta
    PL/SQL Release 11.2.0.2.0 - Beta
    CORE 11.2.0.2.0 Production
    TNS for 32-bit Windows: Version 11.2.0.2.0 - Beta
    NLSRTL Version 11.2.0.2.0 - Production
    OS Win 7
    Web server architecture (EPG, OHS or APEX listener) and host OS
    APEX Listener Release 1.1.2
    OS Win 7
    Browser(s)/version(s) used
    Google Chrome 12.0.742.100
    Theme
    Builder Blue 2
    Templates
    Sorry, but I have not study this topic yet
    Region type(s)
    Interactive Report

    Thanks,
  • 5. Re: Fancy Box
    fac586 Guru
    Currently Being Moderated
    Are you still interested in using this? I've played with it for a few hours and it looks good.
    Actually, I do not know how or where to use the information in "How To" Page in APEX.
    I am thinking of using this feasible tool in IR. I have a report that contains information of apartments,
    and there is "Video" Column that contains links of Videos on Youtube. Namely, when an end user clicks on a link he will see the video in Fancy Box.
    This certainly appears feasible, and I think that it's simpler and gives better results than you achieved via the +{thread:id=2240539}+ thread.
    If you do not have time to teach me this, perhaps you can direct me to some documentations.
    Think it would be more a joint exploration than a tutorial as I've just picked it up myself. The documentation appears to be minimal: just what's on that site.

    It threw me for a loop on Sunday as it wouldn't display images. I wasted quite a bit of time because the browser was reporting that APEX was transferring image files with the wrong MIME type and I thought that was the problem. Then found item 6 in the FAQ and discovered that the MIME types weren't the problem&mdash;Fancybox couldn't guess what the APEX BLOB/application process URLs were serving. Worked as soon as the content type was set manually to <tt>image</tt>.
    Full APEX version
    Application Express 4.0.2.00.08
    Full DB version, edition and host OS.
    Oracle Database 11g Express Edition Release 11.2.0.2.0 - Beta
    PL/SQL Release 11.2.0.2.0 - Beta
    CORE 11.2.0.2.0 Production
    TNS for 32-bit Windows: Version 11.2.0.2.0 - Beta
    NLSRTL Version 11.2.0.2.0 - Production
    OS Win 7
    Web server architecture (EPG, OHS or APEX listener) and host OS
    APEX Listener Release 1.1.2
    OS Win 7
    Browser(s)/version(s) used
    Google Chrome 12.0.742.100
    Theme
    Builder Blue 2
    Don't think I can be of much detailed help on the deployment side: I run OS X and Linux using OHS. (Never even seen Windows 7...)

    What web server/container are you running APEX Listener in?
    Templates
    Sorry, but I have not study this topic yet
    Region type(s)
    Interactive Report
    Works fine with Interactive Reports.
  • 6. Re: Fancy Box
    Mindmap Pro
    Currently Being Moderated
    Hi Fac,

    Are you still interested in using this?
    Indeed, it is a very professional way to display Videos & images. I am very interested in it.
    Displaying a video is the final task in my application. looking forward to receiving help.

    If you think that it is a long process, maybe you can give me a hand in this thread:

    Column  Link
    OR,
    Dialog Region

    Best Regards,
    Fateh
  • 7. Re: Fancy Box
    fac586 Guru
    Currently Being Moderated
    Sorry for the delay in getting back to you on this. Been having internet connection problems this week.
    Actually, I do not know how or where to use the information in "How To" Page in APEX.
    What do you have difficulty with:

    (1) Downloading/installing/configuring the Fancybox distribution?
    (2) Implementing it in your app/report?

    As I said above, I can't help much with (1) as I have no experience with your set-up. You should ask on the {forum:id=858} forum about this.

    For (2):

    Go to one of your YouTube videos. Click the Share button, then the Embed button. If you're using YouTube as the source of your video content then the <tt>iframe</tt> code shown is the best way to get it into pages on your app. (The <tt>object/embed</tt> approach in +{thread:id=2240539}+ is more suited for content held on your own server.)

    We need to get Fancybox to generate that <tt>iframe</tt> when we click on a link, which is quite straightforward.

    I've got a simple demo app that shows this, but shoe-horning Fancybox into sort-of-working without filesystem access on apex.oracle.com takes a bit of doing. If you post login details for your apex.oracle.com workspace I'll set it up there for you to take a look.
  • 8. Re: Fancy Box
    Mindmap Pro
    Currently Being Moderated
    Great, really I cannot thank you enough Fac.

    workspace: somefeto
    username: somefeto@gmail.com
    Password: Cis12!

    Application: 49002 - SERIOUS
    user: dev
    pwd: dev
    Page 1

    Best Regards,
  • 9. Re: Fancy Box
    fac586 Guru
    Currently Being Moderated
    Great, really I cannot thank you enough Fac.
    No problem, I was well overdue a look at some of these jQuery pop-ups.

    I've created an instance of the demo app in your workspace. It works as follows:

    1. Download and unzip the Fancybox distribution to the required location on your webserver, and perform any required server configuration (I created a <tt>fancybox</tt> virtual directory on OHS.)

    2. Reference the Fancybox JS and CSS files in the headers of all the required page templates:
    <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>
    <script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
    (This is mangled in the demo to get it working on apex.oracle.com using <tt>#WORKSPACE_IMAGES#</tt> and <tt>#APP_IMAGES#</tt>. This is how not to do it. Make the effort to install it properly so the plugin works efficiently and securely.)

    3. As described in the Fancybox How-To (step 4), create a link to the content to be displayed. In this case it's a link column in the APEX interactive report, based on the YouTube video ID column in the table (<tt>YOUTUBE_URL</tt>). The Column Link properties are:

    Link Text: YouTube
    Target: URL
    URL:
    http://www.youtube.com/embed/#YOUTUBE_URL#?autoplay=1
    4. Again, as described in the Fancybox How-To (step 5), fire the plugin on page load using a jQuery selector. In this case the jQuery code is in the JavaScript: Execute when Page Loads page attribute, but you could use a Dynamic Action that executes on page load:
    $(document).ready(function() {
      $('td[headers="YOUTUBE_URL"] a').fancybox({
        'type'          : 'iframe',
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic',
        'speedIn'       : 300, 
        'speedOut'      : 300
      });
    });
    This is using a jQuery Attribute Equals selector to bind the jQuery plugin to links in the report that are in table cells with a <tt>headers="YOUTUBE_URL"</tt> attribute, and specifies that the linked content is to be shown as an <tt>iframe</tt> (as discussed in connection with YouTube in post above), with animated transitions when the video is shown and hidden.
  • 10. Re: Fancy Box
    Mindmap Pro
    Currently Being Moderated
    Thanks Fac,

    It worked out. I greatly appreciate all what you have done for me.

    Best Regards,
    Fateh

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points