bxslider的高級字幕

這個問題已被問到，但沒有答案 - 我相信因爲沒有提供足夠的信息。bxslider的高級字幕

我使用bxslider作爲我的模板。看到這裏： http://bxslider.com/examples/image-slideshow-captions

我可以創建一個非常簡單的標題使用「title」屬性，但我希望能夠創建字幕（具有不同的屬性，如較小的文字），我想把它變成一個鏈接。我試過在容器中實現一個div，也許很明顯，我不能使用jquery實現它，以便與滑塊同步。我也嘗試編輯CSS無濟於事。

如何添加不僅僅是圖像標題的標題？像一個覆蓋圖片的div？

來源

2014-02-15 RandomPleb

你撥弄沒有工作... –

我只是使用共享所有代碼的小提琴。有很多。我不知道如何讓那小提琴奏效。雖然它在我的網站上工作。 – RandomPleb

好的，檢查我的答案。 –

您甚至不需要使用bxslider提供的字幕選項。將標題添加爲形成幻燈片的li標記的一部分。這就是標題：true選項的作用，即將bx-caption類添加到幻燈片中。

對於如：

<li> 
     <img src="http://bxslider.com/images/730_200/hill_trees.jpg" /> 
     <div class="caption1"> 
     <span>Image 1</span> 
     <div class="caption2"><a id="img1a" href="#">Visit Australia</a></div> 
     </div> 
</li>

這種方式使用CSS，你可以用字體大小也玩。

這裏的http://jsfiddle.net/s2L9P/

來源

2014-02-15 05:59:10 VJS

太棒了！有用。現在我可以真正地定製這個。謝謝你的解釋。 – RandomPleb

@RandomPleb，高興地幫助:) – VJS

你也可以刪除api中的標題選項 –

我想我解決了你的問題，但我無法測試它，因爲你的小提琴不能像你創建它一樣工作。

從Appends image captions to the DOM這種變化的代碼：

/** 
    * Appends image captions to the DOM 
    * NETCreator enhancement (http://www.netcreator.ro) 
    */ 
    var appendCaptions = function(){ 
     // cycle through each child 
     slider.children.each(function(index){ 
      // get the image title attribute 
      var title = $(this).find('img:first').attr('title'); 
      var nc_subtitle = $(this).find('img:first').attr('nc-subtitle'); 
      // append the caption 
      if (title != undefined && ('' + title).length && nc_subtitle != undefined && ('' + nc_subtitle).length) { 
       $(this).append('<div class="bx-caption"><span class="title">' + title + '</span><br/><span class="nc_subtitle">' + nc_subtitle + '</span></div>'); 
      } 
     }); 
    }

現在你可以添加字幕對您的字幕標題：

<a href ="page.php"> 
    <img src="http://calindragan.files.wordpress.com/2011/01/winter.jpg" title="title 1 here" nc-subtitle="The second title"/> 
</a>

只要你想你可以風格的字幕，使用CSS類nc_subtitle。

希望它能幫助！

編輯

變化由你在擺弄這個共享整個的JavaScript：

http://pastebin.com/0fvUezg1

和HTML這一點：

http://pastebin.com/T038drDV

它的工作原理。

來源

2014-02-15 05:48:57

嗯。它不工作。你的新增功能確實有助於我理解它是如何工作的。 – RandomPleb

bxslider的高級字幕

回答

相關問題