How to remove Title or Description if empty in jQuery Cycle2 Caption

Question

In my slideshow some slides are without captions, but the styling that i have added, makes Title and Description boxes appear without any text and obviously it seems odd.

How can i make the Caption plugin to not show Title/Description if found no text?

Here's the code:

<div class="cs" data-cycle-caption-plugin=caption2>
    <div class="cycle-overlay"></div>
    <img src="images/bg.jpg" >
    <img src="images/i1.jpg" data-cycle-title="Winter" data-cycle-desc="Awesome!!!" >
    <img src="images/i2.jpg" >
</div>

And here's the JS Code:

$('.cs').cycle({
    speed: 600,
    manualSpeed: 6000
});

I went ahead and edited the caption plugin for Cycle2; version: 20130306 and just added this class code class="cap_title" into the following line:

overlayTemplate:  '<div class="cap_title">{{title}}</div><div>{{desc}}</div>',

Then i tried to hide the ".cycle-overlay" using the following events , but failed:

$( '.cs' ).on( 'cycle-next', function( event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag ) {
    if($('.cap_title').html()==''){
        $('.cap_title').hide();
        $('.cycle-overlay').hide();
    } else { 
        $('.cap_title').show(); 
    }
});

Showing us some code would make it easier to help you. – faerin Jul 09 '14 at 19:55 — faerin, Jul 09 '14 at 19:55

score 4 · Accepted Answer · answered Jul 09 '14 at 21:31

The trick is that I’m modifying template in the fly. If title or description is not provided – template is set to empty ''.

$('.slideshow').cycle({
    speed: 600,
    manualSpeed: 6000,
}).on('cycle-update-view', function(event, optionHash, slideOptionsHash, currentSlideEl) {
    if (!currentSlideEl.getAttribute('data-cycle-desc') || !currentSlideEl.getAttribute('data-cycle-title')) {
        slideOptionsHash.overlayTemplate = '';
    } else { 
        slideOptionsHash.overlayTemplate = '<div>{{title}}</div><div>{{desc}}</div>';
    }
});

jsfiddle: http://jsfiddle.net/krzysztof_safjanowski/waXCF/

score 2 · Answer 2 · answered Aug 18 '16 at 23:18

Thank you, Krzysztof! This worked for me, too.

A useful note for others: Krzysztof's code will hide the overlay for all slides that are missing either a title or a description. This initially threw me off because I had some slides with a title but no description. I wanted the titles on those slides to be displayed, not hidden. To get that result, all I had to do was change the "or" in the "if" statement to an "and":

Original Version:

if (!currentSlideEl.getAttribute('data-cycle-desc') || !currentSlideEl.getAttribute('data-cycle-title'))

Modification:

if (!currentSlideEl.getAttribute('data-cycle-desc') && !currentSlideEl.getAttribute('data-cycle-title'))

NOTE: This is really a comment on Krzysztof Safjanowski's answer, not a separate answer. I don't have enough reputation points to leave a comment -- argh! If someone with a higher level of access could change my answer to a comment, I would be grateful. Thanks!

In the comments there is no way to put nice formatted code ; ( `(!expression && !expression)` is the same as `(!(expression || expression))` — Krzysztof Safjanowski, Aug 19 '16 at 08:16

How to remove Title or Description if empty in jQuery Cycle2 Caption

2 Answers2