2009-05-01 4 views
0

도움이 필요합니다. = "줌"내 AJAX의 줌jQuery와 아약스 갤러리는 엄지 손가락 클릭으로 사라지고 효과가 사라집니다!

<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로 사업부의 IMG 태그입니다 :

나는 같은 이미지 맵을 통해 참조하는 다른 썸네일 이미지를 하나 개의 이미지로로드 수평 축소판의 라인을 가지고 사용자가 이미지의 더 큰 버전을 표시하기 위해 축소판 그림을 "클릭"할 때의 창입니다.

줌 상자의 축소판 큰 버전을 페이드 인해야하는 jQuery 코드입니다.

  • :.

    <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와 만 첫 번째 썸네일을 클릭 한 페이드, 나머지는 단순히 그냥 이런 식으로 일을 내가 원하는 페이드 클릭시 표시, 그리고 사용자

  • 큰 이미지
  • 사용자가 다른 섬네일을 클릭
  • 제 화상 페이드 아웃 및 제 선택된 썸네일
  • ,617,451 페이드 상자를 확대 페이드 섬네일 클릭

는 내가 분명하게 설명 바랍니다. :) 어떤 도움이라도 대단히 감사 할 것입니다.

답변

2

당신은 단지에 페이딩 경로 &을 변경하기 전에 이미지를 페이드 아웃 할 필요가 ... 그래서 당신의 클릭 기능이되어야 :

편집 : 표시/숨기기 애니메이션이 비동기 적으로 일어난 분실, 당신 때문에 나머지 트리거 페이드 아웃에 콜백을 사용할 필요가 ... 코드가 있어야한다 :

<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> 
+0

빠른 응답을 주셔서 감사합니다 .- 단지 이것을 시도하고 새로 선택한 큰 이미지를 표시 한 것처럼 보이지만 다른 곳으로 사라진 다음 다시 사라집니다. 내가 그것을 필요 : 사용자가 다음 이미지 등 –

0

여기 새로 왔어 그냥 정말 스타일 된 응답에 대한 내 의견을 보았다. : P

빠른 응답을 주셔서 감사합니다. 그냥 시도해 보았습니다. 새로 선택한 큰 이미지를 표시 한 것처럼 보이지만 다른 곳으로 퇴색 한 다음 다시 퇴색합니다. 사용자

  • 사용자
  • 등 등 다음 이미지의 다음 이미지> 페이드 아웃 첫번째 이미지> 페이드 선택 선택 후 첫번째 이미지

    • FADE :

      난에 필요하다.

  • +0

    아차에서 1 번째 이미지 FADE를 페이드 아웃 다음 이미지를 선택하면 사용자가 그것을 선택 후, 첫번째 이미지 FADE, 그것을 테스트하지 나를 가르칩니다. :) 내 편집보기 ... – Alconja