-1

I need to program a horizontal scroller/slider which will contain images and captions underneath each image; the data is coming in the form of an array of objects. So basically I will need to loop through the data and populate each 'item' in the scroller with data; data will have image url and other data. There can be hundreds of data items. Anyway, upon clicking any item I should be able to 'capture' the data about which item was clicked and use elsewhere in my webpage.

Is there such thing out there? I have looked for some jQuery based solution but so far haven't found anything which would meet the requirements. I don't want to re-invent the wheel and program something if something already exists.

Thanks!

IrfanClemson
  • 1,699
  • 6
  • 33
  • 52

1 Answers1

0

Never mind; here is my Answer.

First, in the html file, I have this:

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

The styles related to the slider are:

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;    
}

Then, in a javascript loop, populate the thumnail div with image; note, custom attributes:

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

Finally, handling on click of image and grabbing the custom attributes:

 $('img.thumb').click(function() {
                            var sourceURL = $(this).attr('src');
                            var lat = $(this).attr('lat');
                            var lng = $(this).attr('lng');
                            //console.log(lat + " " + lng);
});
IrfanClemson
  • 1,699
  • 6
  • 33
  • 52