0

我可以更改数据周期以将锚点识别为链接，但这样做会丢失我的 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}}"
>
4

2 回答 2

0

Cycle 2 的字幕支持非常简单，就像滑块一样强大和灵活，就像一两个其他用例一样，只要您需要比给出的绝对基本示例多一点，您就需要挖掘一个更深一点。

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

看看 Events API 看看有什么可用的（如果你掌握了这些，你可以做很多很酷的东西）。Cycle2 事件 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，其中包含您可以看到的工作。当然，您还需要根据自己的口味对其进行样式设置。

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

于 2014-12-30T14:47:48.553 回答
-1

我有同样的问题。我删除了标题的数据循环内容，只是在 img 标签下方但在锚标签内添加了一个 div，其中包含我的标题文本，如下所示：

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

我正在使用基本的 data-cycle-slides="> a"

因此，显然您可以将锚视为“复合材料”。

于 2013-07-14T17:59:54.817 回答