AJAX Image Gallery powered by Slideflow (like Cover Flow)

MES veröffentlicht seine AJAX Slideflow Control, die im Rahmen unserer neuen Videokonsole entwickelt wurde, unter Creative Commons (CC-by 3.0). In unserer Demo kommt sie für eine Fotogalerie zum Einsatz.


Der Foliensatz kann mit der Maus gedraggt werden. Per Click kann an eine gewünschte Stelle gesprungen werden. Die Navigation per Mausrad und Pfeiltasten ist nach einem Click auf das Demofenster möglich – oder probieren Sie die Demo einfach im Vollbildmodus aus.

Technischer Hintergrund: Fotodaten werden aus einer XML-Datei ausgelesen; Thumbnails werden per Photoshop-Aktion vorgeneriert (im Download enthalten).
03/28/2008: Update auf Slideflow 1.1 – Der Bildzuschnitt und die Richtung des Farbverlaufs wurden korrigiert!

Slideflow 1.1 mit Gallerie-Demo herunterladen

Wir sind darauf gespannt, wo Slideflow zum Einsaz kommt – wenn Ihnen Slideflow gefallen hat, hinterlassen Sie uns einen Kommentar!


Slideflow in ihren Skripts einsetzen

Die Gallerie-Demo ist ein guter Startpunkt. In slideflow.js haben wir alle wichtigen Aspekte des Codes dokumentiert. Die wichtigsten Parameter, wie z.B. die Pfade zu den Bilddaten und das DOM-Objekt, unter dem Slideflow erstellt werden soll, werden bei Initialisierung übergeben. Das Steuerelement bietet auch Methoden, um die Anzeige zur Laufzeit zu verändern, sowie Callbacks, die es der Anwendung ermöglichen, auf Slideflow-Bewegungen und Clicks auf die Mittelfolie zu reagieren. Bitte beachten Sie, dass das Steuerelement spezifisches CSS benötigt (slideflow.css).

Anwendung der Photoshop-Aktionen

Die Bilder müssen durch Photoshop-Aktionen aufbereitet werden (ursprünglich von Marcus Strehlow), um die Miniaturbilder mit linker, rechter und zentrierter Ausrichtung zu erstellen. Diese Bilder müssen jeweils in separate Verzeichnisse gespeichert werden, die dem Steuerelement dann als pathLeft, pathRight und pathCenter übergeben werden.
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:

  1. Create a blank RGB document, or open any RGB image
  2. Navigate to the action’s Export command, which is second to last and double-click it
  3. 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.)
  4. 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.

Schlagworte: , , ,

