맞춤 jquery 갤러리

Question

템플릿을 만듭니다. 모든 xhtml/css 작업이 완료되지만 jquery 이미지 갤러리 만 수행됩니다. 주위에 jquery 갤러리가 너무 많아서 상황에 따라 사용자 정의하는 방법을 모르겠습니다.

첫 번째 열에는 탐색 경로가 있습니다. 두 번째 열에는 세 번째 열의 미리보기 이미지가 선택됩니다. 축소판을 회전시키는 세 번째 열에는 위/아래 버튼이 있습니다. ON 썸네일 이미지를 클릭하면 두 번째 열의 이미지 div에로드해야합니다.

더 자세한 정보를 제공해야합니까? 당신은 실제로 질문을하지 않았으므로

Answer 1

, 당신이 시작하는 방법을 요구한다고 가정하겠습니다. 당신은 또한 당신의 HTML 구조를 제공하지 않았기 때문에, 나는 그것도 가정해야 할 것입니다.

HTML 구조

<div id="gallery"> 
    <img id="main_image" /> 
    <div> 
     <img src="image1-thumbnail.jpg" /> 
     <img src="image2-thumbnail.jpg" /> 
     <img src="image3-thumbnail.jpg" /> 
     <img src="image4-thumbnail.jpg" /> 
    </div> 
</div> 

JQuery와 플러그인을 만들어 시작하세요

:

(function ($) { 
    $.fn.gallery = function() { 

    }; 
})(jQuery) 

이 코드가 완전히 재사용되도록 보장하고 당신이 원하는 경우 충돌을 명명 발생하지 않습니다 나중에 다른 프레임 워크와 함께 사용하십시오. 다음으로는 메인 이미지의 SRC를 수정하기 위해 각각의 썸네일에 클릭 이벤트를 추가 할 :

는

(function ($) { 
    $.fn.gallery = function() { 
     this.find($(this).attr('id') + '>div>img').click(function() { 
      $(this).siblings('img').removeClass('selected'); 
      $(this).addClass('selected'); 
      var mainImageSrc = $(this).attr('src').replace('-thumbnail',''); 
      $(this).parent().siblings('img').attr('src',mainImageSrc); 
     }); 
     return this; // jQuery plugins should (nearly) always return this to make them chainable 
    }; 
})(jQuery); 

마지막으로 함수를 호출

jQuery(function ($) { 
    $('#gallery').gallery(); 
}); 

이 코드는 기본 기능을 제공해야한다. 엄지 손톱을 스크롤 할 수있게 만드는 작업에 맡겨 두겠습니다. 이미지 사이에 페이드를 만들면 정말 마음이 편안해질 것입니다 (힌트 : 두 개의 img 태그가 필요하고 CSS를 사용하여 서로 위에 놓는다면 .animate() 그 (것)들 사이에서 퇴색하기 위하여 불투명). 바라기를 이것은 당신을 가야한다.

Answer 2

는 Galleriffic는

http://www.twospy.com/galleriffic/index.html

귀하의 솔루션

그것의 매우 사용자 정의 및 쉬운 통합하는 것이다.