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的内容

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

2 个答案: