Monday, September 10th, 2007

SmoothGallery 2.0:

Category: JavaScript, Library

Jonathan Schemoul has released SmoothGallery 2.0, a javascript gallery and slideshow system allowing you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and more.

Why would you use this over others out there? Jon thinks that:

Unlike other systems out there, JonDesign’s SmoothGallery is designed from the ground up to be standard compliant: You can feed it from any document, using custom css selectors.

And even better, this solutions is very lightweight: The javascript file is only 24kb.

The major new features are:

  • Back and forward buttons of your browser now controls the gallery. Moreover, you can send that url up there to a friend, he will see exactly the same slide on the gallery than you. This is called HistoryManager. See a demo.
  • You can have multiple galleries on one place and switch between galleries. This is called Gallery Sets. See a demo.
  • Tired of that smooth fade-in of pictures ? SmoothGallery now supports transitions between slides. See a demo.
  • Don’t want to use all of your bandwidth for some galleries ? SmoothGallery now includes a real preloader and loads only what is needed, while giving feedback to the user on the progress (Most of the time, users won’t even see a loading bar, as SmoothGallery tries to load what the user could want to see).

SmoothGallery 2.0

Posted by Dion Almaer at 9:03 am
13 Comments

+++--
3.5 rating from 53 votes

13 Comments »

Comments feed TrackBack URI

You have an ‘s’ before your http in the first demo url

Comment by Chris Rowe — September 10, 2007

It doesn’t work in Safari 2.0.4.

I click on the ‘next’ arrow and it loads the next image for about .5 seconds, reverts back to the first image and then reloads the page back to the previous one (the main page).

Comment by Jeff — September 10, 2007

Lets say you are in the third photo in a gallery and click on the middle for enlarging the picture, when you click on back button, it takes you back to the folders display in the demo.. again you have to start from the folder and navigate to the third photo. I would assume there would atleast be some sort of link that would take me back to the third picture..

Comment by Saagar — September 10, 2007

And my comment doesnt show up in Ajaxian ..
——————————————————–
Lets say you are in the third photo in a gallery and click on the middle for enlarging the picture, when you click on back button, it takes you back to the folders display in the demo.. again you have to start from the folder and navigate to the third photo. I would assume there would atleast be some sort of link that would take me back to the third picture..

Comment by Saagar — September 10, 2007

@Saagar: if I would have activated the history manager then it would have worked that way…
try on this page : http://smoothgallery.jondesign.net/showcase/gallery/ if you click the back button on the item page it works :)

Comment by Jonathan — September 10, 2007

Looks nice!

only major thing that would be nice to see is more escape key handling for the various states that the UI can be in when browsing stuff. (such as the top gallery drop down)

Comment by Jesse Kuhnert — September 10, 2007

looks very very promising…
though for now, it does strange things with Safari (2.0.4) as mentioned by Jeff and throws a runtime error (!!!) in IE 6 on load…
looking forward to see this evolve though ;)

Comment by caillou — September 11, 2007

Very nice :-)

Small bug though: In the sliding transition demo when clicking “left” on the first picture in the set, the last picture slides in from the *right* and vice versa (clicking right on the last pic of the set makes the pic slide out to the right). That’s a bit confusing.

Keyboard-navigation would be nice. Especially handling of escape.

An easy way back from full view of a picture is also needed.

Comment by erlando — September 11, 2007

@erlando:
Each transition is done differently.
For example, continuoushorizontal transition (not shown in the demo but there is a democontinuous.html in the .zip package to demo it) handles the first and last pictures very well.
Included transitions are mainly included as examples on how to make your own as it’s an open framework :).

@caillou:
I haven’t had these errors yet, I’m working oon it, and will release a 2.1 soon with all those bug fixes. What is strange is that I’ve had two month of private then public beta to prevent this. Can you join the forum to tell us the exact errors you get ?

Comment by Jonathan — September 11, 2007

An amazing use of the MooTools framework. Great job by Jonathan.

Comment by David — September 11, 2007

Jonathan, the script looks great, and it’s come a long way.

It’s a shame Ajaxian has become so jQuery biased these days ever since the ‘evangelists’ got so involved… if you had chosen jQuery as your framework of choice rather than MooTools, youd probably get a lot more exposure from sites like this. (And i guarantee you they wouldnt have omitted the frameworks name in the category / description)

Comment by Tom Occhino — September 16, 2007

First of all I must say this gallery is the best I”ve seen. It displays perfectly in Firefox, I seem to have some real issues in IE7. in the earlier versions the pictures atleast made a column. I would appreciate feedback as to the correction. I’m using IE7, although one would want any viewer to see it properly from their computer.

Comment by Debbie — September 22, 2007

Carousel is not working on Safari for Windows correctly. offsetHeight returns zero first time, and corrects itself only after refresh.

Comment by freelancer — April 9, 2008

Leave a comment

You must be logged in to post a comment.