I don't know of one that's exactly what you're looking for, but I say if you haven't found it yet, take the plugin that's closest to it and tweak the code/css. Pickachoose might be a good one to try. I bet you can easily move around and restyle the play/pause/fwd/back buttons and change the image thumbnails to numbers.

devinvarsalona

60

One of my colleagues hacked a pseudo-slideshow together using Fancybox, a jQuery library I've grown to like a lot.

Essentially, it's just a grid of images in HTML, just like you see in the post, with each image wrapped in a link to the full-size image. Each link has class="fancybox" rel="vol_slideshow". Fancybox captures the click event on each link and displays the linked-to image in a light window. When multiple images have the same rel attribute, users can page through them without closing the window. It works well and doesn't take much set up.

Chris Amico

785

I'm a big fan of Gallerific.

My criteria are pretty much the same as yours - works within the page, runs on jQuery, and something simple that lets the photographs, not the special effects, do the talking. I also prefer slideshows that don't require new pageviews for each image, which is why we use a Flash-based system now. It does the job well, but I like Gallerific even better.

There's a nice set of demos at the plugin page, from minimal to thumbnail-driven to custom controls.

Ryan Pitts

95

For those interested, I ended up using a good tutorial by L.A. based Web designer Soh Tanaka -- Automatic Image Slider w/ CSS & jQuery found here: http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/

I modified the code to add in the ability to specify captions and photo credits, plus some other small changes. Each caption is placed in the alt attribute of its img tag; Each photo credit is placed in its own div just below the img tag.

I like how simple it is to put in photos, captions and credits in html, and how Soh separated the Jquery/Javascript from the html.

Here is the final result: http://www.projo.com/extra/2010/flooding/

The script has the ability to rotate the photos automatically, but I turned it off for this page.

Thanks again for the help. And thanks for the tutorial, Soh. Tim Barmann

Timothy Barmann

25

Try writing your own. jQuery is very easy to pick up and this is a simple enough bit of code that using a library is probably overkill if you want it to work a specific and simple way.

Code might look something like this.

HTML

<div id="slideshow">
<div class="picture active" id="1"> stuff </div>
<div class="picture" id="2"> stuff </div>
<div class="picture" id="3"> stuff </div>
<div class="picture" id="4"> stuff </div>
</div>

JS

$('.picture').bind('click',function() {
this.removeClass('active');
$("#"+this.attr('id')+1).addClass('active');
});

CSS

.picture {
display:none;
}
.active{
display:block;
}

The above code isn't intended to actually work, but it suggests what could work. To clean it up, can use z-indexes or some other CSS way of hiding other images and do transitions. Should probably load photos other than the first in javascript too. And will need some sort of previous and next buttons as well.

Albert Sun

139

Have you tried either Lightbox JS or Colorbox? Seems like one of those two could work for you.

Chrys Wu

395