I've setup a PHP video browser on a website (check videos pod) when a video thumbnail is clicked a video should popup and play with the FancyBox script, but instead the video just does not load. Why is this?
You are using fancybox v2.x with options for fancybox v1.3.x (they are not compatible with each other.)
Your best bet is to get rid of this script :
<script type="text/javascript">
$(".videobox").click(function () {
$.fancybox({
'padding': 0,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'title': this.title,
'width': 680,
'height': 495,
'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type': 'swf',
'swf': {
'wmode': 'transparent',
'allowfullscreen': 'true'
}
});
return false;
});
</script>
and try this instead :
<script type="text/javascript">
$(document).ready(function () {
$(".videobox").fancybox({
width: 680,
height: 495,
type: "iframe"
}); // fancybox
}); // ready
</script>
notice that we are using type : "iframe" because you are using youtube embed mode
SIDE NOTE: You are loading two versions of jQuery (1.7.1 and 1.7.2) when you actually need a single instance (ideally the latest version) to avoid unexpected errors.
Related
I have implemented Fancybox code in AngularJS and angularjs using "#" for creating their URLs. Fancybox working properly in all browser except IE11. Please see my code:
$(document).on('click','.iframePopup',function(){
var id_role = $(this).data('roleid');
$.fancybox.open([
{
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
type : 'iframe',
href : basePath + '#/getuser-list/'+id_role,
title : false,
iframe : {
preload : false
}
}
]);
});
Please suggest me any proper solution for that, so this fancybox open properly in IE11 as well.
Thanks in advance.
im trying to display inline using fancybox. but currently it pops up but displaying error "The requested content cannot be loaded. Please Try again later." . below is the code.
<script type="text/javascript">
jQuery(document).ready(function() {
$(".various").click(function() {
parent.$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'width' : 640,
'height' : 385,
'type' : 'inline'
});
return false;
});
});
</script>
and where i used fancybox
<a class="various" href="#inline3">Inline</a>
<div id="inline3" style="display:none;" ><img src="https://xxxxx" /></div>
FOUND A SOLUTION!
the thing is, i need to change type from inline to iframe. and also insert a 'href' string inside the javascript and remove the href from the link. and for the href value put in "this.href" ... and now it works.
ITs simple,
If the image is not loaded, it will happen,
Please check the image source in img tag then proceed.
$('.fancybox').fancybox({
autoSize : true,
autoResize : true,
autoDimensions : false,
padding: 25,
width : 630,
openEffect : 'elastic',
closeEffect : 'elastic',
type : 'iframe',
href :'Pass your url'
});
In my case, instead of using this.href, I passed url, and its working form me.
I have an iframe that's generated on-the-fly with the fancybox plugin. I want to get the clicked element inside of it and from that element get the src attribute but whenever I try I just get "undefined" as an answer.
what triggers the iframe creation is:
<a id="contentImageAJAX" class="iframe" href="/tools/images?keyword=cat" style="display:none;">g</a>
and
$('#contentImage').focus(function(){
var $contentImage = $('#contentImage');
$('a#contentImageAJAX').click().fancybox({
'width' : 1280,
'height': 600,
'centerOnScroll': true,
'hideOnContentClick' : true,
'onCleanup': function(){tryMe($contentImage);}
});
I found out that the iframe created is #fancybox-frame so I tried:
$('#fancybox-frame').load(function(){
$('#fancybox-frame').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
});
but it didn't work and "tryMe" is this function:
function tryMe($cImg){
console.log($('#fancybox-frame').contents().find('clickable').attr('src'));
}
I've been trying several iterations of this for hours any idea what am I missing?
The selector inside tryMe method is is wrong find('clickable'). I think you are looking for find('.clickable').
Try this
$('a#contentImageAJAX').click().fancybox({
'width' : 1280,
'height': 600,
'centerOnScroll': true,
'hideOnContentClick' : true,
'onCleanup': function(){parent.tryMe($contentImage);},
'onComplete': function(){
$('#fancybox-frame').contents().find('linkSelector').click(function(){
//Do you stuff here.
});
}
});
Hey im trying to implement fancybox 1.3.4 and I just cant get it to work
Heres my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery /1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>
<script src="/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<script src="/fancybox/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$(".image").fancybox();
/* Using custom settings */
$(".iframe").fancybox({
'hideOnContentClick': false
});
$("a[href$=.jpg],a[href$=.png],a[href$=.gif]").fancybox();
$(".youtube").click(function() {
$.fancybox({
'padding': 0,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'title': this.title,
'width': 680,
'height': 495,
'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type': 'swf',
'swf': {
'wmode': 'transparent',
'allowfullscreen': 'true'
}
});
return false;
});
This is the image I want fancybox to open. Presently it just shows up in a new tab.
I use firebug and I can see that every script and stylesheet loads.
<a class="image" href="http://localhost:2053/files/15-20/theme3/test%20Photo.jpg">test Photo</a>
I'm guessing this was just a cut & paste error, but I'm going to state the obvious just in case. Your path to jquery has spaces in it:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery /1.4/jquery.min.js"></script>
It should be:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
To be 100% doubleplus sure that jquery is loaded, open up the Firebug console and run this snippet:
$().jquery;
It should respond by printing the version number.
It looks like your document.ready function isn't enclosing all of your selector statements. You also might be missing the closing script tag.
Try adding this to the end of your script:
});
</script>
Full script:
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$(".image").fancybox();
/* Using custom settings */
$(".iframe").fancybox({
'hideOnContentClick': false
});
$("a[href$=.jpg],a[href$=.png],a[href$=.gif]").fancybox();
$(".youtube").click(function() {
$.fancybox({
'padding': 0,
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'title': this.title,
'width': 680,
'height': 495,
'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type': 'swf',
'swf': {
'wmode': 'transparent',
'allowfullscreen': 'true'
}
});
return false;
});
});
</script>
you should change the src to
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
instead of what you have here
<script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>
read carefully to note the difference in the src attribute of the two samples,
make this change to all the src attributes and you should be good to go.
See working link.
On the homepage I have two videos (#intro_video & #video_container) which under chrome I have no problems, but in firefox and IE the video doesn't play. It's loading the preview image but when you click play it tries to load for a moment and then goes back to the preview.
I have tried using Jquery Flash (loads #intro_video):
var so = new SWFObject('/swf/player.swf','ply','670','300','9','#000000');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('playlistfile','/videos/home.rss');
so.addVariable('playlist','left');
so.addVariable('playlistsize','240');
so.addVariable('bufferlength','15');
so.addVariable('plugins','fbit-1');
so.addVariable('dock','true');
so.addVariable('skin','/swf/modieus.swf');
so.addVariable('lightcolor','CC3399');
so.write('video_container');
and the recommended javascript (#video_container) from the wizard with no luck:
$(document).ready(function(){
// intro video
$('#intro_video').flash({
src: '/swf/player.swf', width: 367, height: 260,
flashvars: {
allowfullscreen: 'true',
allowscriptaccess: 'always',
wmode: 'opaque',
file: 'http://www.888behindthescenes.com/media/videos/intro2.flv',
image: '/images/sized/media/videos/previews/intro-370x228.jpg',
skin: '/swf/modieus.swf',
backcolor: '000000',
frontcolor: 'FFFFFF',
lightcolor: 'CC3399'
}
});
});
The flash is loading fine, just not the videos. Any help is appreciated.
Fixed by adding:
AddType video/x-flv .flv
to htaccess.