CODEWITHSUNDEEP
jqueryajaxpluginsslideshow
mkoryak
mkoryak

Reputation: 57928

jquery plugin for making a slideshow from image urls

The request is a simple one, but is hard to google for. Here are the requirements:

So far, ive seen lots of slideshow plugins that require lots of complex backing html, and css. it seems somewhat silly to construct this html in order for it to be transformed by the slideshow plugin anyway.

Also, i had no idea how bad some of the code behind these slideshow plugins can be. jeez!

Upvotes: 0

Views: 820

Answers (4)

Mottie
Mottie

Reputation: 86413

This jQuery plugin called Cycle is one of the nicest slideshows I've seen (that isn't a lightbox type). I looked through the documents and it doesn't seem to have keyboard support nor an option to use an array for the images, but it does have examples of dynamically adding more images. Anyway, judge for yourself.

Upvotes: 0

da5id
da5id

Reputation: 9136

Dunno about keyboard navigation, but the answer I accepted to this similar question should sort you out.

EDIT: Just realised it also includes keyboard navigation. See how I implemented it for reference if you like (click the folio tab).

Upvotes: 1

Justin Van Horne
Justin Van Horne

Reputation: 1322

Here is something I quickly put together (haven't tested it at all - it's just for ideas) that you might be able to develop on. It shouldn't be hard.

var imgs = ['a.png', 'b.png', 'c.png'];

function Slideshow(img_list, container) {
    var self = this;
    var $slides = [];
    var current = { 'ith': 0, '$slide': null };

    function initialize() {
        // Create the images
        img_list.map(function (i) {
            $slides.push($('<img>').attr('src', i).hide().appendTo(container));
        });     

        current.$slide = $slides[0];
        current.ith = 0;

        // Initialize binds (jquery hotkeys or something)
        $(document).bind('keydown', '>', function () {
            // Do stuff
            self.next();
        });

        $(document).bind('keydown', '<', function () {
            // Do stuff
            self.prev();
        });

    };

    this.indexTo = function (i) {
        current.$slide.hide();
        current.$slide = $slides[i];
        current.ith = i;

        if (current.$slide ==== undefined) {
            if (i < 0) {
                current.$slide = $slides[$slides.length - 1];
                current.ith = $slides.length - 1;
            } else {
                current.$slide = $slides[0];
                current.ith = 0;
            }
        }

        // Effects or something else
        return current.$slide.show();
    };

    this.next = function () {
        return self.indexTo(current.ith++);
    };

    this.prev = function () {
        return self.indexTo(current.ith--);
    };

    initialize();
};

Upvotes: 3

Rene Pilon
Rene Pilon

Reputation:

Go through some of the past articles / items on http://www.designfloat.com/ - there are quite a few excellent jQuery samples of what you are trying to do.

Regards,

Rene Pilon

Upvotes: 0

Related Questions