JQuery 이미지 확대(zoom)

Programming/JQuery 2013. 5. 21. 18:07 Posted by 생각하는로뎅

8번째 줄 부터 이미지 사이즈에 맞게, 설정해주도록 한다.

var fullWidth = 3504; // Width in pixels of full-sized image

var fullHeight = 2479; // Height in pixels of full-sized image

var thumbnailWidth = 693; // Width in pixels of thumbnail image

var thumbnailHeight = 460; // Height in pixels of thumbnail image

정확한 사이즈로 적어주도록 하고 잘못 기입할 시, 확대 방향 혹은 이동 거리 오류로인해 제대로 작동되지 않으니 주의하자.

<head>
    <title></title>

// Set size of div
    			$('#picture').css({
    					'width': thumbnailWidth+'px',
    					'height': thumbnailHeight+'px'
    			});

// Hide the full-sized picture
    			$('#full').hide();

// Toggle pictures on click
    			$('#picture').click(function() {
    					$('#thumbnail').toggle();
    					$('#full').toggle();
    			});

// Do some calculations
    			$('#picture').mousemove(function(e) {
    					var mouseX = e.pageX - $(this).attr('offsetLeft'); 
    					var mouseY = e.pageY - $(this).attr('offsetTop');

var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth);
    					var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight);

$('#full').css({
    							'left': '-' + posX + 'px',
    							'top': '-' + posY + 'px'
    					});
    			});
    	});
    </script>

#thumbnail {
    			cursor: pointer;
    	}

#full {
    			position: relative;
    			cursor: crosshair;
    	}
    </style>
</head>

  각각의 썸네일(확대 전 thumbnail)과 원본(확대 후 full)의 이미지 경로를 삽입한다.  
			<div id="picture">
    			<img alt="" id="thumbnail" src="../images/schedule/thumbnail_6mon.jpg"/>
    			<img alt="" id="full" src="../images/schedule/6mon.jpg" />
			</div>

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Thinker

카테고리

JQuery 이미지 확대(zoom)

공지사항

링크

티스토리툴바