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(); 
    }
});

Answer 1

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/