A really simple cross-fade image for beginners

Question

Hello, I would like to put a cross-fading image into a table that is my website header. I don't need anything complicated at all, no controls etc, just want 8 images that fit my cell to continuosly crossfade after 3 seconds or so. Found many scripts/plugins/jquery etc but they all seem very complicated for beginners. I've used 'easyrotator' which is so easy to use, but it doesn't seem to have a cross fade on the free mode, just a swipe and i'm sure I can find similar for free. Maybe I'm missing something but I would have thought dreamweaver (being the helpful prog that it is) would have something to do this?
Ideally, I would like it to be continuous regardless of the page people are on. I imagine this is above my head so if too tricky, perhaps it could just be random image fade.
Any advice on the best thing to use here is greatly appreciated!

Answer 1

Suzie8484 wrote:
Yes, it's the 'fade' option here: http://jquery.malsup.com/cycle/
There really isn't enough instructions on this website for beginners to understand exactly what and where to put the various code otherwise this would be perfect!
ok, here goes...i'll try to explain the process.
1) Insert a <div> on your page and give it the class of 'slideshow' like below.
<div class="slideshow">
</div>
2) Insert your images into the <div> as below: (example below shows images stored in 'images' folder)
<div class="slideshow">
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" width="200" height="200" />
<img src="images/beach3.jpg" width="200" height="200" />
<img src="images/beach4.jpg" width="200" height="200" />
<img src="images/beach5.jpg" width="200" height="200" />
</div>
3) Style the 'slideshow' <div> with css. Go into code view and paste the below directly before the closing </head> tag near the top of your page.
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
4) Add the jquery scripts to your page. Go into code view and paste the below directly AFTER the css you pasted in above so this code is now directly before the closing </head> tag
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
</script>
Thats it!.
Well you would want to make sure the dimensions of the 'slideshow' <div> reflect those of your image.
So for instance if your image is 300px x 300px the dimensions should be 332px x 332px. (see below) Why the extra 32px - because this is allocated for the 15px left/right/top/bottom padding and 1 px border around the image that you see on the example page.
<style type="text/css">
.slideshow { height: 332px; width: 332px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
Also ideally you want to download the jquery cycle script rather than use the directly linked one just incase in future the script is moved.
So download the script from the link provided on the page and change this link:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
To wherever you keep the script in your site folder (below its kept in a folder named 'jquery_scripts':
<script type="text/javascript" src="jquery_scripts/jquery.min.js">