Question

So I’m looking for a basic jQuery photo-reel type thing to put on my site’s homepage, and I found this page.

What I want is simply what looks like a plain <img> (no text, no arrows to switch), which slides a new photo across every 5 seconds… simple enough.

I found this sample code… which is exactly what I want, really simple, except it uses a crossfade instead of a horizontal slide.

I also found this jQuery plugin, which looks much more complex than I need, but has the kind of transition I want.

What’s the easiest way of combining the two, so I have a really simple automated image slide (with no text or arrows), but it uses the nice transition in the ‘easy slide’ plugin?

Answer 1

jquery cycle is a very extensive plugin for jquery, you could use that one.
you can go as far as you want with it, but the basics support exactly what you need.

take a look at this example:

html:

<div class="pics"> 
    <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" /> 
</div> 

css:

.pics {  
    height:  232px;  
    width:   232px;  
    padding: 0;  
    margin:  0;  
} 

.pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0 
} 

script:

$('.pics').cycle({ 
    fx: 'scrollHorz',
    timeout: 5000,
    speed: 500
});

you can use a lot more options or effects, but these basics are what you ask for.

edit:
there is even a lite version of this jquery.cycle plugin, which also does everything you ask, and leaves out some of the more advanced stuff which you don’t need for your example.
upside of this lite plugin, is that it’s much smaller than the full plugin. better for the end user.