user2955412 user2955412 - 2 years ago 108
jQuery Question

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

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" >

And here's the JS Code:

speed: 600,
manualSpeed: 6000

I went ahead and edited the
caption plugin for Cycle2; version: 20130306
and just added this class code
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 ) {
} else {

Answer Source

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

    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>';


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download