jquery 이미지 갤러리 슬라이드 애니메이션

Question

나는 이처럼 간단한 이미지 갤러리를 만들려고 노력하고 있습니다. http://dimsemenov.com/plugins/royal-slider/#image-gallery 썸네일 이미지를 클릭하면 이미지 요소가 만들어지고로드되는 이미지가 약간의 시간으로 표시되고 만들어진 요소가 표시된 영역에서 슬라이드됩니다. 마지막으로 오래된 이미지 요소가 제거됩니다.

$(document).ready(function() { 
    $(".thumbnail").click(function() { 
     $("#mainImage").animate({ "left": "-640px" }, "fast"); 
     $('#preview').css('background-image', "url('../../baContent/spinner.gif')"); 
     var img = $("<img style='left:640px;display:none;' />").attr('src', this.href).load(function() { 
      $('#mainImage').attr('src', img.attr('src')); 
      $('#preview').css('background-image', 'none'); 
      $(this).parent().prevAll().remove(); 
      $("#mainImage").animate({ "left": "-640px" }, "fast"); 
     }); 

    }); 

}); 

<div id="imageGallery" style="overflow:visible;display:block;"> 
<div class="preview"> 
    <div id="content" style="width:640px;height:420px;"> 
     <img id="main-Image" alt="" src="../../baContent/image1.jpg" style="display:inline; top:0;left:0;" /> 
    </div> 
</div> 
<div id="thumbnails"> 
    <a class="thumbnail" href="../../baContent/image1.jpg"><img alt="Image 1" src="../../baContent/image1-thumb.jpg"></a> 
    <a class="thumbnail" href="../../baContent/image2.jpg"><img alt="Image 2" src="../../baContent/image2-thumb.jpg"></a> 
</div> 

나는 몇 가지 코드를 작성하지만 성공이 없었다. 어떤 아이디어 또는 자습서?

Answer 1

시도 :

$(document).ready(function() { 
    $(".thumbnail").click(function() { 
     $('#main-Image').hide(); 
     $('#preview').css('background-image', "url('../../baContent/spinner.gif')"); 

     var imgSrc = $(this).attr('href'); 
     var img = $("<img style='left:640px;display:none;' />").attr('src', imgSrc).load(function() { 
      $('#main-Image').attr('src', imgSrc); 
      $('#preview').css('background-image', 'none'); 
      $('#main-Image').fadeIn(); 
     }); 

     return false; 
    }); 
});​ 

당신은 당신이 원하는 모든 애니메이션을 추가 할 수 있습니다.

좋은 슬라이더를 보려면 http://bxslider.com/을 참조하십시오.