기본 컨테이너에 미리보기 이미지 만들기

Question

컨테이너에는 요소가 없지만 측면에는 축소판이 있습니다. 축소판을 클릭하면 해당 슬라이드가 주 컨테이너를 채우기 위해 움직입니다.

HTML :

<div id="main_container"> 
    <div id="img_container"> 
     <div class="img_main"></div> 
     <div class="img_main"></div> 
     <div class="img_main"></div> 
</div> 
</div> 

jQuery를 :

출력은 회색 박스를 클릭에 fiddle

에 도시

$(".img_main").click(function() { 
$(this).css("position",'absolute').transition({ 
    top: '0px', 
}); 

});​ 

그것이 하부 용기 나와야 및 주 용기를 채우십시오.

나는 또한 jquery.transit 플러그인을 사용하고 있습니다. 나는이 예와 비슷한 뭔가를 시도하고

는 : http://sokra.github.com/jmpress.js/examples/tab-control/

Answer 1

당신이 당신이 연결된 플러그인에 대한 소스를 다운로드하고 그것을 사용해야 날 것으로 보인다. 보기 좋고 문서화가 잘되어 있습니다. 네가 스스로하는 걸 고집한다면, 내가 할 일이 여기있다.

<div id="main_container"> 

</div> 

<div id="img_container"> 

    <div class="img_main"> 
    <img url="etc" /> 
    </div> 

    <div class="img_main"> 
    <img src="wherever" /> 
    </div> 

    <div class="img_main"> 
    <img src="you get the idea" /> 
    </div> 

</div> 

그런 다음 jquery를 사용하여 이미지 태그를 HTML로로드하십시오. 애니메이션을 보관하는 animate라는 CSS 클래스를 만든 다음 기본 div에로드 한 후 img에 추가합니다. 이 문제를 해결할 수있는 방법은 무한합니다. 나는 너를 가장 친한 친구로 만들어 줄 것을 제안한다.

jQuery를 :

$(".img_main").click(function() { 
    var img = $(this).find('img'); 
    $('#main_container').html(img.html()); 
    img.addClass('animate'); 
    }); 
});​ 

또는 대신에 당신이 그 GitHub의 페이지에서 무료 라이브러리를 다운로드 할 수 있습니다.