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');
}
});

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

Hide Fancybox triggered on Page Load on Mobile

Site: beauforgovernor.com
I have a fancybox triggered on page load (only on the homepage), but I don't want it to show up on mobile phones; however, I do still want it to show up on tablets.
I'm not sure how to code this.
This is the JS i'm currently using:
<script type="text/javascript">
$(document).ready(function() {
$("#aLink").fancybox({
'width' : '640',
'height' : 'auto',
'autoScale' : true,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});

Youll want to choose which screen dimensions you consider as mobile, might be hard as some tablet are barely bigger than some smartphone...
$(function(){
var viewport = {
width : $(window).width(),
height : $(window).height()
};
if(viewport.width>"480" && viewport.height>"600")
{
$("#aLink").fancybox({
'width' : '640',
'height' : 'auto',
'autoScale' : true,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
}
);