Recently, I attempted to showcase a flash file and an image using Fancybox.
If you want to visualize what I am referring to, please refer to the screenshot below:
Objectives:
- Automatically load Fancybox on page load with both the .swf file and the .jpg file
- Center the .swf file similar to the example above
- Position the .jpg file in the bottom right corner of the screen/page
I was able to achieve partial success.
To accomplish this, I first created a hidden link:
<a href="media/test_video.swf" id="flash-video" style="display:none"></a>
Then, I invoked it using a 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');
});
Additionally, I created a hidden link for the image, but unfortunately, it doesn't display on the Fancybox overlay.
<a href="media/bottom-r-img.jpg" id="flash-video" style="position:absolute;right:5px;bottom:5px;"></a>
Is it possible to show two media files simultaneously on a Fancybox overlay?
Any positive feedback is greatly appreciated :)
Thank you.