The Articles

Future of SmoothSlideshow, SmoothGallery (uh ? what's this ?!!)

December 8, 2006 at 3:30 p.m. Tagged as: Blog, Programming, Javascript


I mentioned SmoothGallery in a thread some days ago…
I will tell you a little bit more about it :)

Update
Smooth Gallery v1.0 is released, see the corresponding announcement !

Continuation of the article
But first, let’s see the history of SmoothSlideshow, and why I made it.

When I first started SmoothSlideshow, it was for the creation of http://www.universzik.com to have a little zone showing latest articles visuals and a little description: that’s how the timed mode began.
Then, I had to do something similar for http://www.pgo.fr but with arrows and no timer, to make the car turn on itself, that’s how the showcase mode came to life.

Seeing the good feedback I got on those effects, I made it opensource and released it with the name and website you know.

Now, after a mootools port, a major code rewrite (in objects), and a lot of other improvements, I see that a lot of people are starting to use this little component as a gallery, because there is no full-featured gallery system in javascript.

Now, let’s face it: SmoothSlideshow isn’t made for it, it’s splitting between manual and timed mode and it’s use of javascript arrays just makes no sense today both in terms of architecture and in terms of accessibility.

That’s why I have two news for you, one good and one bad:

  • Let’s start by the bad one, SmoothSlideshow as you know it will be abandoned.
  • Now the good one: it will be replaced by something that does everything the two smooth slideshow modes did, plus a lot of other things. The whole solution being fully customizable (you will be able to remove or add any component), and standard compliant (every data will be taken from your document using css selectors).

There will still be modes, but by how you configure it, some examples:

  • with timer, without carousel, without arrows, and with links => old timed mode
  • without timer, without carousel, with arrows, without links => old showcase mode
  • without timer, with arrows, with links, with carousel => new gallery mode

But, as I repeat again, you can choose to activate or deactivate any of those elements and others.

Now, for the most impatient of you, I’ve set up a little demo page of the gallery mode… But remember, it’s still alpha-quality with bugs, compatibility issues, it doesn’t have all the features, etc… :-)

Eh you were waiting for the link, right ? ;) Here it is: http://smoothslideshow.jondesign.net/SmoothGallery/demo.html

Feel free to comment with all the bugs you find, all the features you would like to see, etc…

Oh, by the way, while you’re still reading my post (are you ?), I announce that we are making a shinny new website to hold all the documentation, different demos, etc… There should also be in the future (distant, near ? this is the question…) a module similar (in the concept, not the shape) to the “slideshowpro director”, but for JonDesign’s SmoothGallery.


Comments

Rasmus commented on December 13, 2006 at 1:30 p.m.h:

Hey Jonathan

It looks great in FF2! Good job.

Cheers

Raz

Marschant commented on December 21, 2006 at 12:06 p.m.h:

Man I've been through Gallery 2, MaxiGallery, Zen Photo, mooShow and now I've settled on slideshowpro but I'm seriously impressed by a mooTools driven, standards-compliant gallery. I'm looking forward to progress on this project.

Would it be feasible to allow resizing of the parent div when loading a portrait image after a landscape one, similar to the way mooShow does it?

Ben H commented on December 27, 2006 at 3:34 p.m.h:

I have been using MG2 for my site. I feel like integrating SmoothGallery with MG2

Frank commented on January 1, 2007 at 7:53 p.m.h:

Smooth Gallery is just brilliant; seriously impressive.

I also think that resizing of the parent div to accomodate landscape and portrait images would be a great addition.

Rey Mendoza commented on February 7, 2007 at 6:11 a.m.h:

Wow, this is amazing. Almost the same as the slideshowpro plugin in flash, (oh yes, jon's work is better) but this is web standards compliant no less.

I will use it in my clients website which is a photographer, I'm also into this accessibility stuff so this will definitely be posted in my accessibility yahoogroup - pwag.org

Thanks,
Rey

Shinn commented on February 8, 2007 at 7:07 p.m.h:

Slideshow looks and works great. Would LOVE to have pause ability as well.

Jonathan Schemoul commented on February 10, 2007 at 6 p.m.h:

Hello,

Thanks for this great feedback ! :)
About the features asked here, I am considering to implement them on SmoothGallery and an upcoming product in the "Smooth" fashion.

Cheers,
Jonathan

Sakthi commented on May 21, 2007 at 2:10 p.m.h:

Hi, I have added your gallery to my site www.sakthiswaran.com/mygallery.asp

It is excellent.. It takes much time to load if I put many pics. Right now I have 12Pics.. Any solution for that...

