자바 스크립트 : 수평 이미지 Scroller/Slider with Captions 기타 이미지

Question

각 이미지 아래에 이미지와 캡션이 포함 된 수평 스크롤러/슬라이더를 프로그래밍해야합니다. 데이터가 객체 배열 형태로 제공됩니다. 그래서 기본적으로 데이터를 순환하여 스크롤러의 각 항목을 데이터로 채워야합니다. 데이터에는 이미지 URL 및 기타 데이터가 있습니다. 수백 개의 데이터 항목이있을 수 있습니다. 어쨌든, 항목을 클릭하면 어떤 항목이 클릭되었는지에 대한 데이터를 '캡처'하고 내 웹 페이지의 다른 곳에서 사용할 수 있어야합니다.

저기에 그런 것이 있습니까? 일부 jQuery 기반 솔루션을 찾았지만 지금까지 요구 사항을 충족시킬만한 것을 찾지 못했습니다. 나는 이미 무언가가 존재한다면 바퀴를 다시 발명하고 무언가를 프로그램하고 싶지 않습니다.

감사합니다.

Answer 1

신경 쓰지 마세요. 여기 내 대답이다.

첫째, HTML 파일에서, 나는이 가지고있는 슬라이더 관련

<div id="thumbnail_slider"></div> 

스타일을 :

div#thumbnail_slider { 
    width: 50%; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap;  
    position:absolute; 
    margin-top:1%; 
    margin-right:1%; 
    z-index:999999999; 
} 

img.thumb { 
vertical-align: middle; 
cursor: pointer;  
} 

그런 다음, 자바 스크립트 루프, 이미지와 thumnail의 DIV를 채우는 ; 참고 사용자 정의 속성 :

는

$('div#thumbnail_slider').append('<img class="thumb" src="' + feature.properties.Tile + '" lat="' + feature.geometry.coordinates[1] + '" lng="' + feature.geometry.coordinates[0] + '"/>'); 

마지막으로, 이미지의 클릭에 처리하고 사용자 정의를 잡는 것은 속성 :

$('img.thumb').click(function() { 
          var sourceURL = $(this).attr('src'); 
          var lat = $(this).attr('lat'); 
          var lng = $(this).attr('lng'); 
          //console.log(lat + " " + lng); 
});