mreq / slick-lightbox

A lightbox wrapper for Ken's amazing slick carousel.
http://mreq.github.io/slick-lightbox/
MIT License
229 stars 103 forks source link

Caption shows "false" #64

Closed cecilehabran closed 6 years ago

cecilehabran commented 6 years ago

By default caption option is set on false, but instead of returning nothing, it actually shows 'false' right under the image.

mreq commented 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.

jeremyhaber commented 6 years ago

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: '', });

anou commented 5 years ago

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

anou commented 5 years ago

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:

  1. option caption must be an Array
  2. captions in Array must be in the same order than the images's URL Array