Today we’re releasing our AJAX Slideflow Control under Creative Commons (CC-by 3.0). We use it for our webcasts, but we thought it would work quite well for image galleries – so we built one (live demo):
You can drag the Slideflow using your mouse, or click anywhere in the stack to jump there. Click inside the frame in order to enable mouse wheel and arrow key navigation! Or better yet, try the fullscreen example.
Technical background: The photos and titles are read from an XML file, and the thumbnails are pre-generated using Photoshop actions (included in the download).
03/28/2008: Updated to Slideflow 1.1 – image cropping and gradient direction fixed!
Download Slideflow 1.1 including gallery demo
We’re excited to hear where Slideflow is used, so let us know in the comments!
Credits:
- Based on code by Michael L Perry
- Photoshop actions originally created by Marcus Strehlow
- Photos by Nicholas_T
- Tigra Slider control
- Scriptaculous and Prototype
How to use it in your scripts
The gallery example is a good starting point. Have a look at slideflow.js; we tried to document all important aspects in the code. Initial settings, such as image locations and DOM parent node are passed on initialization. The control exposes a set of methods to change the display at runtime; it provides callbacks to allow the application to react to Slideflow movement and clicks on the center slide. Note that the control requires some specific CSS (slideflow.css) to work.
How to use the Photoshop Actions
You need to run your batch of pictures through the Photoshop actions (originally by Marcus Strehlow) in order to create left, right and center thumbnails. These need to go in different directories, which will later be provided to the control as pathLeft, pathRight and pathCenter.
We opted for Photoshop’s Save for Web feature instead of the regular JPEG export because it delivers far superior quality. Unfortunately, Save for Web doesn’t work well with batches and requires one to manually update the export directories for each of the three Slideflow actions. This can be done by performing the following steps:
- Create a blank RGB document, or open any RGB image
- Navigate to the action’s Export command, which is second to last and double-click it
- The Save for Web dialog opens. Save the blank document in your target folder for the respective action (i.e. left for the left action etc.)
- If you’re like Tim and like a clean system, you may delete the JPEG you just created
All actions assume 4 : 3 ratio. If pictures have a different ratio, you need to adjust it first, or the thumbnail images will have white edges.
Tags: AJAX, cover flow, coverflow, gallery, javascript, slideflow
Top
[...] I’ve been pretty busy putting together a webcast interface for Leica Microsystems featuring Cover Flow in AJAX. We thought that it was so cool that we released the latter under Creative Commons. [...]
Thanks for releasing this. I would love to be able to automatically import my flickr or iphoto images, so I could use coverflow.
Sam,
Thanks! Trouble is, automation would require thumbnail generation on the fly. If you’re into hacking, check out http://www.netzgesta.de/reflex/ for client-side, and http://studio.imagemagick.org/discussion-server/viewtopic.php?f=1&t=9765 for server-side pointers. Let us know if you come up with something!
That’s quality! Good job, thanks
This script is really great! In order to achieve script “automation” level, is it possible to generate the “left-right-center” small thumbs with GD or ImageMagick using PHP instead of running a PS action?
Thanks! Yes, see my post above – it’ll require some work. We postponed it for now, but if you can figure it out, I’m sure it would be appreciated by many!
[...] Mac deki resim galerisine benzer güzel bir slidshow uygulaması. Bağlantı [...]
[...] all the details here [...]
Ajax Image Gallery (Slide-Like): Slideflow…
Slideflow is a slideshow-like ajax image gallery created by Nicholas T.
You can drag the Slideflow using your mouse, or click anywhere in the stack to jump there. Click inside the frame in order to enable mouse wheel and arrow key navigation!
…
[...] Slideflow is a slideshow-like ajax image gallery created by Nicholas T. You can drag the Slideflow using your mouse, or click anywhere in the stack to jump there. Click inside the frame in order to enable mouse wheel and arrow key navigation! [...]
Great control but demo is extremely!!!!! slow!!!!
Ajax Image Gallery (Slide-Like): Slideflow…
[...]Slideflow is a slideshow-like ajax image gallery.

