javascript 带有 bxslider 的高级字幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21793785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Advanced Captions with bxslider
提问by RandomPleb
This question has already been asked, but has no answer - I believe because not enough information was provided.
这个问题已经被问到，但没有答案 - 我相信是因为没有提供足够的信息。
I am using the bxslider as my template. See here: http://bxslider.com/examples/image-slideshow-captions
我使用 bxslider 作为我的模板。请参阅此处：http: //bxslider.com/examples/image-slideshow-captions
I can create a very simply caption using the "title" attribute, but I want to be able to create subtitles (with different attributes like smaller text) and I want to turn this into a link. I've tried implementing a div within the container, and perhaps obviously, I can't get that to sync with the slider without implementing it with jquery. I've also tried editing the CSS to no avail.
我可以使用“title”属性创建一个非常简单的标题，但我希望能够创建字幕（具有不同的属性，如较小的文本），我想将其转换为链接。我已经尝试在容器中实现一个 div，也许很明显，如果不使用 jquery 实现它，我就无法让它与滑块同步。我也试过编辑 CSS 无济于事。
How can I add a caption that more than just an image title? Like a div overlaying the picture?
如何添加不仅仅是图像标题的标题？像一个 div 覆盖图片？
回答by VJS
You don't even need to use the captions option provided by bxslider. Add the captions as part of the li tag that forms your slide. That's what the captions:true option does anyways, i.e appends the div with bx-caption class to your slide.
您甚至不需要使用 bxslider 提供的标题选项。添加标题作为构成幻灯片的 li 标签的一部分。无论如何，这就是 captions:true 选项所做的，即将带有 bx-caption 类的 div 附加到您的幻灯片。
For eg:
例如：
<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>
This way using css, you can play around with the font sizes too.
通过这种方式使用 css，您也可以使用字体大小。
Here's the the fiddle http://jsfiddle.net/s2L9P/
回答by NETCreator Hosting
I think I solved your problem, but I can't test it because your fiddle doesn't work as you created it.
我想我解决了你的问题，但我无法测试它，因为你的小提琴在你创建它时不起作用。
Change the code from Appends image captions to the DOMwith this:
使用以下代码更改代码 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>');
}
});
}
Now you can add subtitles to your caption titles:
现在您可以为字幕标题添加字幕：
<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>
You can style the subtitle as you want to, using the CSS class nc_subtitle.
您可以使用 CSS 类根据需要设置副标题的样式nc_subtitle。
Hope it helps!
希望能帮助到你！
EDIT
编辑
Change the entire JavaScript shared by you in fiddle with this:
更改您共享的整个 JavaScript 来解决这个问题：
And the HTML with this:
和这样的 HTML：
It works.
有用。
