Cycle2：帶標題的圖像PLUS圖像是鏈接

我可以更改數據週期以將錨點識別爲鏈接，但這樣做會丟失我的alt字幕。有什麼建議嗎？非常感謝！Cycle2：帶標題的圖像PLUS圖像是鏈接

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

來源

2013-06-12 user2473869

嘿 - 你是否設法解決這個問題？ – pushplaybang

-1

我有同樣的問題。我刪除數據週期的東西對字幕和剛添加一個div img標籤下面我標題的文本，但錨標記像這裏面：

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

而且我使用的基本數據週期滑梯=「> a」

顯然，您可以將錨點視爲「組合」。

來源

2013-07-14 17:59:54 twiddly

這就是簡單地不等於使用循環標題 – pushplaybang

那麼你的解決方案是什麼？我提供了一個可行的解決方法，你只提供了一個downvote，所以這有幫助嗎？ – twiddly

這很有用，因爲它有望幫助其他用戶立即認識到這不是對實際問題的有效答案。您的解決方法不能提供字幕的有用替代方法。 – pushplaybang

週期2的標題的支持是非常簡單的，因爲強大而靈活的，因爲它只要你需要比給出的絕對簡單的例子多一點是作爲一個滑塊，像一個或兩個其他用途的情況下，你需要深入挖掘。

這是可以解決的，創造非常強大的功能齊全的「字幕」的方式支持是繞過內置的字幕一起，而使用週期自定義事件來觸發自己的函數。所以第一步，刪除任何標題特定的週期的東西。

看一看事件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用你能看到的東西工作。你當然也需要根據你的口味來設計。

這種方法的好處在於，您可以在字幕塊中使用任何您想要的東西，然後使用您喜歡的任何字幕效果，如前所述，滾動更多事件和回調將使您可以做到更多與此。

來源

2014-12-30 14:47:48 pushplaybang

Cycle2：帶標題的圖像PLUS圖像是鏈接

回答

相關問題