Closed cecilehabran closed 6 years ago
Works fine to me http://mreq.github.io/slick-lightbox/demo/
Feel free to reopen with a broken fiddle or a demo.
This is definitely a bug.
return itemTemplate(img, this.options.lazy);
Where itemTemplate accepts the parameters "source, caption, lazy". So the image array sent in is sending in the lazyload option where the caption should be. Temporary fix is to set lazyload to be a blank string.
$('#slickgallery').slickLightbox({ images: images, lazy: '', });
I confirm it is a bug. Code should be like this @~line 58 in slick-lightbox.js:
return itemTemplate(img, _this.options.caption, _this.options.lazy);
and if default caption
is set to false
, you must add in the itemTemplate
function @~line 53:
if (!caption) { caption = ''; }
I thought I share this bit of code for slick-lightbox generated by an array of images URL and if you want to have a respective caption for each image (starts @~line 46):
itemTemplate = function (source, caption, lazy) {
var imgSourceParams;
if (lazy === true) {
imgSourceParams = ' data-lazy="' + source + '" src="' + lazyPlaceholder + '" ';
} else {
imgSourceParams = ' src="' + source + '" ';
}
if (!caption) {
caption = '';
}
return '<div class="slick-lightbox-slick-item">\n <div class="slick-lightbox-slick-item-inner">\n <img class="slick-lightbox-slick-img" ' + imgSourceParams + ' />\n' + caption + '\n </div>\n</div>';
};
if (this.options.images) {
links = $.map(this.options.images, function (_this, index) {
return function (img, index) {
var thisCaption = _this.options.caption;
if( Array.isArray(thisCaption) ){
thisCaption = thisCaption[index];
}
thisCaption = '<span class="slick-lightbox-slick-caption">'+thisCaption+'</span>';
return itemTemplate(img, thisCaption, _this.options.lazy);
};
}(this));
} else { // code continues...
Prerequisites:
By default caption option is set on false, but instead of returning nothing, it actually shows 'false' right under the image.