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