You can drag the Slideflow using your mouse, or click anywhere in the stack to jump there.[...]…
I agree with Donald. It’s unbearably slow
[...] Fonte: http://mediaeventservices.com/blog/2007/11/15/ajax-image-gallery-powered-by-slideflow-like-cover-flo... [...]
Great script but a bit slow. Not really practical for anything other than demonstrating what AJAX can do.
[...] una galería llamada ImageFlow ó MooFlow, ahora nos encontramos con otra alternativa llamada SlideFlow la cuál también incluye en el paquete de descarga un archivo *ATN que son accioneas para [...]
[...] Media Event Services offers up AJAX Slideflow – an AJAX Cover Flow clone for online image galleries. [...]
[...] Flash’a karşı antipatisi olanlar için AJAX tabanlı güzel bir resim galerisi scripti. [...]
slideflow : Galería de imagenes coverflow…
Sencilla, pero bonita galería en AJAX que nos presenta mediaeventservices.com, aquí tenéis una versión en vivo y en directo (live demo):
Puedes mover las imágenes con la rueda del ratón, con los cursores, o hacer click sobre cualquiera de las …
[...] Es muy impactante el número de galerías para presentar imágenes que se estan desarrollando últimamente. Cada vez traen mejores efectos, mejor programación y optimización. Hoy es el turno de SlideFlow. [...]
[...] Slideflow: una pequeña pero potente galería basada en Ajax que nos propone una vistosa presentación al estilo coverflow. Sus Posibilidades se ven reducidas debido a su diseño minimalista. [...]
i’ve been trying to put up a gallery using this however, i cant seem to work it out. (the html part of the gallery) i would just want to display the coverflow in the center of the page with the pictures at something like 640×480px. and then just a scroll bar at the bottom. could you guys point me at the right direction. or if someone would be so kind to send me the html and files at supernatural_ketchup@yahoo.co.uk
i’d appreciate all the help i could get.. thanks!
[...] – en javascript/AJAX, vous avez le choix notamment entre MooFlow et slideFlow [...]
[...] web 2.0 инструмент който може да свалите от следния линк . Вижте и презентацията. Tags: blogging, web 2.0, ajax, blog, widgets, блог [...]
[...] http://mediaeventservices.com/blog/2007/11/15/ajax-image-gallery-powered-by-slideflow-like-cover-flo... [...]
[...] Buradan indirebilirsiniz, Buradan da tasarlayana ulaşabilirsiniz, daha fazla bilgi derseniz ozaman Buraya girmelisiniz… Daha değişir bir versiyonunada Buradan ulaşabilirsiniz. [...]
[...] Slideflow 是由Nicholas T制作的图片画廊展示程序，使用了超酷的Ajax幻灯片效果，有点像yobo首页的那个music cover player。 [...]
[...] Si vous cherchez à mettre en place la même chose sur votre site, quelques développements en flash sont dispo ici, ou ici ou en ajax (ça doit fonctionner sur iPhone) ici et ici. [...]
The Slideflow is an excellent Javascript component for slideshows, it is a lot better than Flash based solutions like PhotoFlow.
The effects and control of the slides is very well coded. The only gripe is that it hogs the processor and will slowdown the system.
Livingston, thanks! Regarding the speed issues, I am sure there is space for improvements. If anybody comes up with any, please post them!
I’d like to add that it runs well on current systems, and users will eventually migrate – also Firefox 3 will feature a highly optimized JavaScript engine; other browsers will likely follow.
[...] MediaEvent Services Blog » Blog Archive » AJAX Image Gallery powered by Slideflow (like Cover Flow… (tags: ajax gallery slideshow css images) [...]
[...] oficial: http://mediaeventservices.com/blog/2007/11/15/ajax-image-gallery-powered-by-slideflow-like-cover-flo... Exemplo oficial: http://mediaeventservices.com/demo/gallery/gallery.html Instruções oficial: [...]
[...] AJAX Image Gallery powered by Slideflow (like Cover Flow) Sehr schick! Great! (tags: Photos slideshow images gallery ajax) [...]
Great way to display an image gallery. I wonder….is there a way to only have the slider with thumbnails – then when a thumbnail is clicked on, lightbox activates to show the large size? I’m not a programmer…..just thinking outside the box!
Cool Script
[...] SlideFlow, galería con efectos AJAX la revolucion friki de la Web. [...]
[...] read more… [...]
ImageMagick solutions for twisting left/right images (works for versions greater than 6.3.8, so not by default on Ubuntu 7.10, but by default on 8.04):
Left:
“for file in *.jpg;
do
convert “$file” -matte -virtual-pixel transparent -distort Perspective ‘0,0,0,0 0,90,0,90 90,0,90,25 90,90,90,65′ “$file”
done”
Right:
“for file in *.jpg;
do
convert “$file” -matte -virtual-pixel transparent -distort Perspective ‘0,0,0,25 0,90,0,65 90,0,90,0 90,90,90,90′ “$file”
done”
This is a bash script that runs in a directory (left or right). It transforms 90×90 thumbnails, but change the coordinates of you want size changes. Great for putting in a php script that grabs tons of images dynamically.
[...] LightWindow (E)2 Photo GalleryDemo Spry Imago Demo jQuery slideViewer minishowcaseDemo AJAX Image Gallery powered by Slideflow Lightweight Image Gallery with ThumbnailsDemo Live Pipe PhotoFolderDemo [...]
[...] AJAX Image Gallery powered by Slideflow [...]
[...] AJAX Image Gallery powered by Slideflow [...]
[...] http://mediaeventservices.com/blog/2007/11/15/ ajax-image-gallery-powered-by-slideflow-like-cover-fl… [...]
[...] AJAX Image Gallery powered by Slideflow [...]
[...] AJAX Image Gallery powered by Slideflow [...]
[...] Below is just a small sample of the Galleries. AJAX Image Gallery powered by Slideflow [...]
[...] AJAX Image Gallery powered by Slideflow [...]
[...] 点击这里进入Slideflow发布页面下载>> [...]
[...] SideFlow, created by MediaEvent Services is a pretty radical way of providing a ‘CoverFlow’ effect with pure Javascript. I’ll be honest, I am disappointed with the speed, but expected it to perform the way it is. I mean it is javascript. I still have to say that it’s very impressive. [...]
[...] AJAX Image Gallery powered by Slideflow [...]
[...] AJAX Image Gallery powered by Slideflow [...]