Fancybox and Cloudzoom to zoom a rotated image - javascript

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?

Related

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

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!

CarouFredSel sliding issue

I have set up a caroufredsel, and have items inside of it. But when I click on my next and previous buttons, the first time it appears to shift 1 item, every click after that it shifts the entire width of the content and back to the beginning.
I have set my scroll items to 3. Does it have something to do with the width of the container?
jQuery('#tab-1').find('#carousel').carouFredSel({
responsive : true,
circular: false,
align: "center",
height : 'auto',
width : 'auto',
auto : false,
prev : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerLeft');
}
},
next : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerRight');
}
},
scroll : {
items : 3,
fx : "fade"
},
items : {
height : 'auto',
width: 'auto'
},
swipe: {
onMouse: true,
onTouch: true
}
});
It also seems that on slide, the height of the carousel changes for some reason. maybe this is related
I would also refactor your selector to be simpler as you are using IDs and there should only be one per page anyway:
Instead of:
jQuery('#tab-1').find('#carousel').carouFredSel();
Use this:
jQuery('#carousel').carouFredSel();
Switching the caroufredsel width to 100% did the trick.
jQuery('#tab-1').find('#carousel').carouFredSel({
responsive : true,
circular: false,
align: "center",
height : 'auto',
width : '100%',
auto : false,
prev : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerLeft');
}
},
next : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerRight');
}
},
scroll : {
items : 3,
fx : "fade"
},
items : {
height : 'auto',
width: 'auto'
},
swipe: {
onMouse: true,
onTouch: true
}
});

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

Categories