One Color 레이아웃에서 제이쿼리 이미지 줌 플러그인을 사용하고 싶습니다만
One Color 레이아웃에서
http://www.elevateweb.co.uk/image-zoom/examples
Inner Zoom을 사용하고 싶습니다.
해당 소스를 삽입하고 구동하면 소스가 제대로 작동하지 않습니다.
<head>
<script src='jquery-1.8.3.min.js'></script>
<script src='jquery.elevatezoom.js'></script>
</head>
<body>
<img src="images/small/s1.png"/>
<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
<script>
$('#zoom_01').elevateZoom({
zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});
</script>
</body>
다음과 같은 소스입니다. 또한 <script src='jquery-1.8.3.min.js'></script> 이부분을 불러와서 그런지 글쓰기 및 수정하는 모든 부분이 깨져버리네요.
사용할 수 있는 방법이 있을까요? 도움주시면 큰 도움이 될 것 같습니다.
파일 첨부합니다.
이 게시물을
댓글'3'
번호
제목
작성자
날짜
jQuery는 이미 XE 에서 로딩되므로 필요없으시구요
$는 jQuery로 치환해주셔야 합니다.
아래와 같이 사용해보세요.
<loard target="jquery.elevatezoom.js" />
<script>
jQuery('#zoom_01').elevateZoom({
zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});
</script>
이 댓글을
도움주셔서 정말 감사합니다! 잘 작동하네요. 그런데 문제가 조금 있는 부분이 아래로 81px이 밀립니다. 확대되는 이미지가 81px 아래 위치하게 되네요..
제가 아는 부분이 없어서.. 혹시 이유를 알 수 있을까요?
이 댓글을
css영향을 받는 부분이 있을겁니다.
아니면 css 로 위치를 잡아주셔야 할수도 있구요.
사이트를 확인해보지 않는이상 정확한 답변을 드리기는 어렵네요.
참고하시길 바랍니다.
이 댓글을