I am planning to add around 50...

Thanks ya..
Cheers,
Sakthi

Mason commented on May 31, 2007 at 4:06 p.m.h:

I have looked at a number of slideshow/gallery solutions to replace my very outdated js timed slideshow. This is the very best one I've found. I've added it to my site at http://www.riveroflife-jax.com

One request/recommendation would be that the info panel be hidden if there is no value for the item title or item description. This way it would display if there was a caption and would not display if there were no captions.

This is an outstanding piece of code especially when you consider standards. Well done!

Regards,
Mason

Mason commented on May 31, 2007 at 5:08 p.m.h:

I found the solution I was looking for on the forum.

showInfoSlideShow: function() {
this.fireEvent('onShowInfopane');
this.slideInfoZone.clearTimer();
element = this.slideInfoZone.element;
// mod ringerge.org
this.title = this.galleryData[this.currentIter].title;
this.description = this.galleryData[this.currentIter].description;
if (this.title!='' ) {
element.getElement('h2').setHTML(this.title);
element.getElement('p').setHTML(this.description);
this.slideInfoZone.custom({'opacity': [0, this.options.slideInfoZoneOpacity], 'height': [0, this.slideInfoZone.normalHeight]});
}
// mod ringerge.org

if (this.options.showCarousel)
this.slideInfoZone.chain(this.centerCarouselOn.pass(this.currentIter, this));
return this.slideInfoZone;
},

The link is here: http://smoothgallery.jondesign.net/forum...

Sachin Shekhar R commented on June 23, 2007 at 1:43 p.m.h:

Hi,
Lovely work... I am using it as in http://www.vtuonline.com/galsguys/ Still in dev mode.
However did a few hacks and mashed with PHP to get it working as photo gallery solution...
That would not be necessary if there was a way to provide navigation menu for albums ... or will it be there?

George commented on December 28, 2007 at 9:25 a.m.h:

It was nice)

http://newyorkrugcleanersdeep11.150m.com commented on March 15, 2008 at 4:11 p.m.h:

http://queenscarpetcleanerscleanerss.150... http://brooklynmaidservicecleanerss.150m... http://newyorkjanitorialservicecleanerss... http://newyorkjanitorservicecleanerss.15... http://manhattancarpetcleanerscleanerss.... http://nyrugcleanerscleanerss.150m.com http://brooklyncarpetcleanerscleanerss.1... http://nymaidservicecleanerss.150m.com http://manhattanmaidservicecleanerss.150... http://newyorkrugcleanerscleanerss.150m.... http://nyjanitorialservicecleanerss.150m... http://nycarpetcleanerscleanerss.150m.co... http://newyorkmaidservicecleanerss.150m.... http://newyorkcarpetcleanerscleanerss.15... http://queensrugcleanerscleanerss.150m.c... http://queensjanitorservicedeep.150m.com... http://queensjanitorservicedeep1.150m.co... http://queensjanitorservicedeep2.150m.co... http://queensjanitorservicedeep3.150m.co... http://queensjanitorservicedeep4.150m.co... http://queensjanitorservicedeep5.150m.co... http://queensjanitorservicedeep6.150m.co... http://queensjanitorservicedeep7.150m.co... http://queensjanitorservicedeep8.150m.co... http://queensjanitorservicedeep9.150m.co... http://queensjanitorservicedeep10.150m.c... http://queensjanitorservicedeep11.150m.c... http://queensjanitorservicedeep12.150m.c... http://queensjanitorservicedeep13.150m.c... http://queensjanitorservicedeep14.150m.c... http://queensjanitorservicedeep15.150m.c... http://queensjanitorservicedeep16.150m.c... http://queensjanitorservicedeep17.150m.c... http://queensjanitorservicedeep18.150m.c... http://queensjanitorservicedeep19.150m.c... http://queensjanitorservicedeep20.150m.c... http://brooklynjanitorservicedeep.150m.c... http://brooklynjanitorservicedeep1.150m.... http://brooklynjanitorservicedeep2.150m.... http://brooklynjanitorservicedeep3.150m.... http://brooklynjanitorservicedeep4.150m.... http://brooklynjanitorservicedeep5.150m.... http://brooklynjanitorservicedeep6.150m.... http://brooklynjanitorservicedeep7.150m.... http://brooklynjanitorservicedeep8.150m.... http://brooklynjanitorservicedeep9.150m....

Post a comment



Switch to English Passez à la version Française Flux RSS des Articles XHtml 1.1 Valide