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
[...] AJAX Image Gallery powered by Slideflow [...]
[...] AJAX Image Gallery powered by Slideflow [...]
[...] И последнее на сегодня - очень симпатичная js-галлерея для просмотра изображений. Красивая, местами даже удобная. AJAX Image Gallery powered by Slideflow. [...]
[...] AJAX Image Gallery powered by Slideflow [...]
[...] Slideflow — это слайдшоу галерея созданная Nicholas’ом T. Для навигации можно использовать, как перетаскивание мышкой, так и скролл стрелками на клавиатуре. Фотографии и эскизы читаются из XML файла, для генерации развернутых эскизов используется специальный “Photoshop action” (поставляется вместе со скриптом). Посмотреть демо. [...]
[...] No.8 AJAX Image Gallery Powered by Slideflow [...]
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.
Is there anyone that made this script automatic with the PHP GD libary or other methods?
Beautiful, although its a bit slow…
It may come in handy one day. Thanks fo this
[...] AJAX Image Gallery powered by Slideflow [...]
[...] 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 [...]
[...] 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 [...]
[...] 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 [...]
[…] 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 […]
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!
[...] 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 [...]
[...] AJAX Image Gallery powered by Slideflow [...]
Fantastic ! We are gonna give it a try with our real estate site.
Cheers guys.
Maytal
דירות למכירה
[...] 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 [...]
Great way to display an image gallery.
[...] AJAX Image Gallery powered by Slideflow [...]
[...] AJAX Image Gallery Powered by Slideflow [...]
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.
[...] 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 [...]
[...] 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 [...]
Excellent Job… I will try to incorporate this in my Devotional Website…
Thanks & Regards,
RAGHAV…
[...] AJAX Image Gallery powered by Slideflow [...]
[...] Descargar - Demo [...]
its great way to display images.. i put it on my web..
[...] AJAX Image Gallery powered by Slideflow [...]
Very useful and exactly what I needed.
[...] Slideflow [...]
nice image gallery,thanks
powered by Slideflow
[...] 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 [...]
[...] AJAX Image Gallery powered by Slideflow [...]
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
Very useful,
Thanks for all
How do we generate the xml from our own photo collection?
Es bueno pero el problema es que te come mucho recurso al ser usado. Y teniendo en cuenta que muchos usuarios finales tienen una pc algo lenta (ya sea por que esta desactualizada o por que tiene algo mal) ahi tiene su mayor punto en contra. Si tenemos en cuenta que la usabilidad de una pagina web es de vital importancia y que los primeros segundos que un usuario esta en la web determinan si se quedara un tiempo mas o pasara a otro site, hay que escoger bien para que tipo de proyecto vale la pena usar un componente como este.
Fantastic app… Great job considering it’s done in AJAX.
Very Iphone like cover flow design. Gonna give it a try.
אזרחות פולנית
i’m using it. thx.
That’s quality! Good job, thanks
This slideshow is not working in IE please telll me what to do
Used slideflow on the following site – http://www.cbmovement.com. Works like a charm. Thanks!
I use this to demonstrate my remixes and mashups using cover art. I noticed it is very easy to change the color scheme, etc., as someone was mentioning above simply by changing your thumbnail images template… which I did (but kept white).
One question though… I tried to use the init() function to change the first coverflow value from (1) to the center of them all so you didn’t have everything stacked only to the right by default but in the middle, instead. However… changing the init value wasn’t enough. Any pointers on how to have it default/open on, say, “5″ instead of “1″?
D, try using this as the first lines of init()):
swapPhoto(5);
slideFlow.glideToSlide(5);
Great app but can’t get it to work in IE. Any help would be great. Thx
great fun, a little slow though
How would I go about making this script work with videos, and is there a way to attach it to a database rather than the xml file??