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, all works fine, but if you hover mouse at right side from slider, you will see preview of hidden pictures. Is it possible to disable this?

The code is:

<!--Slider-->
<script type="text/javascript">
    $(document).ready(function() {
        $('#next').click(function(event) {
            event.preventDefault();
            $('#long-box').animate({scrollLeft:'+=706'}, 'slow');
        });
        $('#prev').click(function(event) {
            event.preventDefault();
            $('#long-box').animate({scrollLeft:'-=706'}, 'slow');
        });
    });
</script>

<!--Zoom-->
<script type="text/javascript">
    $(document).ready(function() {
        $('#sliding-windows').find("img").elevateZoom({
            zoomType: "lens",
            cursor: "crosshair",
            zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 750
        });
    });
</script>

<div id="portfolio">
    <div id="long-box-wrapper">
        <div id="prev" class="button"></div>
        <div id="next" class="button"></div>
        <div id="long-box">
            <div id="sliding-windows">
                <img src="../irpex/img/portfolio_photos/small/1_small.jpg" data-zoom-image="../irpex/img/portfolio_photos/big/1_big.jpg">
                <img src="../irpex/img/portfolio_photos/small/2_small.jpg" data-zoom-image="../irpex/img/portfolio_photos/big/2_big.jpg">
                <img src="../irpex/img/portfolio_photos/small/3_small.jpg" data-zoom-image="../irpex/img/portfolio_photos/big/3_big.jpg">
            </div>
        </div>
    </div>
</div>

And the CSS is:

#long-box {
    width: 702px;
    margin: 16px auto 50px auto;
    position: relative;
    overflow: hidden;
}

#long-box-wrapper {
    position: relative;
    width: 700px;
    margin: 0 auto;
}

#sliding-windows {
    width: 4232px;
    height: 933px;
    overflow: hidden;
}

I thinking about counting elements, and apply hover action only for first 8 elements, after slider click next, apply hover for elements from 8 till 8 + 8 = 16. But i hope it's not the best solution. — kxc, Jan 20 '14 at 12:59

score 7 · Answer 1 · edited May 23 '17 at 11:53

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:

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

score 2 · Answer 2 · answered Aug 14 '15 at 06:53

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

score -1 · Answer 3 · edited Apr 09 '14 at 11:52

-1

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.

edited Apr 09 '14 at 11:52

Jakub Matczak

15,341
5
46
64

answered Apr 09 '14 at 11:29

Subhrakanti Mandal

1
1

elevateZoom disable hidden elements

3 Answers3

Linked