Rectangle 27 0

You would need to set up fancybox zoom to open an iframe style lightbox, that contained your JQZoom code. could be a very slick combination!

jquery - Adding zoom to Fancybox - Stack Overflow

jquery jquery-plugins jquery-selectors fancybox
Rectangle 27 0

Just in case of someone will face this problem too, thats how I solved it.

I couldn't make it work with zoom, so i just turn off slider click tracking and push him to use only dragging(with dragging it work more correctly).

Turn off dragging is a bit complex to, that how i did it:

if (scale < 100) { // detect zooming
                    $('.slider').css('height', '0px'); //setting height of slider to 0, so user can't click on it
                }

css - jQuery UI slider widget + fancybox + zooming/scaling - Stack Ove...

jquery css slider zoom jquery-ui-slider
Rectangle 27 0

What I normally do for clients that want fancybox disabled on specific screen sizes is

Set my preferred screen size in a variable like

var setfancybox = 480; // or whatever

.... if the screen width is bigger than 480 I will enable the images to open in fancybox otherwise as normal images.

Code (html) my targeted elements with another class but fancybox like :

<a class="modal" href="images/01.jpg">image 01</a>

... in this case I am using the class modal so I can manipulate my elements.

  • Write a function that checks the screen's width and dynamically add or remove the fancybox class to/from my modal selectors (it should run after the fancybox initialization script) like : var screenWidth, setfancybox = 480; // set fancybox class when screen size is > setfancybox value function checkScreen() { screenWidth = window.innerWidth; if (screenWidth > setfancybox) { // modal elements should open in fancybox if (!jQuery(".modal").hasClass("fancybox")) { jQuery(".modal").addClass("fancybox"); } } else { if (jQuery(".modal").hasClass("fancybox")) { jQuery(".modal").removeClass("fancybox"); } } } jQuery(document).ready(function ($) { $(".fancybox").fancybox(); checkScreen(); }); //ready

Optionally, you may want to run the checkScreen() function again if the window is resized (changed orientation!?) so you could do :

$(window).resize(function () {
    clearTimeout(_resize);
    _resize = setTimeout(function () {
        checkScreen();
    }, 500); // setTimeout
});

... notice we used setTimeout/clearTimeout to avoid the function to be run several times during the resize process but until it stopped. It also assumes you previously declared the _resize variable as global.

jquery - Fancybox() on iPhone cannot zoom - Stack Overflow

jquery fancybox fancybox-2
Rectangle 27 0

Try this, using the slide and change attributes in the slider constructor:

<div id="zoom-box">
    <div id="slider"></div>
</div>
<div id="debug"></div>  <!-- Remove for production -->
#slider {
    width: 363px;
    height: 15px;
    margin-left: 40px;
}
$('#slider').slider({
    min: 1,
    max: 100,
    width: 50,
    value: 100,
    slide: updateZoom,
    change: updateZoom
});

function updateZoom() {
    var scale = $('#slider').slider('value');
    $('#zoom-box').css('zoom', (scale) + '%');
    $('#debug').prepend(scale + '<br/>');  // Remove for production
}

Thanks for answering, but thats not work for me, I dont need to zoom slider on slide or change event. The goal is to make slider work right in zoomed state, in example when you click on the right side of the slider from here jsfiddle.net/8hbMx , it will slide wrong.

Ah right - if you can assume an HTML5 compliant browser (Webkit or IE 10), then try <input type="range" /> - the native HTML slider control

No problem! It appears as though the issue is with the jQueryUI slider control - maybe try looking on the jQuery forums?

css - jQuery UI slider widget + fancybox + zooming/scaling - Stack Ove...

jquery css slider zoom jquery-ui-slider
Rectangle 27 0

afterShow
$('.fancybox-thumbs')
elevateZoom
img.fancybox-image
.fancybox-image
  • Don't forget that you also need to remove the elevateZoom element after the fancybox is closed.

Here is the code:

$('.fancybox-thumbs').fancybox({
    prevEffect : 'none',
    nextEffect : 'none',

    closeBtn  : false,
    arrows    : false,
    nextClick : true,

    autoCenter: true,

    helpers : {
        thumbs : {
            width  : 75,
            height : 75
        }
    },
    afterShow: function() {
        $('.zoomContainer').remove();
        $('img.fancybox-image').elevateZoom({ 
            zoomType: "inner",
            cursor: "crosshair",
            zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 750
        });
    },
    afterClose: function() {
        $('.zoomContainer').remove();
    }
});

To fix the problem with the different images sizes you should add:

$('.zoomContainer').remove();
afterShow: function() {

thank you very much! that works perfectly. really appreciate it. i was scratching my head for hours trying to get this

of course! done! but i noticed a big editing the original

when you have time, i edited my original post with a bug that came up

jquery - combining fancybox with elevatezoom. the zoom is not working ...

jquery html css fancybox fancybox-2
Rectangle 27 0

It basically adds the zoom image as content to $.fancybox and applies $.jqzoom() when it's done via onComplete. I disabled scrolling because jqzoom seems to add a border to the smaller image, resulting in horizontal scrollbars.

jquery - Adding zoom to Fancybox - Stack Overflow

jquery jquery-plugins jquery-selectors fancybox
Rectangle 27 0

If you use fancybox v2.x, add the buttons option to your script and it includes the zoom feature you are looking for.

jquery - Implementing zoom inside fancybox - Stack Overflow

jquery fancybox
Rectangle 27 0

When you embed Google maps in an iframe (the recommended way to embed them into a website) you can't zoom in/out the map using the mouse wheel (you could zoom a street view image though) ... that would be the normal behavior.

Check this JSFIDDLE as example with pure html iframe.

When you display Google maps in fancybox, they are actually wrapped in an iframe, so you can't use the mouse wheel to zoom in or out either .... so regarding your question I don't think it's possible.

It's not a fancybox issue but an html iframe limitation.

Google map's fusion tables can be zoomed in/out using the mouse wheel ... in this case, those maps should be opened using fancybox iframe mode like :

$(".fancybox").fancybox({
    type: "iframe"
});

My conclusion : it all depends on the content format. Fancybox doesn't set any limitation to the content inside the iframe : whatever you can do in a regular html iframe, is what you can do inside fancybox (iframe mode).

Why with map from fusion tables is that posible? jsfiddle.net/zTgKJ/9

@Meloun : interesting, the fusion tables map zooms in/out using the mouse wheel. I guess it all depends on the map format. See my edit answer.

jquery - fancybox: Zoom in/out for googlemaps - Stack Overflow

jquery google-maps iframe fancybox fancybox-2