JQuery Image Slider

[m8fyu]

I'm stuck with this problem so, once again, find it necessary to ask my chums at webmasterworld for some guidance.

I have a JQuery image slider [css-plus.com ] that is styled with CSS. There are prev and next buttons to scroll through the images.

The Problem: when my page initially loads my images are positioned one above the another (in a column fashion), rather than stacking on top of one another. When I click either of the next / previous buttons the 'column' collapses and the images positioned as they should be.

I tested the code with hard coded img src tags and it worked fine. now I am pulling my images from a db and I get the problem.

Can anyone offer and suggestions as to what might be causing this to happen? I can see from the source code that the structure is as it should be.

I suspect the problem may be due to where I have my document ready function.

$(document).ready(function(){
$("p.caption").text($("#polaroid img:visible").attr("alt"))

Its currently inside my JS file.

I'm new to JavaScript would really appreciate any guidance offered.

HTML

<div id='polaroid'>
<img src='http://127.0.0.1/images/services/image1.jpg' class='slider' alt='image1' title='image1' />
<img src='http://127.0.0.1/images/services/image2.jpg' class='slider' alt='image2' title='image2' />
</div>

<div id='polaroid-caption'>
<a id='prev' href='#'></a>
<a id='next' href='#'></a>
<p class='caption'></p>
</div>

CSS

#polaroid{
background: #000000;
margin: 0 0 0 0px;
padding: 10px 10px 0 10px;
width: 280px;
}
#polaroid img{
width: 280px;
height: 195px;
}
#polaroid-caption{
color: #fff;
background: #000000;
height: 40px;
margin: 0 0 20px 0px;
padding: 10px 10px;
width: 280px;
}

/* Caption and controls */
#polaroid-caption a{
color: #000;
}
#polaroid-caption p.caption{
margin-top: 5px;
font-size: 12px;
text-align: center;
}
#prev, #next{
display: block;
height: 24px;
width: 14px;
}
#prev{
background: url(../images/prev.png) no-repeat left top;
float: left;
}
#next{
background: url(../images/next.png) no-repeat left top;
float: right;
}

/* css3 */
#polaroid{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#polaroid-caption{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.slider {
/*display: none;*/
}

JS

$(document).ready(function(){

$("p.caption").text($("#polaroid img:visible").attr("alt"))
...rest of code

[Fotiman]

The example given at the page you linked to has this on all of the images except for the first one to be shown:

style="display: none;"

Do your images have that?

[m8fyu]

Hi Fotiman

No they didn't have that applied. They do now though, and everything is working fine. Thanks so much for your help.