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

jquery, jquery-cycle2

Solution

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/

Problem

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

Original source