我需要添加2个不同的标题来自定义Nivo Lightbox中的每一个
示例：
但它看起来不可能，有没有办法在1张图片上放2个标题？
或者无论如何解决这个问题？另外，我希望能够将标题用作链接，但存在很多限制。感谢。
代码：
<a class="image image-full" data-lightbox-gallery="gallery1" href="nivo-lightbox/img/b/grey_antique_q_white_mortar_concave_finish_technique_view_b.jpg" title="Grey Antique Q White Mortar Concave Finish Technique View B">
<img id="sample_board_image" src="nivo-lightbox/img/s/grey_antique_q_white_mortar_concave_finish_technique_view_b.jpg" alt="Grey Antique Q White Mortar Concave Finish Technique View B"></img>
</a>
必须有一种方法可以在标题中添加多种样式，或以任何其他方式在灯箱的叠加层中添加该文字。
我实际上已经尝试在nivo灯箱上插入另一个html，但是它给我带来了很多麻烦，内容没有正确显示，内容是否有适合灯箱的方式？
答案 0 :(得分：0)
是的，你可以通过为nivo滑块的图像的title属性指定一个元素id，并通过为nivo lightbox的链接的href属性指定一个元素id来实现。元素id应指向包含您希望的任何内容的元素。
nivo lightbox
在nivo灯箱中，可以使用id元素作为href属性的值来显示html内容。因此，为了显示带有标题的图像，图像和标题应该是以下示例中目标元素#test的html内容的一部分。
<a href="#test" class="image image-full" data-lightbox-gallery="gallery1" href="nivo-lightbox/img/b/grey_antique_q_white_mortar_concave_finish_technique_view_b.jpg" title="Grey Antique Q White Mortar Concave Finish Technique View B">
<img id="sample_board_image" src="nivo-lightbox/img/s/grey_antique_q_white_mortar_concave_finish_technique_view_b.jpg" alt="Grey Antique Q White Mortar Concave Finish Technique View B"></img>
</a>
<div id="test" style="display:none">this is from test
<img id="sample_board_image" src="nivo-lightbox/img/s/grey_antique_q_white_mortar_concave_finish_technique_view_b.jpg" alt="Grey Antique Q White Mortar Concave Finish Technique View B"></img>
<p>some content</p>
<p>a second <a href=#>title</a> as link</p>
</div>
nivo滑块
例如，从nivo滑块jquery插件的演示代码中略微修改的摘录，
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. <br/>
<b>and another title!!!!</b>
</div>
</div>
</div>
因此，您可以将任何html内容和类值添加到元素中，以根据需要修改标题。
修改
为了回应最新评论，要使nivo灯箱适合灯箱内的html内容图像和屏幕分辨率，您需要指定属性height="100%"和width="100%"。
一个非常粗略的例子可以在下面找到，
http://jsfiddle.net/45nAc/show/
第一张图片是从html生成的
<强> HTML
<p><a href="#test" data-lightbox-gallery="gallery1"><img alt="" src="http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_s.jpg"></a> <a title="Calm Before The Storm (One Shoe Photography Ltd.)" href="http://farm4.staticflickr.com/3824/9041440555_2175b32078_b.jpg" data-lightbox-gallery="gallery1"><img alt="" src="http://farm4.staticflickr.com/3824/9041440555_2175b32078_s.jpg"></a> <a title="Lambs Valley (JMImagesonline.com)" href="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_b.jpg" data-lightbox-gallery="gallery1"><img alt="" src="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_s.jpg"></a> <a title="Grasmere Lake (Phil 'the link' Whittaker (gizto29))" href="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_b.jpg" data-lightbox-gallery="gallery1"><img alt="" src="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_s.jpg"></a></p>
<div id="test" style="display:none">
<img width="100%" height="100%" alt="" src="http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_b.jpg"/>
<div class="titles">
<p> this is a title1 <br/>
this is a <a href=#>title2</a>
</p>
</div>
</div>
<强> CSS
#test{
width:100%;
height:100%; /*background:url('http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_b.jpg');*/
}
#test .titles {
text-align:center;
}
.nivo-lightbox-theme-default .nivo-lightbox-ajax, .nivo-lightbox-theme-default .nivo-lightbox-inline{
margin:0 !important;
padding:0 !important;
top:0;
width:100%;
height:100%;
background-color:transparent;
box-shadow:none;
}
准备好玩css并实现你需要的任何东西。