Fancybox thingie

Question

I just tried to display a flash file and an image with Fancybox.

To imagine about what am I talking, please take a look on the next snapshoot:

http://screencast.com/t/eUFh94lFz

Tasks:

• fancybox to be loaded automatically on pageload with the .swf file and the .jpg
• .swf file to be centered as it is also on the example above
• .jpg file to be positioned on the right bottom of the screen/page

Partially i succeeded.

I created a hidden link:

<a href="media/test_video.swf" id="flash-video" style="display:none"></a>

Then i called it through Jquery command:

<script type="text/javascript">$(document).ready(function() {
    $("#flash-video").fancybox(
    {
        'padding'               : 0,
        'autoScale'             : false,
        'padding'               : 0, 
        'margin'                : 0, 
        'easingIn'              : 'swing',
        'easingOut'             : 'swing',
        'transitionIn'          : 'fade',
        'transitionOut'         : 'fade',
        'hideOnContentClick'    : true,
        'speedIn'               : 600,
        'speedOut'              : 200,
        'overlayShow'           : true
    }
    ).trigger('click');
});

I created also a hidden link for the image, but it is not displayed on the Fancybox overlay.

<a href="media/bottom-r-img.jpg" id="flash-video" style="position:absolute;right:5px;bottom:5px;"></a>

Can this be done, to show up 2 media files on a fancybox overlay at the same time?

Any positive answer is well apreciated :)

Thank you.

Answer 1

First, you can't have duplicated IDs in your HTML code. Second, fancybox can only display one thing at a time.

I would suggest to hide your flash + image inline and to use the inline loader, or to load the content from a different URL using the iframe loader.