Slick: Caption Overlay option for images.

[Wicked0ne]

It would be awesome to have the option of adding a caption to the image that overlays the caption on the picture. Something along the lines of this: https://i.imgur.com/3EmlXnG.png

[gausarts]

I would prefer leaving it to CSS to avoid bloated JS whenever possible if I were you. You can easily add any caption, and position them absolutely with CSS, e.g.:

<div class="slide slide--has-caption slick-slide">
  <img .../>
  <div class="slide__caption">Any HTML here</div>
</div>

The CSS:

/* Required to hold the caption, or any closest parent selector to  .slide__caption */
.slide {
  position: relative;
}

.slide__caption {
  bottom: 0;
  min-height: 80px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

I tested some more complex layouts myself, such as Video overlay, etc, can be done by pure CSS.
You can see example from my WIP: http://goo.gl/xtccW6
There are 6 various slicks up there all with the amazing slick. Kudos, Ken!

[Wicked0ne]

Thanks gausarts. I'm going to give that a try now. Looks like a good solution :)

[tylerpepper]

I have a question that follows this issue I believe. When I slide my slideshow using the prev/next buttons, the caption element starts "popping in" after the slides have started to repeat. The slide animation happens and once it stops, the caption appears. I was wondering if that had anything to do with the CSS transitions, but the example above seem to be working fine with multiple children elements in the slide.

Using the draggable feature to slide doesn't cause this issue to happen.

Here's my markup and CSS:

<div class="field-item even slick-slide slick-active" data-ref="0" style="width: 920px;">
  <img src="/url-here" width="982" height="460" alt="Slide 1" title="Slide 1 Caption" />
  <div class="caption">Slide 1 Caption</div>
</div>

.slick-slide {
  position: relative;
}
.caption {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 15px;
  min-height: 38px;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 50;
}

[gausarts]

Maybe you need to put width: 100%; in the caption? Otherwise it collapses to the text amount.

[tylerpepper]

Adding transform: translate3d(0,0,0); fixed my issue.

[ymdahi]

I wanted to add captions as well, and since my cms (drupal) allows for images to have alt and title fields, I did the following so I wasn't repeating myself:

var slideCaption = $('.slick-slide > img').attr('title');
$('.slick-slide').append('<div class="slidecaption">' + slideCaption + '</div>');

Then it's just a matter of adding the styling to the slidecaption div.

[zeraph-dylan]

I tried to do as you did @ymdahi using Textpattern and the wet_for_each_image Textpattern plugin, which returns an HTML- formatted list of eligible images for use by slick.

That code looks like this:

<txp:wet_for_each_image sort="date asc" category="acting" break="div"  />

and renders this:

<div><img src="http://www.jguidroz.com/prelaunch/images/14.jpg" alt="Test" title="Sir Roland Trelawney in &quot;Treasure Island,&quot; St. Bernard Academy, 2009" width="604" height="405" /></div>
<div><img src="http://www.jguidroz.com/prelaunch/images/15.jpg" alt="Test 2" width="604" height="453" /></div>
<div><img src="http://www.jguidroz.com/prelaunch/images/16.jpg" alt="Test 3" width="604" height="453" /></div>
<div><img src="http://www.jguidroz.com/prelaunch/images/17.jpg" alt="Kent in &quot;Talk Radio,&quot; The Shadowbox Theatre, 2011" width="466" height="720" /></div>
<div><img src="http://www.jguidroz.com/prelaunch/images/18.jpg" alt="Kent in &quot;Talk Radio,&quot; The Shadowbox Theatre, 2011" width="960" height="643" />
</div>

I implemented your code as follows:

<script type="text/javascript">
$(document).ready(function(){
  $('.slideshow').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  variableWidth: true,
autoplay:false
  });
var slideCaption = $('.slick-slide > img').attr('alt');
$('.slick-slide').append('<div class="slidecaption">' + slideCaption + '</div>');
});

The result here -- at least, if I haven't figured it out by the time someone sees this! Every image has the same caption, taken from one particular image -- the image that comes first in the code.

[ymdahi]

@zeraph-dylan my final markup for this feature is:

$('.embedded-gallery .slick-slide > img').each(function(){ 
  if ($(this).attr('title')){
    var slideCaption = $(this).attr('title');
    $(this).parent('.slick-slide').append('<div class="slidecaption">' + slideCaption + '</div>');
  }
});

The .each() function should loop through the elements such that every caption is included in it's appropriate slide. Hopefully that works for you.

Remember to change the selector ('.embedded-gallery .slick-slide > img') to your own selector.
Remember also to change the attribute you are selecting - in this case I select .attr('title'), you may be using .attr('alt').

[zeraph-dylan]

@ymdahi Perfect! Thanks so much! I have just started learning javascript and knew some kind of iteration through the elements was needed, but had no idea how to implement it.

[Phillipe-Bojorquez]

In case anyone else finds this page while searching for a way to show captions on hover, I modified the original code with the following for that effect:

<div class="slick-slide slide slide--has-caption"> <img src="images/image1/1.jpg" /> <div class="caption">EDITORIAL</div> </div>

.slick-slide {
position: relative;

}
.caption {
visibility: hidden;
position: absolute;
right: 0;
bottom: 0;
padding-top: 75px;
height: 100%;
width:100%;
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
font-size: 4vh;
}

.slide--has-caption:hover .caption {
visibility: visible!important;
opacity: 1;
cursor: pointer;
pointer-events: none;
z-index: 2;

[falkartis]

I adapted the css to show arbitrary text coming from a "home-made" content manager.

This css puts the content at the left bottom corner of the slide, width: auto; and max-width: 100%; ensures that the box size doesn't break stuff, I may reduce it to 75% maybe. the text-shadow is the bonus part. I think most people won't notice what's the difference, just that it's a lot easier to read.

#slider is just a paranoid wrapper I once put, don't care about it.

#slider .slide {
    position: relative;
}
#slider .slide .desc {
    left: 0;
    bottom: 0;
    z-index: 2;
    width: auto;
    color: #fff;
    padding: 25px;
    max-width: 100%;
    font-size: 15px;
    min-height: 20px;
    position: absolute;
    font-weight: bolder;
    text-shadow: 0 0 5px black;
}
#slider .slide .desc h1 { font-size: 21px; }
#slider .slide .desc h2 { font-size: 20px; }
#slider .slide .desc h3 { font-size: 19px; }
#slider .slide .desc h4 { font-size: 18px; }
#slider .slide .desc h5 { font-size: 17px; }
#slider .slide .desc h6 { font-size: 16px; }