JQuery Slide Show Simplification

Question

I'm trying to come up with the most basic example of making a JQuery slide show where you click on the current image you're viewing and you cycle through a gallery of photos. I know its probably not the most basic example, because if I want to add a new image I have to code more JQuery. Is there a more abstract approach where I don't have to code JQuery in terms of div id's and let classes take care of the work? Here is my JQuery

$(document).ready(function() {
$("#pic1").click(function() {
    $("#pic1").hide();
    $("#pic2").show();                
});  
$("#pic2").click(function() {
    $("#pic2").hide();
    $("#pic3").show();                
});
$("#pic3").click(function() {
    $("#pic3").hide();
    $("#pic1").show();                
});
});

The rest is here. http://jsfiddle.net/XjdTX/3/

Answer 1

This should do the trick:

http://jsfiddle.net/XjdTX/11/

I changed the <div id="slideframe">...</div> to use a class instead. This will allow you to have multiple slide shows functioning off the same code, as shown in the jsFiddle. For toggling through the pics, the pic class is used and cycles based on the index of the clicked image.

There is also code in the jsFiddle that will fade the images instead of just toggling their visibility.

$(document).ready(function() {

    $('.slideframe').each(function() {

        var $pics = $(this).find('.pic'),
            max = $pics.length;

        $pics.on('click.slideframe', function(e) {
            var idx = $pics.index(this);
            if (idx < 0) {
                return false;
            }
            $(this).hide();
            $pics.eq(++idx % max).show();
        });
    });
});

Answer 2

$(document).ready(function() {
    // set display:none for all <img> tags except the first
    $('.pic:gt(0)').hide();

    // stores all matches for class="pic"
    var $slides = $('.pic');

    $slides.click(function(){
        // stores the currently-visible slide
        var $current = $(this);    
        if( $current.is($slides.last()) ) {
            $current.hide();
            $slides.first().show();
        } 
        // else, hide current slide and show the next one
        else {
            $current.hide().next().show(); 
        }
    });
});

Edit Changed to include element caching, as per ANeves's suggestion.

Full code here: http://jsfiddle.net/XRpeA/