I am new in Jquery and fancyBox v.2 (fancyApps) and need some clarifications:
1) What is the function/purpose of fancyBox media helper and the difference if I use e.g. fancyBox iFrame feature e.g. youtube(iframe)?
$(document).ready(function() {
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
<a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas autoplay=1">Youtube (iframe)</a>
2) Beside linking the following js in the header, do I need addtional css file?
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
Thanks
The explanation and use in the js file itself. It allows you have any anchor targeting the most common media formats like
<a class="fancybox" href="http://www.youtube.com/watch?v=opj24KnzrWo">open youtube</a>
...using a simplified custom script like
$(".fancybox").fancybox({
helpers : {
media : {}
}
});
(no type, dimensions, or complex replace
functions within the script)
The supported formats (inside the href
attribute) are:
* Youtube
* http://www.youtube.com/watch?v=opj24KnzrWo
* http://youtu.be/opj24KnzrWo
* Vimeo
* http://vimeo.com/25634903
* Metacafe
* http://www.metacafe.com/watch/7635964/dr_seuss_the_lorax_movie_trailer/
* http://www.metacafe.com/watch/7635964/
* Dailymotion
* http://www.dailymotion.com/video/xoytqh_dr-seuss-the-lorax-premiere_people
* Twitvid
* http://twitvid.com/QY7MD
* Twitpic
* http://twitpic.com/7p93st
* Instagram
* http://instagr.am/p/IejkuUGxQn/
* http://instagram.com/p/IejkuUGxQn/
* Google maps
* http://maps.google.com/maps?q=Eiffel+Tower,+Avenue+Gustave+Eiffel,+Paris,+France&t=h&z=17
* http://maps.google.com/?ll=48.857995,2.294297&spn=0.007666,0.021136&t=m&z=16
*
BTW, you don't need any additional CSS file, just use it as indicated above.