I have a dynamic fancy-box image gallery with Elevate Zoom Implemented in it, When the user clicks on from the fancy-box image the Elevate Zoom plugin is initialized and can see the magnified image in the fancy-box.
After disabling the Elevate Zoom plugin I'm not able to scroll the image from the fancy-box.
Is there any way to bind the scroll feature back to the fancy-box div after disabling the Elevated Zoom ?
I'm using Fancy-box 2.15v and Elevate Zoom 3.0.8v
$(".fancybox-thumb").attr("rel","gallery").fancybox({
scrolling: 'no',
prevEffect : 'none',
nextEffect : 'none',
type :'image',
maxHeight : '150%',
maxWidth : '90%',
fitToView : true,
arrows : true,
mouseWheel : false,
afterShow : function(){
$('.fancybox-image').click(function() {
$('.fancybox-image').elevateZoom({
zoomType : "lens",
scrollZoom : true,
lensSize : 900,
});
$('#fancybox-buttons').hover(function() {
$('.zoomContainer').remove();
$('.zoomWindowContainer').remove();
$(".zoomLens").remove();
});
});
},
beforeClose: function(){
$(".zoomContainer").remove();
$('.zoomWindowContainer').remove();
$(".zoomLens").remove();
}
});
Related
Hello i just want to ask how can i set the maximum size of my cropbox? Because i got a image frame which have a 400x400 image size then inside of it is a box container which going to be the place where the cropped image from the cropbox go.
I have this jQuery code
var img = $('#image');
$('#image').on('load', function () {
img.cropper({
aspectRatio : 1,
scalable : true,
rotatable : true,
checkOrientation : true,
cropBoxResizable : true,
dragMode : 'move',
minCropBoxWidth : 346,
minCropBoxHeight : 269,
minContainerHeight : 400,
minContainerWidth : 400,
minCanvasWidth : 400,
minCanvasHeight : 400,
viewMode : 1
});
img.cropper("setCropBoxData", { width: "346", height: "269" });
}
It works normal but no changes have been made with my cropbox. It only set its minimum size but not the maximum. Any solutions will help thanks.
You can add this :
autoCropArea: 1,
Try adding style="max-height:80vh !important" to the parent container for the cropper-container cropper-bg class.
Library : http://yuilibrary.com/
YUI().use('panel', function (Y) {
var dialog = new Y.Panel({
contentBox : //Need to get content from external website,
bodyContent: '',
width : 410,
height : 500,
zIndex : 10,
centered : true,
modal : false,
render : '.example',
visible : true,
});
});
In the content box, iframe do work, but is there any other way to render the website in a popup modal other than using iframe using YUI?
On this link the FancyBox shows the video but with black bars to the side. Also when I resize the browser black bars appear on the top. I tried everything I could find on SO and elsewhere but I can't seem to find the solution.
This is my JS setup of the FancyBox:
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
},
autoSize: false,
fitToView: true,
maxWidth: 960,
maxHeigth: 540,
height: '70%',
width: '70%',
});
});
</script>
Where do I need to look to fix this?
I found if you update the width of div which class is flideo , that would fix this problem
you coulde see the picture url below
https://dl.dropboxusercontent.com/u/23971112/stackoverflow/fancybox%20black%20bar.JPG
Im trying to use Fancybox to build an before/after gallery. Thats how it works:
1) The page load with a lot of thumbnails
2) When the thumb is clicked, it loads the fancybox gallery
3) When the user hover the image, it changes to the "before" state
I already did the steps 1 and 2. How can I make the 3ยบ?
Solved:
$(".fancybox").fancybox({
padding:0,
margin:60,
nextClick:true,
openEffect : 'none',
closeEffect : 'none',
nextEffect:'fade',
prevEffect:'fade',
nextSpeed :1,
prevSpeed:1,
afterShow : function() {
$('.fancybox-nav').hide();
$(".fancybox-image").hover(
function() {$('.fancybox-next span').click();},
function() {$('.fancybox-next span').click();}
);
}
})
I have a simple app with a Google Map and markers.
Clicking on the markers i have to show either an image, a slideshow or a video.
This is the javascript needed to display an image (properly working):
google.maps.event.addListener(marker1, 'click', function() {
$.fancybox({
href: 'http://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Tootsi_jaamahoone.jpg/800px-Tootsi_jaamahoone.jpg'
// other options
});
});
This is instead the attempt i have made to display a video:
google.maps.event.addListener(marker3, 'click', function() {
$.fancybox({
'type' : 'iframe',
// hide the related video suggestions and autoplay the video
'href' : 'http://www.youtube.com/watch?v=Q_W1apjU4Go',
'overlayShow' : true,
'centerOnScroll' : true,
'speedIn' : 100,
'speedOut' : 50,
'width' : 640,
'height' : 480
});
});
Here i have recreate the situation with a Google Map with 3 markers, for one of them is possible to see an image, for the other a slideshow, for the third a video.
The image and the slideshow are working properly, but instead of the video i am seeing a blank box:
http://jsbin.com/ANuyojoW/13/edit
Someone perhaps knows how can i properly display a video?
Thank you very much!
Use following js:
Demo
// Video - Not working
google.maps.event.addListener(marker3, 'click', function() {
$.fancybox({
'type' : 'iframe',
// hide the related video suggestions and autoplay the video
'href' : 'http://www.youtube.com/watch?v=Q_W1apjU4Go'.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'overlayShow' : true,
'centerOnScroll' : true,
'speedIn' : 100,
'speedOut' : 50,
'width' : 640,
'height' : 480
});
});