We Keep Coding

Fancybox and Cloudzoom to zoom a rotated image

I am admittedly new to this but I have a working Fancybox application and wish to add the ability to zoom into the images, I have done so but occasionally the images require Fancybox rotation to be right side up. When the zoom hover is used, the zoomed image is that of the original non-rotated image. I'm guessing it's because I tell CloudZoom to use .fancybox-image.
Here's my fancybox:
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : true,
arrows : false,
nextClick : true,
autoDimension : true,
helpers : {
title : {
type: 'Over'
},
thumbs : {
width : 75,
height : 75
},
buttons : {
tpl: '<div id="fancybox-buttons"><ul><li><a class="btnRotateL" title="left" href="javascript:;"></a></li><li><a class="btnRotateR" title="right" href="javascript:;"></a></li></ul></div>',
beforeShow: function (opts, obj) {
}
}, // buttons
},
maxWidth: 712,
maxHeight:968,
afterShow: function(){
var $image = $('.fancybox-image');
$image.CloudZoom({zoomPosition:'inside', zoomOffsetX:0});
},
beforeLoad: function(){
var $image = $('.fancybox-image');
if ($image.data('CloudZoom')) $image.data('CloudZoom').destroy();
},
beforeClose: function(){
var $image = $('.fancybox-image');
if ($image.data('CloudZoom')) $image.data('CloudZoom').destroy();
}
});
Do you know of a way to tell CloudZoom to use the image as currently displayed by Fancybox so that a rotated image can be zoomed?

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

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

Send height and width to fancybox from an image click

I have say 10 images and when anyone of them is clicked they open up a Fancybox frame (HTML). The problem is each images has a different sized Fancybox frame that needs to be opened.
How can I send the height and width from the image being clicked.
$("a.various").fancybox({
beforeClose: function () {
$("#gallery_spacer").remove();
},
openEffect: 'fade',
openSpeed: 1500,
closeEffect: 'fade',
closeSpeed: 400,
padding: '0',
width: 660,
height: 700,
maxWidth: 660,
maxHeight: 700,
fitToView: false,
autoSize: false,
closeClick: false,
autoScale: 'false',
autoDimensions: 'false',
transitionIn: 'true',
transitionOut: 'true',
type: 'iframe',
openEffect: 'fade',
helpers: {
overlay: {
css: {
'background': 'rgba(255, 255, 255, 0.0)'
}
}
}
});
$("a.various1").fancybox({
beforeClose: function () {
$("#gallery_spacer").remove();
},
openEffect: 'fade',
openSpeed: 1500,
closeEffect: 'fade',
closeSpeed: 400,
padding: '0',
scrolling: 'no',
width: 660,
height: 1870,
maxWidth: 660,
maxHeight: 1870,
fitToView: false,
autoSize: false,
closeClick: false,
autoScale: 'false',
autoDimensions: 'false',
transitionIn: 'true',
transitionOut: 'true',
type: 'iframe',
openEffect: 'fade',
helpers: {
overlay: {
css: {
'background': 'rgba(255, 255, 255, 0.0)'
}
}
}
});
The HTML
<li><a class="various1 fade " href="FOOTWEAR_SUB_PAGES/MERCURIAL_SUPERFLY.html"><img src="MAIN_IMAGES/MERCURIAL_SUPERFLY-2.jpg" border="0" /></a></li>
<li><a class="various2 fade " href="FOOTWEAR_SUB_PAGES/AIRMAX_MOTO.html"><img src="MAIN_IMAGES/AIRMX-22.jpg" border="0" /></a></li>

You basically need a single script to bind all your links to fancybox, then use data-* (HTML5) attributes to pass the width and height individually
You could use this html :
<li><a class="fancybox" data-width="660" data-height="700" href="FOOTWEAR_SUB_PAGES/MERCURIAL_SUPERFLY.html"><img src="MAIN_IMAGES/MERCURIAL_SUPERFLY-2.jpg" border="0" /></a></li>
<li><a class="fancybox" data-width="660" data-height="1870" href="FOOTWEAR_SUB_PAGES/AIRMAX_MOTO.html"><img src="MAIN_IMAGES/AIRMX-22.jpg" border="0" /></a></li>
... and fetch the size of each link using fancybox beforeShow callback like :
beforeShow: function () {
this.width = $(this.element).data("width");
this.height = $(this.element).data("height");
}
... where $(this.element) refers to each clicked element.
See JSFIDDLE
Please notice in the fiddle that I commented out some API options that are not valid in v2.x (they are for v1.3.4 and are not compatible)

you can get the width and height of the image like that:
var w = $("a.various1 img").width();
var h = $("a.various1 img").heigth();

Since you are loading content into an iframe, you cannot get the required dimensions for fancybox until after the html is rendered in the iframe.
What you can do is use onComplete to resize the fancybox after the html is rendered as described here.
So for your case you do something like this:
$("a.various").fancybox({
beforeClose: function () { $("#gallery_spacer").remove(); },
'onComplete' : function() {
$('#fancybox-frame').load(function() {
$('#fancybox-content').height($(this).contents().find('body').height()).width($(this).contents().find('body').width());
});
openEffect: 'fade',openSpeed: 1500,closeEffect: 'fade',closeSpeed: 400,'padding': '0','width': 660,'height': 700,
maxWidth: 660,maxHeight: 700,fitToView: false,autoSize: false,closeClick: false,'autoScale': 'false','autoDimensions': 'false',
'transitionIn': 'true','transitionOut': 'true','type': 'iframe','openEffect': 'fade',
helpers: {overlay: { css: {'background': 'rgba(255, 255, 255, 0.0)'}}}});

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