i am using fancybox for playing a video using jquery. but it is not working.. if i provide url from youtube or from any other site, it works perfectly. but when i give href from local host , i does not work . here is my code .
$.fancybox({
openEffect : 'none',
closeEffect : 'none',
'autoScale': true,
'transitionIn': 'fade',
'transitionOut': 'fade',
'href': 'http://localhost/projects/flippingbook/video/video.mp4',
helpers : {
media : {}
}
});
First of all you need to understand what Fancybox does. Fancybox plugin can open HTML content (or page) into a popup modal. Here in your code what you are doing is, you are passing the URL of a mp4 file, which is wrong.
What you need to do is to create a HTML page where your video gets played (using some video player) and pass the URL of that page to Fancybox initialization.
you can use iframe option of fancybox try using like this.
<a class="fancybox fancybox.iframe" href="learn android.mp4">Iframe</a>
and in the head section add
<!-- Add jQuery library -->
<script type="text/javascript" src="http://localhost:8080/fancybox/lib/jquery-1.10.1.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="http://localhost:8080/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="http://localhost:8080/fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="http://localhost:8080/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="http://localhost:8080/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="http://localhost:8080/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="http://localhost:8080/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="http://localhost:8080/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
* Different effects
*/
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});
// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'over'
}
}
});
// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
openEffect : 'none',
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
/*
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
arrows : false,
helpers : {
media : {},
buttons : {}
}
});
/*
* Open manually
*/
$("#fancybox-manual-a").click(function() {
$.fancybox.open('1_b.jpg');
});
$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'iframe.html',
type : 'iframe',
padding : 5
});
});
$("#fancybox-manual-c").click(function() {
$.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
body {
max-width: 700px;
margin: 0 auto;
}
</style>
Hope this will work for you. I have attached fancybox files according to my local host server modify it according to your project
Related
I have a video link like this directory
uploads/Sample.mp4
I have added this an a tag like this below code
<a class="fancybox-media" href="uploads/Sample.mp4">Click on me</a>
I have tried below script
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
</script>
After click on link it's not popup it's going to direct video link and running the video. How can I apply fancybox media here ?
I am using v2.1.5.
Note : Here fancybox,javascript all link is ok, I have checked by apply on image.
After apply ifram the output looks like below image.
I believe you need to specify that the video should be wrapped on an iframe.
Try adding type: 'iframe', to your options. Like this:
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox-media').fancybox({
type: 'iframe',
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
</script>
I have done it by below script
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox-media').fancybox({
type: 'iframe',
minWidth : 500,
minHeight : 500,
fitToView : false,
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {
}
}
});
});
</script>
I have two different openers for fancybox on the same page. I want to have a black border on .fancybox2 and the regular white on .fancybox1. There are also some other minor differences. This is the script.
$(".fancybox").fancybox1({
padding:10,
helpers: {
title: {
type: 'inside'
},
overlay: {
css : {
'background': 'rgba(0,0,0,0.6)'
}
}
}
});
//Fancy box number 2 not working with different style
$(".fancybox2").fancybox({
padding:10,
openEffect: 'elastic',
closeEffect: 'elastic',
helpers: {
title: {
type: 'inside'
},
overlay: {
locked: false,
css : {
'background': 'rgba(255,255,255, 0.6)'
}
}
}
});
I have tried to use this style but that will affect both, they will both have black border.enter code here
<style type="text/css">.fancybox-skin {background-color: #000 !important;}</style>
Anyone got some suggestions how to solve this?
Consider declaring your CSS using the Fancybox's Callbacks. For example; Here I can make use of the beforeShow event to change .fancybox-skin to white for every element with class .fancybox1
$(".fancybox1").fancybox({
beforeShow: function(){
// here set the border color for each class
$(".fancybox-skin").css("backgroundColor","white");
},
helpers : {
overlay : {
css : {
'background': 'rgba(0,0,0,0.6)'
}
}
}
});
Here is a full demo as per your requirements
I have this fancybox code -->
jsfiddle: http://jsfiddle.net/uZCC6/5192/
CSS:
.hidden {
display: none;
}
JQUERY:
$('.fancybox').fancybox({
prevEffect : 'fade',
nextEffect : 'fade',
closeBtn : true,
arrows : true,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
I'm trying to add a description to the image popping out using this method provided by JFK Adding a title to fancy box.
<img width="304" height="350" alt="Winged back chair and ottoman" src="images/Gallery/tn/wing-back-chair.jpg">
$(document).ready(function() {
$(".fancybox").fancybox({
helpers : {
title : { type : 'inside' }
}, // helpers
beforeLoad: function() {
this.title = $(this.element).attr('caption');
}
}); // fancybox
}); // ready
However when i try to implement his code, the thumbnails are disappearing, any help on the correct method of applying his answer?
I am building an angularJS webapp and I want to open a youtube video by calling a method of my constructor. To achieve that; I want to reproduce the same behavior as
$(document).ready(function() {
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'fade',
closeEffect : 'fade',
padding: 0,
helpers : {
media : {},
buttons : {}
}
});
});
But using the manual way, $.fancybox.open([ ... ]). Can someone guide me on how to do it?
$.fancybox.open({
content: '<iframe width="xxx" height="xxx" src="//www.youtube.com/embed/xxxxxxxx" frameborder="0" allowfullscreen></iframe>'
});
You don't need to set the full iframe HTML tag as content in the fancybox API options but passing the video's URL and set the type to iframe. You could simply do :
jQuery(document).ready(function ($) {
$.fancybox.open({
href: "https://www.youtube.com/embed/jid2A7ldc_8",
type: "iframe",
// other API options
openEffect: 'fade',
closeEffect: 'fade',
padding: 0,
helpers: {
buttons: {}
}
});
}); // ready
See JSFIDDLE
basically I am trying to launch a fancybox window when a specific button is clicked, and then I want to pass fancybox content to display, now my understanding is that if I do something like this it should open a fancybox window with the content I pass it,
Javascript/jQuery:
$('#test').live('click', function(){
$.fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
'type' : 'inline',
'content' : '<div>Test</div>',
'autoDimensions' : false,
'width' : 400,
'height' : 400
});
})
HTML:
<div id="test"></div>
CSS:
#test {
background: #000;
width: 250px;
height: 25px;
}
But when I launch that it gives me undefined, at first I thought it was referencing the wrong ID, but the HTML is sound.
I am guessing that it's probably something very simple that I am missing...
Thanx in advance!
You are missing the ,
Remove the line 'type' : 'inline',
You can take a look here http://jsfiddle.net/ynhat/zkYTZ/
I am not sure why the 'type' : 'inline', causes problem. Maybe it is a bug or Forces content don't need the type option.
Your missing a ","
$('#test').live('click', function(){
$.fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic' , <---------
'type' : 'inline',
'content' : '<div>Test</div>',
'autoDimensions' : false,
'width' : 400,
'height' : 400
});
})