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>
Related
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
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
I have a simpledialog2 box, its fully functional but im trying to work out a way to call a function when its been loaded.
For example i have
$('<div>').simpledialog2({
mode : 'blank',
animate : false,
transition : 'none',
// dialogAllow : true,
// dialogForce : true,
headerText : 'Statement Metadata',
blankContent : "HTML HERE"
});
After HTML HERE has been loaded what event is fired? Or how can i call javascript once the simpledialog2 is fuly ready?
Similar to pageshow event handler...
Try the following:
$('<div>').simpledialog2({
mode : 'blank',
animate : false,
transition : 'none',
// dialogAllow : true,
// dialogForce : true,
headerText : 'Statement Metadata',
blankContent : "HTML HERE",
callbackOpen: function() {
var me = this;
alert('opened');
setTimeout(function() {me.close();},2000);
}
});
Fiddle:
http://jsfiddle.net/ykHTa/62/
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
});
})