Question

I have taken and essentially lightly modified a jQuery image slider to operate how I want, specifically one called: A Beautiful Apple-style Slideshow Gallery With CSS & jQuery.

I am currently attempting to link this slideshow to a separate div below that contains image specific text, I have achieved this in a very simple manor by hyper linking each thumbnail to load the content I want for each image.

Ideally I would like this to happen by using the next and previous controls for the slideshow but have tried multiple solutions without success. My current attempt loads the text for image 1 and image 2 but gets stuck from there onwards.

The html, css and JavaScript for my attempt can be found at http://jsfiddle.net/v9vf9/ (The result does not appear correctly as all my files are for the moment stored locally)

I am sure that what I am trying to achieve is not very complicated but seems to be beyond my ability, I appreciate any advice, help or solutions to succeed with this!! And look forwards to improving my knowledge.

Thank you in advance, Carl

Answer 1

So, as suggested in the comments

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

It’s a bit easier to put the text inside the animated slides so that they are animated with the images automatically and most importantly give #slides element a bigger height where the text can fit in.

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 */ }