Question

I’m looking for a particular kind of slideshow plugin, that uses the jQuery library.

Please take a look here:

http://www.pacificcoastnews.com/

This is exactly what I want, 4 individual fading images, fixed size, no controls. I’ve been looking for a while and haven’t found anything similar. I suppose I could make this with 4 separate slideshows but even then, I can’t find a simple vertical slideshow, without controls and stuff, that’s simple enough for me to use 4 of, to make this.

Does anybody know of a plugin like the one above? Or does anybody know of a good plugin that I could, so I can use 4 instances together, simply?

Answer 1

The jquery cycle plugin can provide exactly that without any additional parameters. In your case you’d have 4 slideshows all setup like the following:

http://jsfiddle.net/lucuma/w6mLk/

http://jquery.malsup.com/cycle/

HTML:

<div class="slides" id="slideshow">
  <img src="http://scienceblogs.com/startswithabang/upload/2012/04/why_should_there_be_dark_matte/AS17-148-22727_lrg-thumb-500x500-74032.jpeg" />
  <img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" />    
  <img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" />    
  <img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" />
</div>

<div class="slides" id="slideshow">
  <img src="http://scienceblogs.com/startswithabang/upload/2012/04/why_should_there_be_dark_matte/AS17-148-22727_lrg-thumb-500x500-74032.jpeg" />
  <img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" />
  <img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" />
  <img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" />
    </div>
<div class="slides" id="slideshow2">
  <img src="http://scienceblogs.com/startswithabang/upload/2012/04/why_should_there_be_dark_matte/AS17-148-22727_lrg-thumb-500x500-74032.jpeg" />
  <img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" />
  <img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" />
  <img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" />
</div>
<div class="slides" id="slideshow3">
  <img src="http://scienceblogs.com/startswithabang/upload/2012/04/why_should_there_be_dark_matte/AS17-148-22727_lrg-thumb-500x500-74032.jpeg" />
  <img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" />
  <img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" />
  <img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" />
</div>

jquery: $('#slideshow').cycle();​
$('#slideshow2').cycle();​ or $('.slides').cycle();
etc