jQuery 이미지 갤러리 사용자 정의

Question

편집 :이 질문에 부분적으로 대답합니다. 스크롤 경로 플러그인을 사용하여 올바른 경로에 나를 입력 한 Neil에게 감사드립니다. 그러나 아래에서 설명하는 것처럼 스크롤 된 미리보기 목록을 원하는대로 올바르게 조정하려면 "다음"및 "이전"링크를 가져 오는 데 여전히 문제가 있습니다. 따라서, 거기에 다른 숙련 된 jQuery 프로그래머가 찌르다가이 장애물을 극복하는 데 도움이 될지 궁금합니다. 미리 감사드립니다.

/////////////////////////

그곳에 실력 jQuery를 프로그래머가 이미지 갤러리를 수정하는 몇 가지 지원을 제공 할 수 있는지 궁금 스크립트 : Galleriffic을 향후 프로젝트에서 사용하고 싶습니다. 익숙하지 않은 경우 위대한 플러그인 일 것입니다. 그러나 미리보기 이미지를 페이지로 나누는 대신 모든 엄지 손가락을 한 번에 표시하는 스크롤링 div를 갖고 싶습니다. 그림은 here입니다.

제 질문은 큰 이미지의 상태를 "따라 가면서"엄지의 스크롤 목록을 표시 할 수 있는지 여부입니다. 즉, "다음 사진"을 클릭하여 풀 사이즈 이미지를 표시하고 해당 축소 이미지 보기가 아닌 경우 목록이 자동으로 스크롤되어 현재 축소판을 표시합니다. 그런 스크립트는 풀 사이즈 이미지가 썸네일의 가시 상태를 따르거나 "감지"하고 필요에 따라 가시성을 조정해야한다고 생각합니다. 좀 더 구체적으로 알려 주시기 바랍니다.

이 작업을 수행하기위한 기존 jQuery 함수가 있습니까? (?), 여기에 어떤 방향 으로든 미리 감사드립니다.

Answer 1

당신을 위해 이것을 할 것입니다 a plug-in가있다입니다.

요소를 지정할 수 있습니다. 스크롤하려는 축소판 'IMG'. 또한 스크롤하는 방법에 대한 효과를 지정할 수 있습니다.

사용 방법에 대한 예제를 확인하십시오. 아래에 후속 의견에 대해서는

:

버튼은 다음 이동 이전 "다음"클래스 또는 "이전"및 클래스 "사전 링크를"큰 이미지가 포함 된 닻을 가지고, 그들은 모두는 다음/이전 슬라이드로 이동하는 "href"속성을 가지고 있습니다. 따라서 슬라이드의 축소판으로 스크롤하려면 아래에 표시된 것과 같이 jQuery 코드 시작 부분 또는 그 근처에 코드를 작성해야합니다. 난 단지 눈으로 그것을 검사했습니다, 그래서 거기에 AA 오타가있을 수 있습니다,하지만 당신은 드리프트 :

$('.next, .prev, .advance-link').live().click().function(){ 
    var href = $(this).attr('href'); 
    $('#thumbs').scrollTo($('.thumb[href=' + href + ']'), {axis: 'y'}); 
}); 

Answer 2

여기에 거친 예를

$('.current img').live('mouseenter',function(){ 

    var alt = $(this).attr('alt'); 
    var thumb = $('.thumbs [alt='+alt+']'); 
    var position = thumb.position(); 
    var thumbs = $('.thumbs'); 
    thumbs.scrollTop(position.top); 
});