elevateZoom disable hidden elements

Question

I\'m using elevateZoom.js for preview image. And I have a problem with hidden elements in slider. How to disable preview overflow-hidden pictures on hover. In thisexample, a

Answer 1

Try following this: it may easy for you

$('#primaryImage').click(function(){
   if($(window).width()>768){
        $(this).elevateZoom({
            zoomWindowPosition:1,
            zoomWindowOffetx: 5,
            zoomWindowWidth:$(this).width(), 
            zoomWindowHeight:$(this).height(),
        }); 
    }
    else{
        $.removeData($(this), 'elevateZoom');//remove zoom instance from image
        $('.zoomContainer').remove(); // remove zoom container from DOM
        return false;
    }
});

Answer 2

https://github.com/elevateweb/elevatezoom/issues/14

describes a way to load elevateZoom on hover. The code #3 does provide a way to call the zoom on a condition. This would solve the problem if the right condition is added. Unfortunately as of 2014-05-02 elevateZoom breaks the mouseenter/mouseleave event chain by disabling the mousemove event handling while zooming. So the condition needs to be set externally by enableing/disabling the zoom via the changeState function of elevateZoom.

Code #1 has a solution for setting the condition - it handles all mouse moves and checks whether we are outside the valid area for elevateZoom and then disables all zooms altogether while this is the case. You can now use code 3 to reenabling the zom. Here this is done with a hover function - you could also use the inGallery flag set by the mouseMove event.

Here is a list of links inspiring this answer:

• elevateZoom disable hidden elements
• http://api.jquery.com/mouseout/
• https://github.com/elevateweb/elevatezoom/issues/14
• https://github.com/elevateweb/elevatezoom/issues/8
• Combining jquery functions - on() hover/mouseenter/mouseleave
• Bind a jquery image zoom effect to onclick

Code #1

  var inGallery=false;
  $( "body" ).mousemove(function( event ) {
    var gallery=$("#carousel-gallery");
    var newInGallery = mouseWithin(gallery,event.pageX,event.pageY);
    // mousenter event trigger should deliver this functionality but doesn't in
    // conjuction with elevateZom
    if (newInGallery  && !inGallery) {
      // comment out if you don't want to visually show the difference
      gallery.css( "border", "3px solid red" );
      $(".thumbnail").each(function(index) {
       var elevateZoom=$(this).data('elevateZoom');
       if (typeof elevateZoom !== 'undefined') {
         elevateZoom.changeState('enable');
       }
      });
    }
    // mouseLeave event trigger should deliver this functionality but doesn't in 
    // conjunction with elevateZoom
    if (inGallery && !newInGallery) {
      // comment out if you don't want to visually show the difference
      $(".thumbnail").css( "border", "3px solid blue" );
      $(".thumbnail").each(function(index) {
       var elevateZoom=$(this).data('elevateZoom');
       if (typeof elevateZoom !== 'undefined') {
         elevateZoom.changeState('disable');
             // $(this).removeData('elevateZoom');//remove zoom instance from image
             // $('.zoomContainer').remove();// remove zoom container from DOM  
       }
      });
    }
    inGallery=newInGallery;
  });

Code #2

this is the check whether the mouse is within the bounds of the Gallery used in Code #1 see also how do I find out if the cursor is in the bounds of an element

function mouseWithin(bounds,x,y) {
    var offset = bounds.offset();
    var l = offset.left;
    var t = offset.top;
    var h = bounds.height();
    var w = bounds.width();

    var maxx = l + w;
    var maxy = t + h;

    return (y <= maxy && y >= t) && (x <= maxx && x >= l);
};

Code #3

   $(".thumbnail").hover(function () { 
        var elevateZoom=$(this).data('elevateZoom');
        if (typeof elevateZoom === 'undefined') {
            $(this).elevateZoom({
              // http://www.elevateweb.co.uk/image-zoom/configuration
              // zoomType: "inner",
              // cursor: "crosshair"
              // gallery: 'carousel-gallery',
              // zoomEnabled: false, // start in disabled mode
              zoomWindowWidth: 600,
              zoomWindowHeight: 900,
              zoomWindowFadeIn: 500,
              zoomWindowFadeOut: 500,
              lensFadeIn: 500,
              lensFadeOut: 500,
              // tint:true, tintColour:'#404040', tintOpacity:0.5,
              scrollZoom : true
           });
           $(this).css( "border", "3px solid red" );
        } else {
           log('thumbnail.mousenter.zoomEnabled',elevateZoom.options.zoomEnabled);
           elevateZoom.changeState('enable');
        } // if
 });

Answer 3

On elevateZoom.js please find the code

$('body').append(self.zoomContainer);

add before it the following code

$('.zoomContainer').remove();

Slider hidden pictures preview may solve. Tested on zoomType: inner.