16 Jquery Slideshow Applications You CANNOT Miss – Updated!

Update – Nov 12th, 2009 – I’ve just stumbled across 7 more Jquery Slideshow scripts that you can use on your blog or website! I’ve added them to the slideshow list.

Jquery – The write less, do more javascript library has all sorts of different code samples that do a wide variety of things. Today, we’ll be looking at different Jquery Slideshow applications that can be used to diversify your homepage, content, or anywhere that is big enough to display an image.

Jquery Slideshow

lightbox

1. Lightbox JS

  • What it does: Click on an image and it expands the picture to its regular size with a grey overlay shading the content behind it. A great way to focus the attention on the picture that the visitor clicks on.
  • Example: Link

———————-

2. Innerfade

  • What it does: Takes an image (or div element) and fades the pictures in and out. Very impressive script for something that is so easy to create.
  • Can also take adsense advertisements and fade it in and out. A neat little effect.
  • Example: Link

———————-

jquery-slideviewer

3. Jquery SlideViewer 1.1

  • What it does: Displays images in a slideshow format. It has numbers at the bottom of it to navigate through the images easily. When one is clicked, it provides a neat scrolling action to the image that you’ve chosen.
  • Example: Link

———————-

enhance-jquery-slideshow

4. Enchance – Jquery Image Gallery

  • What it does: Takes images and makes a slideshow with numbers on the side for easy navigation. When clicked, the box surrounding the image matches the width and height of the new image.
  • Example: Link

———————-

malsup-cycle-plugin

5. Jquery Cycle Plugin

  • Has 6 variations for your images.. including: Shuffle, Zoom, Fade, turnDown, CurtainX and Scroll Right On Click.
  • Example: Link

———————-

6. A Simple Jquery Slideshow

  • Isn’t a downloadable file, but has an easy tutorial to make an awesome slideshow that fades between images. It focuses on minimal code for maximum results.
  • Example: Link

———————-

7. Galleria

  • This is a gallery for images, so it doesn’t qualify as a slideshow like the ones above. However, it has clickable thumbnails and features a nice file size (around 4kb).
  • Example: Link

———————-

8. CrossSlide

  • Very impressive application that fades to each image that you add to it, while scanning the picture. It is hard to explain exactly what it does, so check out the example.
  • Example: Link

———————-

9. Jquery Slideshow Interface

  • Scrolls through images, has a clickable navigation bar and uses an AJAX loader in between images. Interesting, but the demos aren’t spectacular.
  • Doesn’t have any instructions on how to install, so I’m suggesting that experienced website owners use this. (If “Source Code” and “Javascript” are foreign to you, stay away!)
  • Example: Link

———————-

10. Jquery Multimedia Portfolio

  • User manually slies through the photos, it reminded me of a mac dock as the pictures grow bigger and smaller depending on where the slider is on the slideshow.
  • Useful for quick browsing of a large photograph collection
  • Example: Link

———————-

11. jQuery: jqGalScroll v2.1 (Photo Gallery)

  • Very simple and clean code. The jqGalScroll creates a slideshow that doesn’t automaticaally show the next picture, but instead lets the user click the number when they wish to proceed…  Perfect for wedding pictures, photography pictures etc.
  • Emphasizes one photo by not switching automatically to the next picture.
  • Example: Link

———————-

12. EOGallery – Combining Ajax And Jquery

  • Allows the user to either put the jquery slideshow on autopilot or allows them to do it manually. This slideshow also has text that each photo can show below, which is a very nice touch!
  • XHTML Strict 1.0 Valid for anyone that likes no errors when they validate their XHTML :)
  • Example: Link

———————-

13.  ZoomImage

  • Out of the entire list, I actually think this one is the most original in presenting the images. When you click a thumbnail, the image expands to its full form. You can then click the next arrow to view the next photo in the slideshow, then the image returns to its thumbnail and the next one “zooms” out… Very creative!
  • Anyone that knows basic Jquery can edit this without a hitch.
  • Example: Link

———————-

14. MB.Gallery

  • Looks like a promising jquery component… however I found it quite slow. It might be good for a full page dedicated to a jquery slideshow/gallery but not for just a small component added to a web page.
  • XHTML Valid :)
  • Example: Link

———————-

gallerificplus

