向缩略图滑块添加文本/标题

Question

我需要为每张图片添加标题。但标题需要在滑块旁边的灰色框中。你可以在这里看到这个想法的一个例子： http://pagedev.co.uk/richmond/show-open.html

基本上每张图片都需要有标题、布面油画和尺寸标签。但它需要随着每张图片而改变。

希望有人可以帮助我。您应该可以使用上面的链接检查代码，但是如果您需要任何东西，请告诉我并发布。

提前谢谢你。

李

Answer 1

我无法对此进行测试，因为我没有您的所有图片，但我认为这就是您想要的 :)

<div class="col span_9_of_12">
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<img src="images/large1.jpg" />
<div class="painting-description">
<p><strong>The Heart of Suffolk</strong></p>
<p>(on a typically rainy day) 1965</p>
<p>Oil on canvas</p>
<p>28 x 34 inches</p>
</div>
</li>
<li>
<img src="images/large2.jpg" />
<div class="painting-description">
<p><strong>The Heart of Suffolk</strong></p>
<p>(on a typically rainy day) 1965</p>
<p>Oil on canvas</p>
<p>28 x 34 inches</p>
</div>
</li>
<li>
<img src="images/large3.jpg" />
<div class="painting-description">
<p><strong>The Heart of Suffolk</strong></p>
<p>(on a typically rainy day) 1965</p>
<p>Oil on canvas</p>
<p>28 x 34 inches</p>
</div>
</li>
<li>
<img src="images/large4.jpg" />
<div class="painting-description">
<p><strong>The Heart of Suffolk</strong></p>
<p>(on a typically rainy day) 1965</p>
<p>Oil on canvas</p>
<p>28 x 34 inches</p>
</div>
</li>
<li>
<img src="images/large5.jpg" />
<div class="painting-description">
<p><strong>The Heart of Suffolk</strong></p>
<p>(on a typically rainy day) 1965</p>
<p>Oil on canvas</p>
<p>28 x 34 inches</p>
</div>
</li>
<li>
<img src="images/large6.jpg" />
<div class="painting-description">
<p><strong>The Heart of Suffolk</strong></p>
<p>(on a typically rainy day) 1965</p>
<p>Oil on canvas</p>
<p>28 x 34 inches</p>
</div>
</li>
</ul>
</div>
</div>

Answer 2

如果您不希望描述成为滑块的一部分，则需要将描述存储在某处（例如在 javascript 数组中）。

然后可以使用flexslider的before选项（见http://www.woothemes.com/flexslider/的步骤4）替换.painting-description的内容