CODEWITHSUNDEEP
jquerycssshopping-cartzooming
Styled Bee
Styled Bee

Reputation: 139

jquery lens zoom perfect positioning

I'm trying to invent jquery image zooming effect for my shoping site without third party plugins. Everything working well except lens. my lens move out of image boundary and its not zooming properly. need help for fix this issue.

$(function(){
	//Load First Default Image in PreviewPane	
		$('.previewPane, #zoomer').css('background-image','url('+$('.imgkey').first().prop('src')+')');
	//Mini image click function to change previewPane image			
		$('.imgkey').on('click',function(){
			$('.previewPane').css('background-image','url('+$(this).prop('src')+')');
		});
	//PreviewPane Mouse Move Function
		$('.previewPane').on('mousemove touchmove',function(ev){
			$('#zoomer').css('display','inline-block');
	//Insert Lens on mouseOver
			$(this).html('<div class="lens"></div>');			
	//Offset is outside of the element
			var $offset = $(this).offset();				
	//Get Image Url for Zoomer
			var img = $(this).css('background-image').replace(/^url\(['"](.+)['"]\)/, '$1');
			//var img = $(this).parent().find('img').prop('src');
  	// adjust the values first
			var relX = ev.pageX + $offset.left - $('.lens').width();
			var relY = ev.pageY + $offset.top - $('.lens').height(); 
//prevent lens move outside of the previewPane
			if(relX > img.width - $('.lens').offsetWidth) {relX = img.width - $('.lens').offsetWidth;}
			if(relX < 0){relX = 0;}
			if(relY > img.height - $('.lens').offsetHeight) {relY = img.height - $('.lens').offsetHeight;}
			if(relY < 0){relY = 0;}

    // tweek the lens here
			$('.lens').css('left', relX + 50);
			$('.lens').css('top', relY + 55);

//Get x & y position of image
			//var a = $(this).get(0).getBoundingClientRect();

	//Set image to zoomer
			$('#zoomer').css('background-image','url('+img+')');
	//Set zoomer background position				
			$('#zoomer').css('background-position',((-relX * 2) + "px " + (-relY * 2) + "px"));
			//console.log(ev.pageX);
		});
	//PreviewPane Mouse Out Function
		$('.previewPane').mouseleave(function(){
			$('.lens').fadeOut();
			$('#zoomer').fadeOut();
		});
	});
.imgkey{width:50px;height:50px;border:1px solid #ddd;cursor:pointer;}
	.imgkey:hover{border:1px solid #666;}
	#zoomer,.previewPane{border:1px solid #ddd;width:250px;height:250px;background-repeat:no-repeat;background-position:center center;}
	.previewPane{display:inline-block;background-size:100% 100%}
	#zoomer{display:none;background-color:#eee;z-index:1000;}
	.lens{border:2px solid #444;width:125px;height:125px;background-color:#fff;cursor:crosshair;position:absolute;opacity:0.5;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<main>
		<div class="previewPane"></div><div id="zoomer"></div>
		<div class="imgline">
			<img class="imgkey" src="https://images-na.ssl-images-amazon.com/images/I/812vZzhnjKL._SX466_.jpg">
			<img class="imgkey" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRRHcol8Yn1frq--dojSoPYyaxIhqu_ERqPKi7f7Qt5D_5AFkb3">
			<img class="imgkey" src="http://nerfgunheadquarters.com/wp-content/uploads/2016/04/NERF-Cam-ECS-12-Blaster.jpg">
			<img class="imgkey" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdWTvJ1bGLUkiPkkCE3APTPlbUnIUv0r9dd_CSOLT8sLZgvtjo4A">
		</div>
	</main>

here lens not perfectly positioning and image not zooming as expected.

Upvotes: 0

Views: 1113

Answers (1)

chaggy
chaggy

Reputation: 1131

A few ideas. Make the lens width and height match the zoomed window display. Closer to 125px.

Add no-repeat the zoomers background image.

Try refactoring a bit

    // adjust the values first
        var relX = ev.pageX + $offset.left - $('.lens').width();
        var relY = ev.pageY + $offset.top - $('.lens').height(); 
    // and tweek the lens here
        $('.lens').css('left', relX + 15);
        $('.lens').css('top', relY + 20);

I hope this gives you some ideas. good luck

Upvotes: 2

Related Questions