1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
| // builds html for carousel
function buildHtml() {
var gallery_items;
var gallery_container = $("<div />", {
id : 'owl-slider',
class : 'own-carousel'
});
var list = [];
$.each(current_gallery, function (park, photos) {
list.push("<a class='park-item' href='' target='_blank'>" + park + "</a>");
$.each(photos, function (idx, photo) {
var div = $("<div />", {
class : 'thumbnail'
});
div.on('mouseover', function (e) {
highlightPark(park);
});
div.on('mouseout', function (e) {
$.each(np_geo.getLayers(), function (i, l) {
l.setStyle(style());
});
});
var title = $("<span />", {
html : "<h2><span class='glyphicon glyphicon-globe inverse'></span> " + park + " National Park</h2>",
class : 'parkname-title'
});
var fullPhoto = photo.replace("n.jpg", "b.jpg");
var link = $("<a />", {
"data-lightbox" : "image-" + idx,
"data-title" : park + " (courtesy of Flickr)",
href : fullPhoto
});
var img = $("<img />", {
src : photo
});
link.append(img);
div.append(link);
div.append(title);
gallery_container.append(div);
});
});
list = list.join(' | ');
$("#parkslist").html(list);
$(".park-item").on('click', function (e) {
e.preventDefault();
highlightPark(e.target.text);
})
$("#slider").empty();
$("#slider").append(gallery_container);
$("#owl-slider").owlCarousel({
margin : 10,
autoWidth : true,
stagePadding : 50
});
} |
Partager