AJAX Image Gallery powered by Slideflow (like Cover Flow)
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
November 15th, 2007 at 2:49 pm
[...] 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. [...]
November 15th, 2007 at 3:14 pm
Thanks for releasing this. I would love to be able to automatically import my flickr or iphoto images, so I could use coverflow.
November 15th, 2007 at 4:28 pm
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!
November 16th, 2007 at 4:14 am
That’s quality! Good job, thanks
November 17th, 2007 at 1:52 pm
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?
November 17th, 2007 at 4:32 pm
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!
November 19th, 2007 at 7:40 pm
[...] Mac deki resim galerisine benzer güzel bir slidshow uygulaması. Bağlantı [...]
November 20th, 2007 at 1:27 am
[...] all the details here [...]
December 28th, 2007 at 9:14 am
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!
…
December 28th, 2007 at 5:48 pm
[...] 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! [...]
December 31st, 2007 at 9:01 pm
Great control but demo is extremely!!!!! slow!!!!
December 31st, 2007 at 9:14 pm
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.[...]…
January 1st, 2008 at 5:17 am
I agree with Donald. It’s unbearably slow
January 1st, 2008 at 7:10 am
[...] Fonte: http://mediaeventservices.com/blog/2007/11/15/ajax-image-gallery-powered-by-slideflow-like-cover-flo... [...]
January 1st, 2008 at 1:39 pm
Great script but a bit slow. Not really practical for anything other than demonstrating what AJAX can do.
January 2nd, 2008 at 1:20 am
[...] 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 [...]
January 2nd, 2008 at 4:04 am
[...] Media Event Services offers up AJAX Slideflow - an AJAX Cover Flow clone for online image galleries. [...]
January 2nd, 2008 at 2:34 pm
[...] Flash’a karşı antipatisi olanlar için AJAX tabanlı güzel bir resim galerisi scripti. [...]
January 3rd, 2008 at 10:26 am
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 …
January 3rd, 2008 at 2:40 pm
[...] 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. [...]
January 5th, 2008 at 3:49 pm
[...] 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. [...]
January 8th, 2008 at 6:03 pm
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!
January 9th, 2008 at 5:55 pm
[...] - en javascript/AJAX, vous avez le choix notamment entre MooFlow et slideFlow [...]
January 15th, 2008 at 10:29 am
[...] web 2.0 инструмент който може да свалите от следния линк . Вижте и презентацията. Tags: blogging, web 2.0, ajax, blog, widgets, блог [...]
January 15th, 2008 at 6:49 pm
[...] http://mediaeventservices.com/blog/2007/11/15/ajax-image-gallery-powered-by-slideflow-like-cover-flo... [...]
January 16th, 2008 at 1:28 am
[...] Buradan indirebilirsiniz, Buradan da tasarlayana ulaşabilirsiniz, daha fazla bilgi derseniz ozaman Buraya girmelisiniz… Daha değişir bir versiyonunada Buradan ulaşabilirsiniz. [...]
January 21st, 2008 at 2:37 am
[...] Slideflow 是由Nicholas T制作的图片画廊展示程序，使用了超酷的Ajax幻灯片效果，有点像yobo首页的那个music cover player。 [...]
January 21st, 2008 at 5:26 pm
[...] 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. [...]
January 25th, 2008 at 1:06 pm
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.
January 25th, 2008 at 3:13 pm
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.
January 27th, 2008 at 12:22 am
[...] MediaEvent Services Blog » Blog Archive » AJAX Image Gallery powered by Slideflow (like Cover Flow… (tags: ajax gallery slideshow css images) [...]
January 28th, 2008 at 11:15 am
[...] 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: [...]
January 31st, 2008 at 7:28 am
[...] AJAX Image Gallery powered by Slideflow (like Cover Flow) Sehr schick! Great! (tags: Photos slideshow images gallery ajax) [...]
February 7th, 2008 at 10:23 pm
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!
March 4th, 2008 at 11:40 am
Cool Script
March 16th, 2008 at 2:24 am
[...] SlideFlow, galería con efectos AJAX la revolucion friki de la Web. [...]
March 18th, 2008 at 2:13 am
[...] read more… [...]
March 28th, 2008 at 7:53 pm
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.
April 1st, 2008 at 1:12 pm
[...] 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 [...]
April 1st, 2008 at 3:12 pm
[...] AJAX Image Gallery powered by Slideflow [...]
April 1st, 2008 at 4:12 pm
[...] AJAX Image Gallery powered by Slideflow [...]
April 2nd, 2008 at 3:02 am
[...] http://mediaeventservices.com/blog/2007/11/15/ ajax-image-gallery-powered-by-slideflow-like-cover-fl… [...]
April 2nd, 2008 at 4:23 pm
[...] AJAX Image Gallery powered by Slideflow [...]
April 2nd, 2008 at 10:40 pm
[...] AJAX Image Gallery powered by Slideflow [...]
April 3rd, 2008 at 4:45 am
[...] Below is just a small sample of the Galleries. AJAX Image Gallery powered by Slideflow [...]
April 4th, 2008 at 3:32 am
[...] AJAX Image Gallery powered by Slideflow [...]
April 4th, 2008 at 5:52 am
[...] 点击这里进入Slideflow发布页面下载>> [...]
April 4th, 2008 at 9:46 pm
[...] 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. [...]
April 7th, 2008 at 11:07 am
[...] AJAX Image Gallery powered by Slideflow [...]
April 7th, 2008 at 1:17 pm
[...] AJAX Image Gallery powered by Slideflow [...]
April 7th, 2008 at 5:37 pm
[...] AJAX Image Gallery powered by Slideflow [...]
April 8th, 2008 at 6:17 am
[...] AJAX Image Gallery powered by Slideflow [...]
April 9th, 2008 at 10:06 pm
[...] И последнее на сегодня - очень симпатичная js-галлерея для просмотра изображений. Красивая, местами даже удобная. AJAX Image Gallery powered by Slideflow. [...]
April 11th, 2008 at 9:14 pm
[...] AJAX Image Gallery powered by Slideflow [...]
April 15th, 2008 at 7:38 am
[...] Slideflow — это слайдшоу галерея созданная Nicholas’ом T. Для навигации можно использовать, как перетаскивание мышкой, так и скролл стрелками на клавиатуре. Фотографии и эскизы читаются из XML файла, для генерации развернутых эскизов используется специальный “Photoshop action” (поставляется вместе со скриптом). Посмотреть демо. [...]
April 16th, 2008 at 12:26 pm
[...] No.8 AJAX Image Gallery Powered by Slideflow [...]
April 16th, 2008 at 2:53 pm
Love this scripts - works great, and I like to stear clear of flash whenever I can. Great job!
I’d like to start my gallery in the middle of the images, so it would start with image 3 of a 5 image set, for example. I’m slowly figuring out how to do that!
If you install the Askimet plugin on your Wordpress blog, you’ll cut down all of these spam posts too. Unless you’re liking all the spam. Which is not that probable.
April 17th, 2008 at 6:31 pm
Is there anyone that made this script automatic with the PHP GD libary or other methods?
April 20th, 2008 at 6:11 am
Beautiful, although its a bit slow…
It may come in handy one day. Thanks fo this
April 20th, 2008 at 11:47 pm
[...] AJAX Image Gallery powered by Slideflow [...]
April 21st, 2008 at 1:02 pm
[...] ajax image gallery powered by slideflow Adından da anlaşılabileceği üzere AJAX tekniği ile hazırlanmış basit bir galeri. Fotoğraflara slayt gösterisi şeklinde bakabiliyorsunuz. ajax image gallery powered by slideflow [...]
April 22nd, 2008 at 1:16 pm
[...] ajax image gallery powered by slideflow Adndan da anlalabilecei zere AJAX teknii ile hazrlanm basit bir galeri. Fotoraflara slayt gsterisi eklinde bakabiliyorsunuz. ajax image gallery powered by slideflow [...]
April 25th, 2008 at 6:29 pm
[...] ajax image gallery powered by slideflow Adından da anlaşılabileceği üzere AJAX tekniği ile hazırlanmış basit bir galeri. Fotoğraflara slayt gösterisi şeklinde bakabiliyorsunuz. ajax image gallery powered by slideflow [...]
April 26th, 2008 at 7:26 am
[…] ajax image gallery powered by slideflow Ad�ndan da anla��labilece�i �zere AJAX tekni�i ile haz�rlanm�� basit bir galeri. Foto�raflara slayt g�sterisi �eklinde bakabiliyorsunuz. ajax image gallery powered by slideflow […]
April 26th, 2008 at 9:43 pm
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!
April 27th, 2008 at 3:13 pm
[...] ajax image gallery powered by slideflow Adından da anlaşılabileceği üzere AJAX tekniği ile hazırlanmış basit bir galeri. Fotoğraflara slayt gösterisi şeklinde bakabiliyorsunuz. ajax image gallery powered by slideflow [...]
April 27th, 2008 at 4:15 pm
[...] AJAX Image Gallery powered by Slideflow [...]
April 28th, 2008 at 2:34 pm
Fantastic ! We are gonna give it a try with our real estate site.
Cheers guys.
Maytal
דירות למכירה
April 28th, 2008 at 2:54 pm
[...] ajax image gallery powered by slideflow Adından da anlaşılabileceği üzere AJAX tekniği ile hazırlanmış basit bir galeri. Fotoğraflara slayt gösterisi şeklinde bakabiliyorsunuz. ajax image gallery powered by slideflow [...]
April 28th, 2008 at 8:16 pm
Great way to display an image gallery.
April 29th, 2008 at 3:01 am
[...] AJAX Image Gallery powered by Slideflow [...]
May 3rd, 2008 at 2:40 pm
[...] AJAX Image Gallery Powered by Slideflow [...]
May 4th, 2008 at 7:09 am
Hi,
I was looking for a cover flow script like this one. Thank God I found this site. After some modifications to the gallery.html and css files I managed to integrate it to my personal website built with Sandvox. I didn’t use it for a photo gallery but to create a review page about my favourite music, a kind of iTunes-like presentation. You can view the page by going to Favourites and then Favourite Music mon my website. Or directly http://www.shadowslight.net/reunion_island/favourites/favourite_music_2.html
Thanks a lot. Of course I have kept the link to MediaEventServices for the credits.
May 5th, 2008 at 7:18 pm
[...] 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 [...]
May 7th, 2008 at 5:28 pm
[...] Image Gallery Powered By Slideflow Posted by AN Jay May 7, 2008 | 1 Views AJAX Slideflow Control is an ajax based image gallery in which you can drag the Slideflow using your mouse, or click [...]
May 9th, 2008 at 9:40 am
Excellent Job… I will try to incorporate this in my Devotional Website…
Thanks & Regards,
RAGHAV…
May 14th, 2008 at 11:26 am
[...] AJAX Image Gallery powered by Slideflow [...]
May 19th, 2008 at 12:32 am
[...] Descargar - Demo [...]
May 21st, 2008 at 6:33 pm
its great way to display images.. i put it on my web..
May 26th, 2008 at 3:35 pm
[...] AJAX Image Gallery powered by Slideflow [...]
May 26th, 2008 at 11:46 pm
Very useful and exactly what I needed.
May 29th, 2008 at 7:53 pm
[...] Slideflow [...]
June 10th, 2008 at 4:00 pm
nice image gallery,thanks
June 11th, 2008 at 10:05 pm
powered by Slideflow
June 12th, 2008 at 7:16 am
[...] like cover Flow … Apple Fan Blog &187 Like cover Flow: AJAX Image Gallery with Slideflow under …http://mediaeventservices.com/blog/2007/11/15/ajax-image-gallery-powered-by-slideflow-like-cover-flo…Cover Flow Now Shipping - PR-CANADA.net press releaseBabya cover flow includes Babya&39s [...]
June 13th, 2008 at 4:41 am
[...] AJAX Image Gallery powered by Slideflow [...]
June 13th, 2008 at 11:03 pm
Hi
Is very good
Any chance to change the bg color to black and also
the bg color of thumnails wich are twisted, the are still white?
10x
June 14th, 2008 at 8:23 am
Very useful,
Thanks for all