We Keep Coding

Pass a class name to fancybox on js call

So I have this fancybox I'm opening like this:
$('.btn-test').on("click",function(){
$.fancybox.open({
'content': $('.modal_size-chart'),
'minWidth': 380,
'minHeight': 550,
'width': 380,
'height': 550,
'maxWidth': 380,
'maxHeight': 550,
'autoScale': false,
'autoDimensions': false,
'fitToView': false,
});
});
My problem is that like this, If I alter the box via css, any change will propagate to all the other fancyboxes I might open and this .modal_size-chart needs some specific styling the rest of the boxes don't.
So is there a way to pass a desired class name to fancybox on call ?

It turns out all I needed to add was the tpl attribute ( which is explained in the documentation site as : Object Containing Various Templates.. jezz...) and the wrap attribute inside the tpl.
so it ended up being like this:
$('.btn-test').on("click",function(){
$.fancybox.open({
'content': $('.modal_size-chart'),
'minWidth': 380,
'minHeight': 550,
'width': 380,
'height': 550,
'maxWidth': 380,
'maxHeight': 550,
'autoScale': false,
'autoDimensions': false,
'fitToView': false,
'tpl': {
wrap:'<div class="fancybox-wrap CLASS I WANT TO ADD HERE" tabindex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>'
}
});
});

How to set the background color of the content that should be displayed in a fancybox in jquery?

I have a div that forms the content of the fancybox. I need to change the background color of the div which froms the content of the fancybox on click of a link which will popup the fancybox? How to change it in jquery?
/* Href */
click here
/* FancyBox */
$('#link').on('click', function(e) {
e.preventDefault();
$.fancybox({
'autoScale' : false,
'autoSize' : false,
'autoDimensions': false,
'titleShow' : false,
'padding' : 0,
'overlayOpacity': '.8',
'overlayColor': '#333',
'transitionIn': 'none',
'transitionOut': 'none',
'centerOnScroll': true,
'showCloseButton': true,
'closeBtn' : true,
'scrolling' : true,
'height': 'auto',
'width': 120,
'minHeight' : 160,
'minWidth' : 10,
'maxWidth' : 780,
'type':'ajax',
'href' : 'url/something.html',
helpers : {
overlay : {closeClick: false}
},
'beforeShow' : function(){
var closer = $('button.buttonCTW');
closer.on('click', function() {
$.fancybox.close();
});
$.fancybox.update();
},
});
});

Since you haven't posted any code.. this is just a shot in the dark but this should do the trick:
Fiddle:
http://jsfiddle.net/remix1201/gw0vnzcv/
$(".linkClass").click(function(){
$(".targetClass").css("background-color","YOURCOLORCODEHERE");
});

You can set the background colour of fancy box before it is shown.
$('.fancybox').fancybox({
beforeShow: function() {
$('fancybox-skin').css('background-color', 'red');
}
});

how to call back fancybox iframe keeping the layer over effect?

i have a link when i click on it ,it opens iframe fancybox over index.php and change the url in the address bar from
index.php?profile=john.smith
to
index.php?profile=john.smith#details.php?detail_id=46798103K1Y420140415125117
but when i copy this link and paste it again it opens the iframe only ,i need to open it like a layot over the index.php
<a class="iframe" id="<?php echo $href_id; ?>" href="details.php?detail_id=<?php echo $detail_id; ?>">iframe</a>
// iframe
$(".iframe").fancybox({
type: 'iframe',
padding: 0,
width: 800,
height: 500,
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none',
helpers: {
overlay: {
css: {
'background': 'rgba(00, 00, 00, 0.75)'
}
}
},
beforeShow: function () {
var id = this.element.attr("id");
if (id) {
window.location.hash = "index.php?" + id;
}
},
beforeClose: function () {
window.location.hash = "";
}
});

You are redirecting the whole window to a new page when you load the FancyBox.
The FancyBox iframe type takes a href option. You can use the href in your link as the iframe location.
$(".iframe").fancybox({
type: 'iframe',
padding : 0,
width : 800,
height : 500,
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
helpers : {
overlay : {
css : {
'background' : 'rgba(00, 00, 00, 0.75)'
}
}
}
});

Fancybox 2.0.6 close method

i have a problem with close method of fancybox v2.0.6
I have in my page this code.
Aggiungi immagine
<script type="text/javascript">
$(document).ready(function() {
$("#Imagemulti").fancybox({
maxWidth: 800,
maxHeight: 600,
fitToView: false,
width: '88%',
height: '88%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none',
arrows: false,
type: 'iframe',
afterClose: function() {
$('#imgqueue').load('myurl2')
}
});
});
</script>
When i click on a tag the fancybox popup show mypage, where i have a form; when i submit the form on the popup, i show another form e after, submit it, i will close by this function:
<script type="text/javascript">
parent.$.fancybox.close();
</script>
Note: myurl and myurl2 not are variables but link to my site that i have hidden
And it's ok; but if i click again on a tag the popup show the form but on submit the popup don't close. Why? The code is equal. i Don't understend....
It's a fancybox bug?
Thanks for the answers and sorry for my poor english

use onclosed method for close popup
$("#Imagemulti").fancybox({
maxWidth: 800,
maxHeight: 600,
fitToView: false,
width: '88%',
height: '88%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none',
arrows: false,
type: 'iframe',
'onClosed' : function () { self.parent.location.reload(); }
}
});

Fancybox 1.3.x ignores width and height parameters

I am using Fancybox 1.3.4 (currently the latest) and I use the following HTML elements:
<a href="LARGE_URL" title="FANCY_CAPTION" rel="gallery" class="gallery-item">
<img src="SMALL_URL"/>
</a>
<a> ... repeat N times... </a>
Then I use the following jQuery code:
<script>
$(document).ready(function() {
$('a.gallery-item').fancybox({
'autoDimensions': 'false',
'width':900,
'height':'auto',
'cyclic': true,
'centerOnScroll': 'false',
'hideOnOverlayClick': true,
'hideOnContentClick': false,
'overlayShow': true,
'overlayOpacity': 0.7,
'overlayColor': '#666',
'titleShow': true,
'titlePosition': 'inside',
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 400,
'speedOut': 200,
'showCloseButton': true,
'showNavArrows': true,
'enableEscapeButton': true
});
});
</script>
I also tried
'width':'900',
or setting both
'width':900,
'height':600,
but it just does not work.
Any solutions to this?
I need the #fancybox-wrapper element in an exact size.

try to remove quotes around false:
'autoDimensions': false