JavaScript : 더 큰 이미지를 전환하려면 축소판을 클릭합니다. 최고의 방법?
-
08-07-2019 - |
문제
나는 썸네일을 클릭하여 더 큰 이미지의 SRC를 전환 할 수있는 정말 쉬운/가벼운 방법을 찾고 있습니다.
- 이것이 내가 찾은 것입니다.http://snipplr.com/view/8688/jquery-image-swap/
나는 아직 그것을 시도하지 않았다. 이것이 최선의 솔루션입니까?
교체 할 큰 이미지는 폭이 같지만 높이가 다릅니다. 이것은 문제를 일으킬 것인가/이 기능에 추가해야 할 것이 있습니까? 스왑하고 가장 큰 이미지의 높이 인 배경 이미지로 div를 수행하는 것이 더 낫습니까?
또한 누군가는 한 번만 작동한다고 말했습니다.
조언에 감사드립니다! 나는 확실히 (명백히) JavaScript 작가는 없다.
해결책
원하는만큼 이미지를 여러 번 전환 할 수 있어야합니다.
참조하는 코드는 #TARGET의 이미지 소스를 #thumbs div의 링크로 대체합니다. 잘 작동해야합니다.
<img id="target" src="images/main.jpg">
<div id="thumbs">
<a href="images/picture1_big.jpg"><img src="images/picture1_small.jpg"></a>
<a href="images/picture2_big.jpg"><img src="images/picture2_small.jpg"></a>
<a href="images/picture3_big.jpg"><img src="images/picture3_small.jpg"></a>
</div>
너비와 높이까지, 나는 이미지를 교환 할 때 브라우저가 정의 된 너비를 처리하는 방법에 대한 크로스 브라우저 호환성 문제가 있다고 확신합니다.
Firefox에서는 다음이 작동합니다. 평범한 오래된 JavaScript, jQuery 없음 :
<html>
<head>
<script type="text/javascript">
function swap(image) {
document.getElementById("main").src = image.href;
}
</script>
</head>
<body>
<img id="main" src="images/main.jpg" width="50">
<a href="images/picture1_big.jpg" onclick="swap(this); return false;"><img src="images/picture1_small.jpg"></a>
<a href="images/picture2_big.jpg" onclick="swap(this); return false;"><img src="images/picture2_small.jpg"></a>
<a href="images/picture3_big.jpg" onclick="swap(this); return false;"><img src="images/picture3_small.jpg"></a>
</body>
</html>
다른 팁
이 예제는 축소판을 클릭 한 후로드 시간을 제거합니다.
HTML :
<div id="big-image">
<img src="http://lorempixel.com/400/200/sports/1/">
<img src="http://lorempixel.com/400/200/fashion/1/">
<img src="http://lorempixel.com/400/200/city/1/">
</div>
<div class="small-images">
<img src="http://lorempixel.com/100/50/sports/1/">
<img src="http://lorempixel.com/100/50/fashion/1/">
<img src="http://lorempixel.com/100/50/city/1/">
</div>
자바 스크립트 :
$(function(){
$("#big-image img:eq(0)").nextAll().hide();
$(".small-images img").click(function(e){
var index = $(this).index();
$("#big-image img").eq(index).show().siblings().hide();
});
});
제휴하지 않습니다 StackOverflow