15. GallerificPlus jQuery Plugin

  • Modified script to use lightbox and jquery to create a seamless slideshow. It has buttons to be played automatically or to allow the user to change the photos manually.
  • Your dealing with one person so support should be available through the comment form!
  • Example: No Working Example :(

———————-

jquery.showcase

16. Jquery.Showcase

  • Simple to install and displays picture with a title and caption overlay on the image.
  • Customizable transition speed and layout – Perfect for all you tweakers out there!
  • Example: Link

So hopefully after seeing 16 excellent examples of Jquery Slideshow Applications, you’ll be able to find a new way to showcase your popular posts or interesting images.

Do you know of any other jquery slideshows that I should add to the list? Let me know in the comments below.

This entry was posted in Jquery and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Enjoy this post? Theres more to come, so click here to subscribe to our RSS Feed.

37 Comments

  1. Posted October 13, 2008 at 9:46 am | Permalink

    I am sticking to my old way of staying as far from ajax as I can. :) Application for vieweing posts and images is called browser. Trying to stuff something else inside of browser for same purpose is excessive.

    Rarst’s last blog post..Cheap or not? MSI Wind U100 Vs HP Compaq 2510p

  2. Posted October 13, 2008 at 10:31 am | Permalink

    Rarst – Jquery isn’t Ajax.. but it functions the same way. Most of these applications provide a user an easier way to browse through photos and text.

    Would you rather have 9 pictures stacked on top of eachother, or one slideshow playing all of those same images (with a navigation bar incase it’s going too slow)?

  3. Posted October 13, 2008 at 10:47 am | Permalink

    @Brad

    I am generalizing. And I think Jquery has functions that are referred to as Ajax as well, am I wrong?

    What these applications do is break common experience to hell because publisher likes eye-candy. I had once clicked on such lightboxed image. It had blocked page and shown me image wihout any controls. Clicking image started loading another image. I had to search it with cursor to discover visible only on hover close button in the lower-right (!) of it. I know it’s worst case but still.

    When I need to browse number of images I want to do that quickly, efficiently and in consistent way. I don’t want to figure controls for latest popular plugin all the time.

    Yeah, yeah – I am ancient and minimalistic in tastes. :)

    Rarst’s last blog post..Cheap or not? MSI Wind U100 Vs HP Compaq 2510p

    • Posted August 5, 2009 at 1:11 pm | Permalink

      Rarst, you’re not minimalistic, it is minimalistic to have a slideshow to show pictures rather than having a page tens of pics long. The fact that there exist bad programmers does not imply that doing nice interfaces for people (because interfaces are for people) is merely ‘eye-candy’.

      It is minimalistic to offer the user an experience that makes him easier and funnier watching those pics and navigating to each of them with a click instead of scrolling up and down, up and down ….

      You’re really lame, don’t even deserve an answer. Go and live in the caves.

      • Posted August 6, 2009 at 10:07 am | Permalink

        @Santiago

        Thank you for charmingly narrow minded interpretation of my old comment, it made me smile. :)

        Now I’ll go hate MooTools slideshow in the middle of my blog’s sidebar some more.

      • Posted December 7, 2009 at 9:34 pm | Permalink

        Figuring out how to navigate on every second page is by all means NOT a fun activity for the user.

        People come to your website for the content, not to check out your novelty navigation, get lost, or wonder what the hell is going on and where to click to get out of there. Fortunately the BACK button is out of the “creative” web developers’ reach.

  4. Posted October 13, 2008 at 11:02 am | Permalink

    @ Rarst – What kind of website was that? lol.

    I see your point about figuring out the controls.. Thats what I feel a lot of plugin publishers need to consider when developing such things.. Simplicity

  5. Posted October 13, 2008 at 11:05 am | Permalink

    @Brad

    It was software review site. I mean not even some photo thing, but software screenshots! :)

    Rarst’s last blog post..Cheap or not? MSI Wind U100 Vs HP Compaq 2510p

  6. Posted October 14, 2008 at 1:22 pm | Permalink

    Hey brad!

    Nice post and thanks for featuring my script! :) … I’m gonna try and update it sometime in the future since the coding style is a tad dated. ;)

    James’s last blog post..7 things you can do so your users won’t leave

  7. Posted October 20, 2008 at 11:55 am | Permalink

    These slideshow applications are being noticed on numerous sites, as they provide an extra bit of interactivity for the user. I haven’t seen anyone say that the use of a slideshow looked inappropriate on a site. A lot of big-name sites have been using them for quite a while.

    Armen Shirvanian’s last blog post..Quality Builds On Itself

  8. Posted October 20, 2008 at 8:59 pm | Permalink

    Brad I want to try one of them ,
    but please tell which is the best slideshow script of 9 slideshow ? :)

    BRANDON’s last blog post..Ramalan Satrio piningit

  9. Posted October 20, 2008 at 9:42 pm | Permalink

    Brad ,
    please answer will our blog be slow by putting the codes of slideshows ?
    thx :)

    BRANDON’s last blog post..Ramalan Satrio piningit

  10. Posted October 23, 2008 at 2:52 pm | Permalink

    @ James – Hey, It still works amazingly well. Don’t forget, simplicity is key!

    @ Armen – Apple’s website comes to mind :)

    @ Brandon – I really like all of the applications in this Jquery Slideshow list. If I had to choose one.. I don’t think I could. I would recommend any 8 of the slideshows (the ninth one has no instructions on how to install)

    @ Brandon – It won’t make your blog any more slower than putting on the number of pictures you want in a slideshow format.. The actual script that runs the slideshow is very small.. Around 2kb-15kb
    (about 3 seconds to download on dialup)

  11. Omid
    Posted October 28, 2008 at 11:29 pm | Permalink

    Many Thanks :)

  12. Posted November 8, 2008 at 12:04 am | Permalink

    Brad

    Why has nobody pointed out that your first example – Lightbox 2 – uses the Prototype Framework and Scriptaculous Effects Library – not jQuery???

    Am I missing something?

  13. Posted November 8, 2008 at 10:44 am | Permalink

    @ Robert – Hmmm.. My Mistake. It still however, is very, very cool.

  14. Posted November 21, 2008 at 3:30 pm | Permalink

    Is it just me, or is it nearly impossible to find a jquery/javascript slideshow plugin that supports audio as well?

  15. Posted December 15, 2008 at 6:47 pm | Permalink

    Thanks for this useful round up. Fantastic.
    @Rarst the browser is an evolving platform not just something for viewing text and images. By your logic we’d all be looking at grey backgrounds with times roman fonts. Google Maps would never happen and web sites wouldn’t have a clue who we were. You’d be amazed at how much JS is used on modern sites to do simple things that aid visitor navigation, experience and presentation.

    Still I’d like a slideshow that can slide show divs…bit more flexibility I suppose.

    ~ Steph

    Steph’s last blog post..Dial2Do Review For iPhone

  16. Posted December 16, 2008 at 1:17 am | Permalink

    @Steph

    Web IS text and images. Fonts and backgrounds have nothing to do with JS y the way. Browsers are evolving in usability and functions, in technology they are stuck in XHTML/CSS/JS/Flash and are not fast to move from there.

    JS is good and flexible technology. Flexible as in for every good example there is half dozen crappy ones.

    Rarst’s last blog post..My Internet goals for 2009

    • Barry
      Posted January 29, 2009 at 2:02 pm | Permalink

      An aversion to learning new methods, especially ones as simple as JQuery, to make the user experience of a website more convenient is a sign of laziness and narrow-minded thinking.

      Great post Brad. I found these links very useful.

  17. Posted January 30, 2009 at 3:07 pm | Permalink

    hey nice post .. it’s quite helpful for my new site :)

  18. bojans
    Posted March 16, 2009 at 3:25 pm | Permalink

    Can someone give me the instructions how to use this plugins? I am a beginner and I don’t know how and where to put it on my page. I try but code not works..

    Thanks,

    bojan

  19. Posted April 14, 2009 at 12:08 pm | Permalink

    Very good review. jQuery rulez!

  20. Posted May 5, 2009 at 10:43 am | Permalink

    Innerfade does it for me! Thanks for the list, very useful!

  21. Posted May 12, 2009 at 9:09 am | Permalink

    Try my plugin
    (a)Slideshow jQuery Plugin http://slideshow.hohli.com

  22. Posted May 27, 2009 at 3:15 am | Permalink

    Nice Collection I like it.

  23. Posted July 25, 2009 at 10:25 pm | Permalink

    innerfade is the best!

    anyway, thanks for the post. very helpful.

  24. Posted July 29, 2009 at 5:16 am | Permalink

    Very nice one

  25. Posted September 10, 2009 at 1:41 pm | Permalink

    I liked the #8 CrossSlide effect. Looks nice and simple.

  26. Posted November 11, 2009 at 2:53 am | Permalink

    Thank you for charmingly narrow minded interpretation of my old comment

  27. Posted November 13, 2009 at 8:19 am | Permalink

    Thank you to have mention my plugin (#16). Great post!
    eros´s last blog ..Costruire un handler per immagini in Asp.Net My ComLuv Profile

  28. Posted December 14, 2009 at 12:56 am | Permalink

    pictures fading and transitions are very good in this library. It is unbelievable that it is running based on javascripts

  29. Posted December 16, 2009 at 3:00 am | Permalink

    Very nice and useful tutorials to web designers,
    Thanks for posting.

  30. Posted December 17, 2009 at 10:01 am | Permalink

    Hey, great list! Thank you.

  31. Posted December 20, 2009 at 6:35 am | Permalink

    nice list of jquery

    i like it.

  32. Posted January 25, 2010 at 6:58 am | Permalink

    Great! List! I just began !
    Sereyboth´s last blog ..Banned From Adsense!! My Friend`s Story! My ComLuv Profile

  33. Posted January 25, 2010 at 8:51 am | Permalink

    very good list! thx

11 Trackbacks

  1. [...] Have you noticed all the amazing articles lately that promise almighty power using the Über cool [...]

  2. [...] lo scorso anno ho ricevuto decine di mails a proposito di slideViewer, la mia modesta – ma ampiamente apprezzata – galleria per immagini fatta con jQuery. La maggior parte delle richieste erano: [...]

  3. By 9 Jquery Slideshow Applications | Coder's Stuff on January 25, 2009 at 5:22 am

    [...] More>> Etiketler: AJAX, jquery, Jquery Slideshow Tarih: Pazar, 25 Ocak 2009, 12:20 Kategori/ler: AJAX, EN, Programing RSS 2.0 | Geri izleme – Track back [...]

  4. By jquery slideshow gallery examples | Expertz on April 13, 2009 at 1:16 am

    [...] RSS feed | Trackback URI [...]

  5. By help me find jquery slideshow - NamePros.Com on May 20, 2009 at 12:27 am

    [...] Jquery Slideshow | 9 Jquery Slideshow Scripts You CANNOT Miss | Brad Blogging may help you [...]

  6. [...] jQuery Plugin – 9 Jquery Slideshow Applications You CANNOT Miss – Brad Blogging (Suggested by Elijah Manor) [...]

  7. By ? Relations › links for 2009-06-25 on June 25, 2009 at 7:09 pm

    [...] Jquery Slideshow | 9 Jquery Slideshow Scripts You CANNOT Miss | Brad Blogging 9 Jquery Slideshow Applications You CANNOT Miss (tags: content overview javascript jquery slideshows) [...]

  8. [...] 9-jquery-slideshow-applications 3. Jquey [...]

  9. By Ibidem Network Files » slideshow´s library on October 9, 2009 at 4:11 pm

    [...] 9 ejemplos de slideshows creados con jquery [...]

  10. By jQuery Links | K! Blog on December 5, 2009 at 7:48 am

    [...] 10 – 16 jQuery sildeshow applications you cannot miss http://bradblogging.com/jquery/9-jquery-slideshow-applications-you-cannot-miss/ [...]

  11. By Anonymous on January 9, 2010 at 5:06 am

    [...] [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv Enabled

626 RSS Subscribers

Subscribe today to recieve any updates on this blog for free!

You'll also receive, "The Blog Manual" free of charge for being a subscriber which you can download at the bottom of each post.

 


Blog Advertisers

About The Author

Brad Ney

I am a Wordpress enthusiast, part-time website designer, and enjoy using the latest technology via the internet for website promotion.I enjoy writing about startup websites, XHTML, CSS, Wordpress based on what I've learned in the industry.

Become A Facebook Fan!

Reader Poll

  • Are you a...

    View Results

    Loading ... Loading ...

Recent Comments

  • Jayce: Long time did not optimize my blog already. Does this speed up a lot? .-= Jayce´s last blog ..How to...
  • JR @ Internet Marketing: Just became a fan! .-= JR @ Internet Marketing´s last blog ..The Ultimate and Best...
  • Sadia Malik: Hi, Thanks for the tips, I browsed the internet for some ready made templates but they dont quite seem...
  • recklessbliss: Hi, thanks for the info but I’m still at a loss about what exactly C.S.S. framework is. Your...
  • Gomez the windshield monkey: Brad, Nice tip. I find I struggle with this, though. For me, this is advanced PHP...

Leave A Comment - Reap The Rewards

  • CommentLuv will fetch your last post - Free publicity!
  • NoFollow Removed - Free backlink from each post you comment on!
  • Choose to be notified of replies made to your original comment!
  • Share your prospective while learning new things and have fun meeting the community.
  • Have a question? I answer every comment with a personal response.