184 Kommentare zu „AJAX Image Gallery powered by Slideflow (like Cover Flow)“

  1. […] 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. […]

  2. Sam Sethi sagt:

    Thanks for releasing this. I would love to be able to automatically import my flickr or iphoto images, so I could use coverflow.

  3. 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! :)

  4. Fabio sagt:

    That’s quality! Good job, thanks

  5. Oscar sagt:

    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?

  6. 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!

  7. […] Mac deki resim galerisine benzer güzel bir slidshow uygulaması. Bağlantı […]

  8. 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!

  9. […] 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! […]

  10. Donald sagt:

    Great control but demo is extremely!!!!! slow!!!!

  11. 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.[…]…

  12. hcabbos sagt:

    I agree with Donald. It’s unbearably slow :(

  13. Great script but a bit slow. Not really practical for anything other than demonstrating what AJAX can do.

  14. […] 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 […]

  15. […] Media Event Services offers up AJAX Slideflow – an AJAX Cover Flow clone for online image galleries. […]

  16. […] Flash’a karşı antipatisi olanlar için AJAX tabanlı güzel bir resim galerisi scripti. […]

  17. TELARAÑA sagt:

    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 …

  18. […] 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. […]

  19. […] 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. […]

  20. Jared sagt:

    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 640x480px. 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!

  21. […] – en javascript/AJAX, vous avez le choix notamment entre MooFlow et slideFlow […]

  22. […] web 2.0 инструмент който може да свалите от следния линк . Вижте и презентацията. Tags: blogging, web 2.0, ajax, blog, widgets, блог […]

  23. […] Buradan indirebilirsiniz, Buradan da tasarlayana ulaşabilirsiniz, daha fazla bilgi derseniz ozaman Buraya girmelisiniz… Daha değişir bir versiyonunada Buradan ulaşabilirsiniz. […]

  24. […] Slideflow 是由Nicholas T制作的图片画廊展示程序,使用了超酷的Ajax幻灯片效果,有点像yobo首页的那个music cover player。 […]

  25. […] 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. […]

  26. 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.

  27. 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.

  28. […] MediaEvent Services Blog » Blog Archive » AJAX Image Gallery powered by Slideflow (like Cover Flow… (tags: ajax gallery slideshow css images) […]

  29. […] AJAX Image Gallery powered by Slideflow (like Cover Flow) Sehr schick! Great! (tags: Photos slideshow images gallery ajax) […]

  30. Amanda sagt:

    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! :)

  31. Rob sagt:

    Cool Script :D

  32. […] SlideFlow, galería con efectos AJAX la revolucion friki de la Web. […]

  33. Sean sagt:

    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):


    „for file in *.jpg;
    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“


    „for file in *.jpg;
    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“

    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.

  34. […] 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 […]

  35. […] AJAX Image Gallery powered by Slideflow […]

  36. […] Below is just a small sample of the Galleries. AJAX Image Gallery powered by Slideflow […]

  37. […] 点击这里进入Slideflow发布页面下载>> […]

  38. […] 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. […]

  39. […] AJAX Image Gallery powered by Slideflow […]

  40. […] AJAX Image Gallery powered by Slideflow […]

  41. […] AJAX Image Gallery powered by Slideflow […]

  42. […] И последнее на сегодня – очень симпатичная js-галлерея для просмотра изображений. Красивая, местами даже удобная. AJAX Image Gallery powered by Slideflow. […]

  43. […] Slideflow — это слайдшоу галерея созданная Nicholas’ом T. Для навигации можно использовать, как перетаскивание мышкой, так и скролл стрелками на клавиатуре. Фотографии и эскизы читаются из XML файла, для генерации развернутых эскизов используется специальный “Photoshop action” (поставляется вместе со скриптом). Посмотреть демо. […]

  44. KK sagt:

    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.

  45. DesignerGeek sagt:

    Is there anyone that made this script automatic with the PHP GD libary or other methods?

  46. fedmich sagt:

    Beautiful, although its a bit slow…
    It may come in handy one day. Thanks fo this :)

  47. […] AJAX Image Gallery powered by Slideflow […]

  48. […] 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 […]

  49. […] 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 […]

  50. […] 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 […]

  51. […] 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 […]

  52. 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!

  53. […] 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 […]

  54. Maytal sagt:

    Fantastic ! We are gonna give it a try with our real estate site.

    Cheers guys.

    דירות למכירה

  55. […] 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 […]

  56. Oyun sagt:

    Great way to display an image gallery.

  57. […] AJAX Image Gallery powered by Slideflow […]

  58. 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.

  59. […] 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 […]

  60. […] 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 […]

  61. Excellent Job… I will try to incorporate this in my Devotional Website…

    Thanks & Regards,

  62. its great way to display images.. i put it on my web..

  63. Martha sagt:

    Very useful and exactly what I needed.

  64. stoo sagt:

    nice image gallery,thanks

  65. berkmr sagt:

    powered by Slideflow

  66. cover flow sagt:

    […] like cover Flow … Apple Fan Blog &187 Like cover Flow: AJAX Image Gallery with Slideflow under …https://mediaevent.services/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 […]

  67. J sagt:

    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?


  68. Very useful,
    Thanks for all ;)

  69. W sagt:

    How do we generate the xml from our own photo collection?

  70. Diseño Web sagt:

    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.

  71. Jake sagt:

    Fantastic app… Great job considering it’s done in AJAX.

    Very Iphone like cover flow design. Gonna give it a try.

    אזרחות פולנית

  72. sohbet sagt:

    i’m using it. thx.

  73. FMS GROUP sagt:

    That’s quality! Good job, thanks

  74. pat sagt:

    This slideshow is not working in IE please telll me what to do

  75. Kristin sagt:

    Used slideflow on the following site – http://www.cbmovement.com. Works like a charm. Thanks!

  76. D sagt:

    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“?

  77. D, try using this as the first lines of init()):

  78. tev sagt:

    Great app but can’t get it to work in IE. Any help would be great. Thx

  79. bestuurbaar sagt:

    great fun, a little slow though

  80. Rabastab sagt:

    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??

  81. Rick sagt:

    When I run the photos through the Photoshop actions the picture develops a black shade across the bottom half of the photo. It does this left, center, or right actions. Anyone else seen this or have any remedies?

  82. ekid sagt:

    the photoshop action
    is possilbe to using gd or IM to make it?

  83. mitliza sagt:

    Is very good!!Thank you!

  84. Xtence sagt:

    Great post, like it very much, keep on the good work!

  85. Nantha sagt:

    hi your demo code is not working properly so please check the code and send it …

  86. kdorg sagt:

    Hi, thanks for this control… when i put the slideflow inside a here slideflow… the images thumbnails show wrong. Why? How can I fix that?… do you have a forum support or something? thank you.

  87. yemek sagt:

    fantastic ajax sample. very nice

  88. Stephen O'Sullivan sagt:

    Hi Guys,

    I have successfully written a php script that automatically makes the required images from a single image that is uploaded from a html form.

    However, there are some limitations:
    – The whitespace behind the skewed left and right images cannot be transparent, therefore the background of the gallery will need to be a single color
    – I could not replicate the mirror effect on the bottom of the images

    I haven’t put too much time into it, i’ve only spent a few hours today but it think the code you have posted is amazing and I’m more than willing to share mine.

    Let me know where to send the scripts to, i’ll tidy it up this evening and should be in a position to e-mail it by tomorrow.

    Kind Regards,

  89. rap dinle sagt:

    Any help would be great. Thx

  90. Phanleson sagt:

    Thank, this is good, but very slow
    any one can help me find a few similar demo same this
    Please pm to me, thanks

  91. Don sagt:

    While I agree that the demo is slow. it is because there’s so many images included in the demo. If you look at one that has fewer images its good. Thanks guys for putting this together, i was looking for a good script to make a photo gallery for my site and this fits the bill. I found the scrolling function rather annoying though but was able to disable it by removing the scrolling.js from the code.

  92. Samuel sagt:

    hi I’m checking out this and like it a lot this far! My problem is that when I download it and run it locally in IE7 I get an error message saying that „photos.item is null or not an object“? Why? It’s no problem with Firefox? Could it be any problems with the xmlparser.js? I would be so happy if anyone at least could give me a hint!


  93. Somnath sagt:

    Fantastic remarkable!!!

  94. qhnz sagt:

    This is GREAT script. But there are 2 problems I saw:

    1. It is VERY SLOW! Any one did improve it. Please let me know by sending me an email (below). Hope to get your wisdom.

    2. If I move the bottom scrollbar or click on the next thumb nail, the thumbnail will move and the new one will be centered. However, the center one does not show in large image box yet. I have to click the center thumbnail to see it in large size. Why? How to make the script to display large size WHEN the new thumbnail is centered?

    My email is quanghoc [at] yahoo dot com


  95. freeman sagt:

    THANKS!!! GREAT script for 3d gallery…

  96. hany sagt:

    why after i downloaded i’m try to open the gallery.html
    it open a blank page i need to see the sample which on the top

  97. Mark Joseph sagt:

    the best script so far in „cover flow in iphone“ category. I searched over the internet with this kind of script but this work is the only one who supports scrolling by dragging the image on left or right. GREAT JOB!

  98. Daï sagt:

    How can I fix the error on line 66 on IE ?


  99. amenity sagt:

    This is really beautiful, thanks for all your work. Unfortunately, I’m not very experienced with Photoshop actions, and I’m having trouble adjusting for my 3:4 image ratio. Any pointers?
    Also, do I need to change any of the javascript for the taller images? I’d be happy to make a step by step how-to (or send you my adjusted .atn file for others to download) if I can figure it out.

  100. Juan sagt:

    So, what if I want to use this for a „portfolio“ style viewing.
    Here’s the Idea.

    I want to have 9 viewings. 4 Left, 1 center, 4 right.
    But I want this to scroll to the middle at launch.
    And being able to control it left or right. with mouse and possibly with a left/right button on each end.
    The middle of course will be launched and previewed.

    Any ideas on how I should go with this?

  101. OJ sagt:


  102. spiddy sagt:

    thank you for slide show
    i use in http://www.ringtonezone.bloggoo.com

    i not good english 555 but very thank you

  103. Diseño Web sagt:

    Great gallery, some years ago the only option for an attractive gallery was Flash, but since AJAX become more popular I can made galleries very funtionals, attractives and ligth in weigth.

  104. Aqeel sagt:

    I want to convert it dynamically gallery.
    i mean i ll get the records from database and then display the whole images.
    anybody have idea about this???
    please tell me asp.
    thanx a lot

  105. Stu sagt:

    I have managed to disect the code to give me just the slide flow, no scroll bar, no big image. I added a in the xml and but just don’t know how (not being a scripter) to get the ‚handleSlideClick‘ function to change from ’swapPhoto‘ to open the url in the xml in the target I specify in the url.

    e.g. Front slide when clicked will go to /folder/page.asp?blablabla in the frame named ‚myframe‘

    Any help would be much appreciated

  106. Peter Jan sagt:

    Jammer dat het erg traag is, maar een supergoed initiatief!

    It’s very slow, however, it’s a fantastic script!

  107. Max sagt:

    Nice effect !

  108. Hannah sagt:


    I have been given a project at work to display the screenshots on our website in a more visually appealing way :-)

    I came across your gallery and think this may be just what I am looking for but have a question before I put the time into setting this up.
    I am looking to link to specific images (centered) within the gallery from a thumbnail on a separate HTML page. Is this possible?

    Kind Regards

  109. Tom sagt:

    Thanks for this project it is so good and functional.

    I want it to know if I could change something of the code. I need that when they click on the center image goes to another webpage.

    See you later,

  110. cubrikaska sagt:

    No veo en esto el sentido.

  111. Domenico sagt:

    beautiful, but not work with MooTools

  112. diseño web sagt:

    Very good effects in the gallery but I agree with some spilled commentaries, everything has a price and here the price that is pleased is the time. Delay much in loading.

  113. Dave sagt:

    If you think the demo is too slow, just download
    Download Slideflow 1.1 including gallery demo, it is much faster
    and better quality

  114. Jey sagt:

    Very good thanks.
    However, for some reason, it does not work for me under IE? I only see the horizontal bars and the scrollbar, but no image, while it works perfectly with Firefox, Google chrome, etc… Any fix possible?

  115. rakhi sagt:

    Very nice script but not working in IE. Plz suggest me how to solve this problem?

  116. Terry H sagt:

    I am trying to use this gallery in a site. I am wondering if you can z-index over the top of it. I have had no success. Do you have any ideas how I can overlay a frame (.png, with some shadow) over this?
    Thanks for any ideas.

  117. Terry H sagt:

    btw, mine works in IE ok. Right now to test it I put my page in the root of the file structure in what his zip file created. I made no deviations to anything. I put his header stuff in my head and the body like he has it in my body in a div to make it fit my purpose.

    Here is my code (unfinished page but working), see if it helps with your IE issues.

    var numPhotos;
    var slideFlowSlider;
    var slideFlow;
    var currentImg;
    var preloader;
    var fadeInTimeout;
    var scrollHandler;
    var photos;
    var currentEffect;
    var slHover;

    var SLIDE_TPL = {
    'b_vertical' : false, 'b_watch': true /* update while dragging */, 'n_controlWidth': 300, 'n_controlHeight': 7,
    'n_sliderWidth': 14, 'n_sliderHeight': 7, 'n_pathLeft' : 0, 'n_pathTop' : 0, 'n_pathLength' : 300-14, 'n_zIndex': 1

    var SLIDE_INIT = {
    'n_minValue' : 0, 'n_maxValue' : 100, 'n_value' : 0, 'n_step' : 1

    var SLIDEFLOW_DATA = {
    'imgWidthNormal': 100, 'imgWidthTilted': 75, 'imgHeight': 90, 'slideDistance': 25,
    'onCenterClick': handleSlideClick, 'handleSlideMove': handleSlideMove, 'containerElement': null,
    'pathLeft': 'photos/left', 'pathCenter': 'photos/center', 'pathRight': 'photos/right',
    'transparentImg': 'images/transparent.gif', 'cursorOpenHand': 'images/openhand.cur', 'cursorClosedHand': 'images/closedhand.cur'

    function handleSlideMove(pos) {
    if (slideFlowSlider)
    slideFlowSlider.f_setValue(pos, false, true /* kein update */);

    function handleSlideClick(imgNumber) {

    function handleSlideSeek(pos) {

    function swapPhoto(photoNumber) {
    /* Preload */
    var imgSrc = 'photos/large/'+ photos.item(photoNumber – 1).getElementsByTagName("src")[0].childNodes[0].nodeValue;
    var wasPreloading = (preloader != undefined);
    preloader = new Image;
    preloader.src = imgSrc;
    currentImg = photoNumber;

    /* Fade out and show new photo */
    if (!wasPreloading) {
    if (currentEffect && currentEffect.state != 'finished')

    currentEffect = new Effect.Fade($('fadeArea'), { duration:0.4, to: 0.001, afterFinish: fadeIn });

    function skipPhoto(offset) {
    photoNumber = currentImg + offset;
    if (photoNumber numPhotos)


    function fadeIn() {
    fadeInTimeout = null;

    if (!preloader)
    else if (preloader.complete) {
    if (currentEffect && currentEffect.state != ‚finished‘)
    currentEffect = new Effect.Appear($(‚fadeArea‘), {duration: 0.8, beforeSetup: function(effect) {
    $(‚photo‘).src = preloader.src;
    $(‚title‘).innerHTML = photos.item(currentImg – 1).getElementsByTagName(„title“)[0].childNodes[0].nodeValue;
    $(’subtitle‘).innerHTML = photos.item(currentImg – 1).getElementsByTagName(„subtitle“)[0].childNodes[0].nodeValue;
    preloader = undefined;
    } else if (!fadeInTimeout) {
    fadeInTimeout = window.setTimeout(„fadeIn()“, 100);

    function handleWheel(delta) {
    if (slideFlow)

    function handleKeys(evt) {
    evt = (evt) ? evt : ((window.event) ? event : null);
    if (evt) {
    //debugLog(„key “ + evt.keyCode);
    switch (evt.keyCode) {
    case 40: /* down */
    case 39: /* right */
    return false;
    case 38: /* up */
    case 37: /* left */
    return false;

    function init() {
    document.onkeydown = handleKeys;
    scrollHandler = new ScrollHandler(handleWheel);

    /* Preload slider hover */
    slHover = new Image;
    slHover.src = „images/seekslider-hover.gif“;

    /* IE6 hover fix */
    if (window.ieFixHover) {

    // –>

    Home – Toni Truesdale



    httpReq = getHttpReq();

    if (httpReq) {
    xmlDoc = getXmlDoc(httpReq, "photos.xml");

    if (xmlDoc) {
    photos = xmlDoc.getElementsByTagName("photo");

    SLIDEFLOW_DATA['containerElement'] = $('slideflow');

    SLIDEFLOW_DATA['images'] = new Array();

    for (var i=0; i

  118. April sagt:

    Very nice script but not working in IE. is there a fix?

  119. tebert sagt:

    Well…for me the example above works on IE 5.5/Windows 2000 up to IE 8/Windows 7. May be smoother on IE but the JavaScript implementation in IE is still crappy. Try using Safari, Chrome or FF instead if you think it is slow :)
    If the sample above doesn’t work for you please check your IE settings first to make sure JavaScript is enabled which it is in the default configuration.

  120. david sagt:

    empese con html hace 2 meses ……..

    en donde hay que introducir este codigo ? body ?

    luego hay que hacer algo mas ?

  121. Nrupesh Soni sagt:

    How would I make the slider open a link when clicking on the center image? I tried modifying the ‚OnCenterClick‘ but didnt get very far! Each image would open a different link/html file.


  122. Gerry Laroza sagt:

    Is it possible to have timer to move/display one image at a time instead of clicking the thumbnail….Many thanks…it is a good start specially for us who are newbie in programming….keep up the good work….and the best of all it is free….

  123. PromInc sagt:

    Has anyone figured out the IE issue?

    What is baffeling me is that the example here on the publishers website works great in IE. However, when you download the code source they are offering it doesn’t work and gives me the yellow bar asking if I want to allow ActiveX access.

    Can the providers of this script please offer working source code? It all works great in FF, Opera, Safari on both a PC and a Mac. Just not the most popular browsing option, IE (I’m using 8) on a PC.

    Thank you.

  124. Nes sagt:

    Looks great but not working in IE8 and Chrome.

    Failing in the xmlparser.js at httpReq.open(„GET“, filename, false /* sync */);

    Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101

    Any fix?


  125. Alberto Jou sagt:

    Fantastic application. However, I will like to use the large picture as href and I cannot find the way.
    I will appreciate if you show me how to

  126. 123doing sagt:

    It’s very good.
    I like this.
    Thanks for share.
    And I wrote something to introduce this project for my readers.
    You can find the post about this in my website.
    If something is wrong,pls figure it out.thanks.

  127. Ryan sagt:

    How do you implement this into a site. I’m a noob at web code and I want to build a gallery for my art work. I like the look of this but I have no idea what to do with the code once I down load it.

    P.S. I have Dreamweaver

  128. Fabio sagt:

    Wich parameter do I have to edit to change the pictures ratio (and even the thumbnail ratio). Is it possible?
    I mean… I must insert magazine coverpapers wich have a different aspect ratio than 4:3… Many thanks

  129. Josh sagt:


    Is it possible to add a preloader when loading the larger images?
    Im struggling to add this.


  130. jpb sagt:

    Is it possible to change the background color of the displayed thumbnails (have a black background for ex.) ? I would like to have same background color as for the whole pages of the site.
    Thank you in advance.

  131. Randy sagt:

    Why no install instructions etc? I’m sure those that are not full-blown web designers would perhaps like to use this.

  132. k sagt:

    I cant seem to play the index page…the images cant be seen.
    any idea why ppl?

  133. mike sagt:

    I cant get it to work in the latest IE and Chrome? any fixes?

    Works fine in Fire Fox and Opera

  134. e sagt:

    I cant get it to work in the latest IE and Chrome either. A fix would be greatly appreciated.

  135. efbolton sagt:

    yes works great infirefox but not ie8. look promising though!

  136. rob sagt:

    how can i use the slideflow as a menu and make the images a link to another page. new to web design so a noob. what code can i use to make the image in the slider a link,

  137. PB sagt:

    If I’m not mistaken, can you not add the link in photos.xml? Don’t have it open in front of me at the moment.

  138. Luca sagt:

    Is it possible to include this gallery in a Blogger post? How can I use the slideshow in?

  139. rob sagt:

    no idead really how to change the code to make it a link, my attempt



  140. rob sagt:

    didnt show the code in the comment???

  141. rob sagt:

    src image1.jpg /src
    href=“page2.html“ target=“self“

    dont know if this will show, just removed some of the code.

  142. Blaine sagt:

    Thank you so Much for this code for the Cover flow.
    How do i make MY images active links? i Tried editing the area but if i go any changes there i can not view my photos. Please Let me know how i can make my Images Links

  143. EvilT sagt:

    is there a way to make this cool gallery autoplay?

  144. Pravin tiwari sagt:

    hi is there any solution to view this in chrome and IE

  145. faus sagt:

    Was anyone able to make this work on Chrome and IE 8?

    Would appreciate any help or comments.

  146. CONFUSED sagt:

    Can one of you subscribers here who have downloaded it , leave step by step instruction what to do with the file since it doesn’t have an „.exe file. Pls leave it for us commoners so we won’t be left out. Rob won’t answer questions. Thanks a bunch.

  147. Al sagt:

    Work bad in IE8-9

  148. miley sagt:

    @ mike: i could see it well on chrome.What sort of problem your are experiencing there?

  149. Pierre sagt:


    Very nice Cover Flow, but is very difficult to install it and to be honest I gave it up. Now I’m using this flash coverflow: http://www.flashxml.net/cover-flow.html. Because is Flash this does not load on Apple devices..but I could live with that. If you could provide us some install instructions would be fantastic.

  150. This is perfect for my new site. I am pretty new to using ajax so I may have a bit of a learning curve here but well worth the effort. So thank you.

  151. Dominik sagt:


    first of all, great job! Now here’s my Problem:
    If I move the bottom scrollbar or click on the next thumb nail, the thumbnail will move and the new one will be centered. However, the center one does not show in large image box yet. I have to click the center thumbnail to see it in large size. Why? How to make the script to display large size WHEN the new thumbnail is centered?

    My email is dominik [at] revierdsign dot com

    Thanks for your help! :)

  152. Helen sagt:

    WOW.. Thank you. Awesome Slide

  153. gazeteler sagt:

    If something is wrong,pls figure it out.thanks.

  154. ukash sagt:

    huuu thnks. good working

  155. krish sagt:

    Is there any way for make it circling

  156. piraba sagt:

    Please let me know how to make left side image/right side image through photo shop.How can i do this…Please tell me sir

  157. Bill sagt:

    hello, we would like to use this slider for our videos, like the demo linked above. Can someone tell me how to make it so videos pop up rather than a larger image?> Thanks

  158. clayton sagt:

    thanks to the author/creator of this cool photoviewer…