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 Image Gallery, Cover Flow, Coverflow, 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 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!
[...] – 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 :D
[...] 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 [...]
[...] 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??
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?
the photoshop action
is possilbe to using gd or IM to make it?
Is very good!!Thank you!
Great post, like it very much, keep on the good work!
hi your demo code is not working properly so please check the code and send it …
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.
fantastic ajax sample. very nice
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,
Stephen
Any help would be great. Thx
Thank, this is good, but very slow
any one can help me find a few similar demo same this
Please pm to me, thanks
phanleson[at]gmail[dot].com
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.
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!
samuel02[at]gmail[dot]com
Fantastic remarkable!!!
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
Thanks
THANKS!!! GREAT script for 3d gallery…
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
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!
great job thanks
How can I fix the error on line 66 on IE ?
TIA
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.
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?
fantastic!!!
thank you for slide show
i use in http://www.ringtonezone.bloggoo.com
i not good english 555 but very thank you
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.
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
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
Thanks.
Jammer dat het erg traag is, maar een supergoed initiatief!
It’s very slow, however, it’s a fantastic script!
Nice effect !
Hello,
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
Hannah
Hello,
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,
Thz
Tom
No veo en esto el sentido.
beautiful, but not work with MooTools
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.
If you think the demo is too slow, just download
Download Slideflow 1.1 including gallery demo, it is much faster
and better quality
Hi,
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?
thanks
Very nice script but not working in IE. Plz suggest me how to solve this problem?
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.
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) {
swapPhoto(imgNumber);
}
function handleSlideSeek(pos) {
slideFlow.disableMoveUpdate();
slideFlow.glideToPerc(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.cancel();
currentEffect = new Effect.Fade($('fadeArea'), { duration:0.4, to: 0.001, afterFinish: fadeIn });
}
}
function skipPhoto(offset) {
photoNumber = currentImg + offset;
if (photoNumber numPhotos)
return;
swapPhoto(photoNumber);
slideFlow.glideToSlide(photoNumber);
}
function fadeIn() {
fadeInTimeout = null;
if (!preloader)
return;
else if (preloader.complete) {
if (currentEffect && currentEffect.state != ‘finished’)
currentEffect.cancel();
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)
slideFlow.scroll(delta);
}
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 */
skipPhoto(1);
return false;
break;
case 38: /* up */
case 37: /* left */
skipPhoto(-1);
return false;
break;
}
}
}
function init() {
swapPhoto(1);
slideFlowSlider.f_show();
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) {
$$(‘.sliderbutton’).each(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
Very nice script but not working in IE. is there a fix?
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.
empese con html hace 2 meses ……..
en donde hay que introducir este codigo ? body ?
luego hay que hacer algo mas ?
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.
Thanks!
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….
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.
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?
Thanks
Hi
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
Thanks
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.
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
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
Hi
Is it possible to add a preloader when loading the larger images?
Im struggling to add this.
Thanks
Hi,
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.
Regards.
yes ,you can change i can help you …if you need a hellp mail me maanvij0001@gmail.com
Why no install instructions etc? I’m sure those that are not full-blown web designers would perhaps like to use this.
I cant seem to play the index page…the images cant be seen.
any idea why ppl?
I cant get it to work in the latest IE and Chrome? any fixes?
Works fine in Fire Fox and Opera
I cant get it to work in the latest IE and Chrome either. A fix would be greatly appreciated.
[...] 32. SlideFlow Ajax Image Gallery [...]
yes works great infirefox but not ie8. look promising though!
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,
cheers
rob
@rob
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.
Hi,
Is it possible to include this gallery in a Blogger post? How can I use the slideshow in?
Thank’s
Luca
no idead really how to change the code to make it a link, my attempt
image1.jpg
cheers
rob
didnt show the code in the comment???
rob
photo
src image1.jpg /src
subtitle
href=”page2.html” target=”self”
/subtitle
dont know if this will show, just removed some of the code.
rob
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
is there a way to make this cool gallery autoplay?
hi is there any solution to view this in chrome and IE
Was anyone able to make this work on Chrome and IE 8?
Would appreciate any help or comments.
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.
Work bad in IE8-9
[...] AJAX Image Gallery powered by Slideflow [...]
[...] 32. SlideFlow Ajax Image Gallery [...]
@ mike: i could see it well on chrome.What sort of problem your are experiencing there?
Hi,
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.
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.
Hello,
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! :)
WOW.. Thank you. Awesome Slide
If something is wrong,pls figure it out.thanks.
huuu thnks. good working
Is there any way for make it circling
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
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
thanks to the author/creator of this cool photoviewer…
regards!
Wow this runs like sh*t. Congratulations.
Great slider!! A couple of mods maybe?
1) Can the slideshow start where we want, like 5th slide?
2) Can the sslideshow be set to autocycle, move by itself with a timer?
Thanks
Info yang terbaik!!
http://s2ig-the-blog.blogspot.com/2011/08/seni-lukisan-lalat.
html