Remplacer les données d'un carousel
Bonjour, sur cette page https://mappingforyou.eu/fusion/
Je souhaite remplacer les photos du carousel, avec photoLayer2._photos._layers à la place de cached (dans la console)
Il ne s'agirait plus de mettre 4 photos par park, mais de supprimer toute reference à des parks, et de simplement mettre à la suite dans le carousel, tout ce qui se trouve dans photoLayer2._photos._layers sans exception.
avec par exemple pour la vignette photoLayer2._photos._layers[21733].photo.thumbnail.
pour le titre photoLayer2._photos._layers[21733].photo.caption, pour la photo en lightbox photoLayer2._photos._layers[21733].photo.photo.
Pourriez-vous m'aider à creéer une nouvelle variable (ou array?) qui est activé dans la fonction BuildHtml avec ces conditions ?
Code:
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
});
} |