jQuery and Ajax 갤러리가 사라지고 엄지 클릭으로 사라집니다!

Question

도움이 필요합니다.

imageMap을 통해 참조 된 다른 썸네일 이미지가있는 하나의 이미지로로드 된 수평 썸네일 라인이 있습니다.

<div id="zoom">
    <img src="" />
</div>
<div id="collectionindex">
    <img src="thumbnail-strip.jpg" alt="" usemap="#Map" />
        <map name="Map" id="Map">
            <area shape="rect" coords="151,0,211,39" href="image1.jpg" alt="" />
            <area shape="rect" coords="215,0,275,39" href="image2.jpg" alt="" />
            <area shape="rect" coords="279,0,339,39" href="image3.jpg" alt="" />
            <area shape="rect" coords="343,0,403,39" href="image4.jpg" alt="" />
            <area shape="rect" coords="407,1,467,40" href="image5.jpg" alt="" />
            <area shape="rect" coords="471,0,531,39" href="image6.jpg" alt="" />
        </map>
</div>

id = "Zoom"이있는 div의 IMG 태그는 사용자가 썸네일을 "클릭하여"이미지의 더 큰 버전을 표시 할 때 Ajax Zoom 창입니다.

이것은 jQuery 코드입니다. Zoom Box의 썸네일의 큰 버전을 희미하게해야합니다.

<script type="text/javascript">
$(document).ready(function(){

$("area").click(function(){

        var largePath = $(this).attr("href");

        $("#zoom img").attr({ src: largePath }).fadeIn("slow"); return false;
            });
    });
</script>

지금, jQuery는 첫 번째 클릭으로 축소판을 클릭 한 것만으로 사라지고 나머지는 단순히 클릭하면 나타나고 사라지지 않습니다. 이런 식으로 작동하기를 원합니다.

• 사용자는 썸네일을 클릭합니다
• 큰 이미지가 줌 상자로 사라집니다
• 사용자는 다른 썸네일을 클릭합니다
• 첫 번째 이미지가 사라지고 두 번째 선택된 썸네일이 사라집니다.
• 등.

나는 그것을 명확하게 설명하기를 바랍니다. :) 모든 도움은 엄청나게 감사하겠습니다.

Answer 1

경로를 변경하고 페이딩하기 전에 이미지를 퇴색시켜야합니다 ... 따라서 클릭 함수가됩니다.

편집하다: 쇼/숨기기 애니메이션이 비동기 적으로 발생한 것을 잊었으므로, 나머지를 트리거하려면 페이드 아웃에서 콜백을 사용해야합니다 ... 코드는 다음과 같습니다.

<script type="text/javascript">
$(document).ready(function(){
    $("area").click(function(){
        var largePath = $(this).attr("href");
        $("#zoom img").fadeOut("slow", function() {
            $(this).attr({ src: largePath }).fadeIn("slow");
        });
        return false;
    });
});
</script>

Answer 2

나는 여기에 새롭고 방금 당신의 응답에 대한 내 의견이 끔찍한 스타일이라는 것을 보았습니다. :피

빠른 응답에 감사드립니다 - 그냥 시도해 보았습니다. 새로 선택한 큰 이미지를 표시하고 사라지고 다시 사라지는 것처럼 보입니다.

나는 그것을 필요로한다 :

• 사용자가 선택한 후 첫 번째 이미지로 페이드
• 사용자 선택 다음 이미지> Fade Out 1st Image> Fade in Next Image
• 그리고 그렇게합니다.