Добавление текста / заголовка в слайдер миниатюр

Question

Добавление текста / заголовка в слайдер миниатюр

0

Мне нужно добавить надпись к каждому изображению. Но надпись должна быть в сером прямоугольнике рядом с ползунком. Вы можете увидеть пример этой идеи: http://pagedev.co.uk/richmond/show-open.html

В основном каждое изображение должно иметь заголовок, холст, масло и тег размера. Но он должен меняться с каждым изображением.

Надеюсь, кто-то может мне помочь. Вы должны быть в состоянии проверить код, используя ссылку выше, но если вам что-то нужно, дайте мне знать и плохо опубликуйте его.

Заранее спасибо.

подветренный

lbollu 14 апр. 2014, в 10:20

Источник

1

Что вы пробовали до сих пор?
leo 14 апр. 2014, в 07:55

Теги:

javascript

jquery

html

css

caption

2 ответа

Ещё вопросы

Thomas · Answer 1 · 2014-04-14T06-04-00.000Z

Если вы не хотите, чтобы описание было частью слайдера, вам нужно хранить описания где-нибудь (например, в массиве javascript).

Затем вы можете использовать before вариант FlexSlider (шаг 4 на http://www.woothemes.com/flexslider/), чтобы заменить содержимое .painting-description

jkell311 · Answer 2 · 2014-04-14T05-08-00.000Z

Я не могу проверить это, поскольку у меня нет всех ваших изображений, но я думаю, что это то, что вы хотите :)

<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>