Question

我可以更改数据周期以将锚点识别为链接，但这样做会丢失我的alt标题。有什么建议吗？非常感谢！

<div class="cycle-slideshow" 
data-cycle-fx=scrollHorz
data-cycle-timeout=0
data-cycle-prev=".prevControl"
data-cycle-next=".nextControl"
data-cycle-caption="#alt-caption"
data-cycle-slides=">a >img"
data-cycle-caption-template="{{alt}}"
>

Answer 1

Cycle 2的标题支持非常简单，像滑块一样强大而灵活，就像你需要一个或两个其他用例一样，只要你给出一个绝对的基本例子，你和＃39;我需要深入挖掘。

这可以解决的方式，并创建非常强大的全功能＆＃34;标题＆＃34;支持是一起绕过内置字幕，而是使用Cycles自定义事件来触发您自己的功能。所以第一步，删除任何标题特定的循环内容。

查看Events API以查看可用的内容（如果你能掌握这些内容，你可以做很多很酷的事情）。 Cycle2 Events API

其次，您可以继续在图片上使用alt标记，或使用隐藏的元素来捕获任何html内容。这将是我的优先标记，

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-slides="> .slide"
> 

     <div class="slide">
        <a href="/whatever"><img src="whatever/jpg"></a>
        <p class="slide-caption" style="display:none;">
             Hi, I'm a super fancy caption, 
             <a href="somelink">with anything</a>
             you want in it :)
        </p>
    </div>

</div>
<div class="fancy-caption-box">
    <div class="inner"></div>
    <!-- You'll insert your caption here with jQuery, put the slider and this box in a wrapper element if you need to overlay your caption elements -->
</div>

接下来你想要挂钩两个事件，（你可以变得更好，并且使用三个，但让我们开始时保持简单）。您需要在滑块加载时首先更新标题，其次每次滑块更新幻灯片时更新标题。我假设您正在使用jQuery并且知道在哪里放这个。

<script>
<!-- when the slideshow has been fully initialized -->
$('.cycle-slideshow').on('cycle-initialized', function(event, optionHash) {

    var capBox         = $('.fancy-caption-box');
    var firstCaption   = $('.cycle-slideshow').children('.slide').eq(0).find('.slide-caption').html();

    capBox.children('.inner').fadeOut().html(firstCaption).fadeIn();


});

<!-- when each slide changes -->
$('.cycle-slideshow').on('cycle-before', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {

    var capBox         = $('.fancy-caption-box');
    var caption        = $(incomingSlideEl).find('.slide-caption').html();

    capBox.children('.inner').fadeOut().html(caption).fadeIn();

});  

</script>

这只是一个非常快速和粗略的样本，它近似于我在我的项目中所做的事情，并且没有经过测试，如果你找不到我的方法我将会这样做设置一个jsfiddle与你可以看到工作的东西。你当然也需要根据自己的喜好来设计它。

这种方法的好处是你可以在你的标题块中使用你想要的任何东西，其次使用你喜欢的字幕上的任何效果，正如我所提到的，滚动更多事件和回调将允许你做更多有了这个。

Answer 2

我有同样的问题。我删除了字幕的数据循环内容，只是在img标签下添加了一个带有标题文本的div，但是在锚标记内部是这样的：

<a href="some-link.html">   
<img  src="some-image.jpg" />
<div class="captions">here's my caption</div>
</a>

我正在使用基本的 data-cycle-slides =“＆gt; a”

所以显然你可以将锚称为“复合”。

Cycle2：标题图像PLUS图像是链接

2 个答案: