Adding Captions to Jquery Fullscreen Slideshow

Question

I have been struggling with what seems like should be an easy problem:

I inherited a site that uses what looks to be a combination of a slider and jquery backstretch. The client has requested that one of the slideshows have captions, positioned along the visible bottom of the image.

So I want to turn this:

<div id="backstretch" style="…">
<img style="…">
</div>

Into this:

<div id="backstretch" style="…">
<img style="…">
<div class="gallery-caption">Caption</div>
</div>

And destroy each instance of the div, as it does with the images.

However, I can't seem to get the javascript to render the caption div, and keep it in synch with the navigation. For the purposes of clear water, I have removed all of my attempts, and gone back to the JS code I started with.

Here is an example: http://tylonius.net/backstretch/lifestyle-gallery.html

Can anyone help with this?

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

Other answer is not relevant, I didn't notice it was FancyBox.

A similar question was posted here, here and here. As @JFK sated in the first link you could use the data-, prefix to an attribute of image to hold the caption information. And access it with a jquery script.

<!doctype html>
<html>
<head>
 . . . 
    <title>your demo</title>
</head>

<body>
    <div id="gallery" class="residences">
        <div class="bigImages">
            <ul>
                <li>
                    <div class="gallery-image">
                            <img class="caption" src="images/lifestyle-gallery/img2.jpg" title="Caption 1" data-caption="Caption will go here">
                     </div> <!-- /gallery-image -->
                </li>

and the script would be:

$(document).ready(function() {
    $(".fancybox").fancybox({
        helpers : {
        title: { type: 'inside'}
    },
    // use the following if you want to do the caption before the image
    // beforeShow : function(){ 
    afterLoad: function(){
        this.title = this.title + ' ' + $(this.element).data("caption");
        //you can also do the following to use the alt instead of the caption
        //this.title = this.title + ' ' + $(this.element).find('img').attr('alt');
    }

    }); // fancybox
}); // ready

edited May 23 '17 at 12:11

Community

1
1

answered Oct 07 '14 at 02:02

Beau Bouchard

835
11
28

Thank you. I made these changes to the example page, but I don't see where the caption is being rendered in the code. Did I miss something? – Ty Morton Oct 07 '14 at 02:32
Sorry, didn't notice it wasn't lightbox, and was fancybox. I found several other questions similar which I linked when I edited the answer, let me know if it helped. – Beau Bouchard Oct 07 '14 at 02:58
It's not fancybox. There is a fancybox js being used elsewhere on the site, but this is something completely separate. – Ty Morton Oct 07 '14 at 03:05
What plugin are you using then on your demo? – Beau Bouchard Oct 07 '14 at 03:21
I'm not sure. I inherited it, and the JS code is all minified, so there are no comments. I tried searching for it by both file and function names, but couldn't find a match. It's possibly something custom written. – Ty Morton Oct 07 '14 at 13:13

Adding Captions to Jquery Fullscreen Slideshow

1 Answers1