Question

在我的幻灯片中，一些幻灯片没有标题，但我添加的样式使标题和说明框显示没有任何文字，显然它看起来很奇怪。

如果找不到文字，如何让Caption插件不显示标题/描述？

以下是代码：

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

这里是JS代码：

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

我继续编辑caption plugin for Cycle2; version: 20130306并将此类代码class="cap_title"添加到以下行：

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

然后我试图隐藏＆＃34; .cycle-overlay＆＃34;使用以下事件，但失败了：

$( '.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

诀窍是我正在修改模板。如果未提供标题或说明，则模板设置为空白＆＃39;＆＃39;。

$('.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/

Answer 2

谢谢你，Krzysztof！这对我也有用。

其他人的有用说明：Krzysztof的代码将隐藏所有缺少标题或描述的幻灯片的叠加层。这最初让我失望，因为我有一些标题但没有描述的幻灯片。我想要显示这些幻灯片上的标题，而不是隐藏。要获得该结果，我所要做的就是将“if”语句中的“或”更改为“and”：

原始版本：

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

<强>修饰：

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

注意：这实际上是对Krzysztof Safjanowski的答案的评论，而不是单独的答案。我没有足够的声望点发表评论 - 唉！如果具有更高访问权限的人可以改变我对评论的回答，我将不胜感激。谢谢！

如何在jQuery Cycle2 Caption中删除标题或描述为空

2 个答案: