Add captions to nested Jquery Cycle

Question

I've got a gallery constructed of nested slideshows using the jquery cycle plugin. I want captions based on the alt text to display on each image in the slideshow, but I don't know where in the script I would need to active this. If anyone could help, I'd be very appreciative. Thank you!

//stop subgal initially
            $('#hovergal .subgal').cycle({
                fx: 'fade',
                timeout: 10000,
                slideExpr: 'img'
            }).cycle('pause');

            //start subgal on click
            $('#hovergal').cycle({
                fx: 'scrollUp',
                speed: 300,
                timeout: 0,
                slideExpr: '>div.subgal',
                pager: 1,
                pagerAnchorBuilder: function(i) {
                    return $('aside.sgnav a:eq(' + i + ')');
                },
                after: function(curr,next,opts) {
                    var cmd = opts.currSlide == 1 ? 'resume' : 'pause';
                    $('div.subgal').cycle(cmd);
                }
            });
    } else {//else, if there's only one gallery to be shown

        $('#hovergal .subgal').cycle({
            fx: 'fade',
            timeout: 3000,
            slideExpr: 'img'
        }); 
    }

score 0 · Accepted Answer · answered Aug 23 '11 at 19:42

I'm guessing everyone is as stuck as I am, as I've been trying to find the answer for this question for two weeks without luck. I've given up trying to solve it within the parameters of Jquery.Cycle and have instead switched my galleries to be built from lists rather than divs, with the each list item containing a caption container that pulls its contents from the alt tag. That done, I just had to change slideExpr to list, and voila.

This method is still not desired because I had to construct a second Jquery statement that checks each caption container on page load, determines if it has any content, and hides it if it's empty. But it works, and at this point that's really all I care about.

Maybe someone will come along with the real answer to this problem some day. In the meantime, I'm leaving this here for anyone who might run into the same jam.

score 0 · Answer 2 · edited May 23 '17 at 11:48

I think this has nothing to do specially with the cycle plugin. If you are fine with these lines, you just need to add a function in $(document).ready(function() {}, something like

$('.slideshow img').each(function(){
    var el = $(this);
    var alttext = el.attr('alt');
    el.after('<span>'+alttext+'</span>');
});

this appends your alt text directly after the image and you can positioning it absolutey using css. You probably need to adapt this to your structure, may be not img and "el.after", but

$('.slideshow img').each(function(){
    var el = $(this);
    var parentdiv = el.parents('div:eq(0)');
    var alttext = el.attr('alt');
    parentdiv.append('<span>'+alttext+'</span>');
});

or so. A working example you can find here (my post from today) Jquery Cycle —multiple nested slideshows and cycle terminating or here http://ferienhaus-fischland-ahrenshoop.de/mini4/ later after finishing of this project need to remove the mini4/ Any more questions welcome, greetinx, Michael

Add captions to nested Jquery Cycle

2 Answers2

Linked