jQuery слайд-шоу с отдельным div, содержащим текст, специфичный для изображения

Question

Я взял и по существу слегка изменил слайдер изображений jQuery, чтобы он работал так, как я хочу, а именно: «Красивая галерея слайд-шоу в стиле Apple с CSS и jQuery.

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

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

HTML, CSS и JavaScript для моей попытки могут быть найдены в http://jsfiddle.net/v9vf9/ (результат не появляетсяправильно, так как все мои файлы на данный момент хранятся локально)

Я уверен, что то, что я пытаюсь достичь, не очень сложно, но, кажется, выходит за рамки моих возможностей, я ценю любые советы, помощь или решения для достижения успехас этим!!И с нетерпением жду улучшения моих знаний.

Заранее спасибо, Карл

Answer 1

Итак, как предлагается в комментариях

http://jsfiddle.net/lollero/Sw4y8/

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

HTML:

    <div class="slide">
        <img src="http://placekitten.com/g/500/230" alt="" />
        <div class="text">Text</div>
    </div>

</div>

<div id="thumbnails">Thumbnails</div>

CSS:

#slides {
    height: 550px; /* or what ever amount is big enough to fit the text there too */
    float: left;
    position: relative;
    z-index: 5;
}

#thumbnails {
    float: left;
    clear: both;
    position: relative;
    z-index: 10;
    top: -110px; 
}

.text { margin-top: 50px; /* for example if you want to give thumbnails room to sit above the text */ }