We Keep Coding

How to refresh an already opened FancyBox popup?

Can anyone tell me how to refresh a Fancybox popup ?
Here is how i create it.
$.fancybox({
'width' : 470, // set the width
'height' : 190,
'autoSize': false,
'transitionIn': 'fade',
'transitionOut': 'fade',
'href': 'pop.jsp',
'autoDimension' : false,
'type': 'iframe',
});

You may be able to do it by refering to $('iframe.fancybox-iframe'), with something like this:
$('iframe.fancybox-iframe').attr('src', function(i, val){return val;});
(according to Reload an iframe with jQuery)
example here: http://jsfiddle.net/pataluc/aLbYr/

Calling FancyBox from custom menu

I have a custom menu with a fixed position that allows users to navigate through FancyBox. It all works fine, except the part that the animation effects (those you have when you navigate through FancyBox by clicking the images) do not apply to the menu.
What do I have to do to get it working?
http://jsfiddle.net/PwMjP/866
FancyBox settings:
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
wrapCSS : 'fancybox-custom-white',
closeClick : false,
topRatio : 0,
scrolling : 'no',
width : '100%',
padding : '0',
fitToView : false,
transitionIn : 'elastic',
transitionOut : 'elastic',
speedIn : 600,
speedOut : 200,
overlayShow : false,
nextMethod : 'changeIn',
nextSpeed : 250,
prevMethod : false,
helpers : {
title : {
type : 'inside'
}
}
});
$(".fancybox").click(function(){
$(".menu-content").css('background-color','rgba(0,0,0,0.95)');
});
P.S.: Would be great if anyone could post some working code or a fiddle. Thanks!

Scroll absolute position div with page

I am using fancybox 2 and I would like for the fancybox modal to scroll with the page, instead of being fixed to the center and having a max-height. How can I do this?
$('.fancybox-open').fancybox({
openEffect : 'none',
closeEffect : 'none',
width: '100px',
'closeBtn' : true,
afterLoad : function() {
this.content.html();
}
});

You can use the option autoCenter: false when initializing your FancyBox: http://fancyapps.com/fancybox/#docs

Why is this Fancybox height and width not working?

This is what I have:
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
* Different effects
*/
/*********This is what I added to see if I can change h and w****/
$('.fancybox-effects-a').fancybox({
autoDimensions: false,
height: 568,
width: 611
});
/********* my code ends ****/
// 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>
I added this line:
/*********This is what I added to see if I can change h and w****/
$('.fancybox-effects-a').fancybox({
autoDimensions: false,
height: 568,
width: 611
});
/********* my code ends ****/
But it still doesn't work. What can I do to have a custom height and width that is also automatic. Meaning if the content in there exceeds my width and height it should be able to become dynamic and change.

Try setting 'autoSize':false . For example:
$.fancybox({
'content':$("#element").html(),
'width':'500',
'autoDimensions':false,
'type':'iframe',
'autoSize':false
});

You must have like me found the documentation for V1 since it comes up on Google Search first, this is the documentation for the latest fancybox:
http://fancyapps.com/fancybox/#docs

Adding caption to fancybox images/video

I currently have fancybox displaying all the correct images/videos that it should. However, I cannot seem to get it to display the caption associated with each time fancybox is called.
I am using Fancybox V2.1.5
$(document).ready(function(){
$(".fancyYoutube").live('click',function(){
$.fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titleShow' : 'true',
'speedIn' : '100',
'width' : 680,
'height' : 395,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : true,
},
beforeLoad: function() {
this.title = $(this.element).attr('caption');
}
});
return false;
});
});
I am using caption= within the sections it is required, however it still doesn't display the caption text :(
I am also using the latest JQuery plugin with it.
Any help would be great, thanks!
EDIT: PROBLEM SOLVED:
$(document).ready(function(){
$(".fancyYoutube").live('click',function(){
$.fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'title' : this.title,
'speedIn' : '100',
'width' : 680,
'height' : 395,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : true
}
});
return false;
});
});
Only needed title : this.title,

If I remember well(I checked here too: http://fancybox.net/blog ) you need these parameters
'titlePosition' : 'inside',
'titleFormat' : formatTitle
Where the formatTitle is a function which appends the caption
function formatTitle(title, currentArray, currentIndex, currentOpts) {
return '<div id="tip7-title"><span><img src="/data/closelabel.gif" /></span>' + (title && title.length ? '<b>' + title + '</b>' : '' ) + 'Image ' + (currentIndex + 1) + ' of ' + currentArray.length + '</div>';
}
I think there is something wrong here
this.title = $(this.element).attr('caption');
Try using ids with something like this(wherever it does not fit use an appropriate id)
$(this).html( $(this).attr('caption') );