The Cycle jQuery Plugin: The CSS and HTML
The CSS:
The CSS and HTML in this example will be important because this is what the jQuery plugin will be controlling. In the CSS we will only have to create section that gives the pictures their dimension. For this example the CSS will look something like this:
#backgrounds {
width:500px;
height:333px;
background-repeat:no-repeat;
}
So for the CSS we are only giving the DIV dimensions and telling it not to repeat the image.
The HTML:
In the HTML of this section we will use the DIV we created and call any images we want to use for our fading slideshow. The HTML for this section will look something like this:
<div id="backgrounds">
<img src="images/DSC_1285_500_333.jpg" width="500" height="333" alt="Picture 1">
<img src="images/DSC_1514_500_333.jpg" width="500" height="333" alt="Picture 2">
<img src="images/DSC_0511_large.jpg" width="500" height="333" alt="Picture 3">
<img src="images/Margarita1.jpg" width="500" height="333" alt="Picture 4">
</div>
In the section above we are using the DIV called "backgrounds" and are identifying four pictures to use for our slideshow.