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