PDA

View Full Version : [DHTML] Slideshow - clean, easy markup & javascript



Znupi
03-21-2007, 09:51 PM
1) CODE TITLE: Ultimate Javascript Slideshow

2) AUTHOR NAME/NOTES: Nickname: Znupi. Actual name: Felix Oghina. From: Romania :D. No personal site yet... i have email tho :P znupi69@gmail.com.

3) DESCRIPTION: A really easy to use fading slideshow javascript. The markup is small and clean. A <div> and an <img>. Only 2 lines of CSS are needed. Only 48 lines of javascript required. What's so great about this script: it doesn't use overlapped images and that sort of stuff. It uses an image and the background of the div the image is in. An explanation of how it actually works is on the DEMO page. Only problem is the images must be the same size. There's nothing I can do about this, since CSS backgrounds are not resizable (as far as my knowledge goes). The script is fast, and has been tested with Firefox 2.* (probably works with older versions, too, smth like FF 1.5.*), IE 6, IE 7 and Opera 9.

4) URL TO CODE: Here's a demo: http://dc-hub-hosting.com/znupi/slideshow

Tell me what you think :).

djr33
03-22-2007, 02:07 AM
FF 1.5 is working fine. I'd test on Safari, but home for the week for spring break and my mac is in my dorm room.

It is quite clean and works well.

Would it be possible to dynamically change the images included in the show using onClick="" on an <a> element somewhere else on the page?
(This is actually a personal question, and if it works, I'd love to use it on my page.)

Znupi
03-22-2007, 09:03 AM
I'll try...

djr33
03-22-2007, 09:09 AM
http://truthandliesmovie.com/gallery/
That has a similar slideshow, but it isn't as smooth as yours.
The method for changing the images works, though, so a look at the code might be helpful.

I'm sorry... I'm totally dragging this thread off topic, to a personal project. It just jumped out at me.


Anyway, please feel free to continue this as a thread about the subject in the first place, though this could be a useful addition to the script for others as well.

Znupi
03-22-2007, 09:25 AM
Oooh I understood something else, I thought you wanted it to be able to have a link saying "next image" ... sorry I'm a bit slow today :p...

Changing the images dynamically... That shouldn't be a problem :) I'll get on it when I get back from school today :).

DimX
03-22-2007, 10:04 AM
Nice, though it's impossible to have multiple slideshows on one page.

Znupi
03-22-2007, 10:32 AM
Nice, though it's impossible to have multiple slideshows on one page.
I know. And I can't make it support multiple slideshows, that would pretty much mean a whole recoding of the script :p.

ddadmin
03-22-2007, 10:54 AM
I know. And I can't make it support multiple slideshows, that would pretty much mean a whole recoding of the script :p.

But you do realize that if you don't and this script gets published, you'll be getting questions daily from members asking you how to accomplish just that? :D

Znupi
03-22-2007, 11:13 AM
But you do realize that if you don't and this script gets published, you'll be getting questions daily from members asking you how to accomplish just that? :D
Lol :D... if so, then if it gets published the description should say in capitals "DOES NOT SUPPORT MULTIPLE INSTANCES" :D... anyway I'll work a little more on it and let you know when it's finished (I'll try to add the image-set-changing option and some other improvements).

mburt
03-22-2007, 09:26 PM
Or... (dramatic music) completely redesign it :). I know you don't want to, but ddadmin is right. You'll get RAPED VERBALLY if you publish it and it doesn't have those features. Then we'll have to jump in and come up with a solution.

Znupi
03-22-2007, 09:33 PM
Or... (dramatic music) completely redesign it :). I know you don't want to, but ddadmin is right. You'll get RAPED VERBALLY if you publish it and it doesn't have those features. Then we'll have to jump in and come up with a solution.
I might just do that :). I've been studying javascript classes and constructors and sorts and I might be able to do it :D... So far I added multiple image sets compatibility... A partial recode could do the trick to multiple slideshows on one page :D... But you'll have to wait a little...

Znupi
03-25-2007, 12:39 AM
I've given up on the idea of multiple instances :(... so I guess I'm ready for the raping :D.
The script is in it's final version (for now) @ http://dc-hub-hosting.com/znupi/slideshow/

I just added the possibility of multiple image sets... I hope the users will like it :).

PS: If you're wondering, yes, I am a Family Guy freak :p.

djr33
03-25-2007, 02:56 AM
Looking very nice. The one question I have at this point is about how it delays a bit before starting the fades.
I think this might be that it is waiting to preload all the images, and it seems it would be nice if it would continue some as they load, perhaps just loading them on their first instance then saving them as loaded after that.

Family Guy is fun. And the other images are actually interesting as well.

I have an idea that might help with the multiple slideshows on one page, which isn't exactly fixing your script, but rather a method I thought of that would allow it for all scripts. I'll try to check that out tonight.

djr33
03-25-2007, 09:02 AM
Sorry for the double post, but I want to bump this with a fairly big update--

I have been working for a bit on testing out my idea.

Good news! It works quite well.

There are still some convenience issues, but it's working very well. Certainly for me, it would be fine, but you need some knowledge of both PHP and JS to update it at this point, so I'm going to look into an easier solution. I'll keep working and update soon.

However, here is a working test for now.

I could have as many instances as desired with this, though it would be a bit of cutting and pasting to make them all work as well as, of course, setting up a set of imgs for each, so, for now, I'll just do this as is.


To save space on the page, I will link to the page--
to view the new page source, slightly updated css, and javascript output from the php, please use view source.
I will paste the PHP itself below, though.

http://www.ci-pro.com/..../2slideshows.htm (http://www.ci-pro.com/misc/phptest/jsinstance/2slideshows.htm)

Note that they are totally independant slideshows, from the CSS to the image sets to the timing. Try changing the image sets at the bottom, or even changing them to the same set and watch the timing differ.


<?php
header('content-type: application/x-javascript');
echo <<<OUT
// -----------------------------
//>Ultimate Javascript Slideshow
//>Author: Znupi
//>Contact: znupi69@gmail.com
// -----------------------------
function $(x) { return document.getElementById(x); }
var slideshow1imgarray = Array(
Array("pics3/pic1.jpg", "pics3/pic2.jpg", "pics3/pic3.jpg", "pics3/pic4.jpg"),
Array("pics2/pic1.jpg", "pics2/pic2.jpg", "pics2/pic3.jpg", "pics2/pic4.jpg", "pics2/pic5.jpg", "pics2/pic6.jpg"),
Array("pics1/pic1.jpg", "pics1/pic2.jpg", "pics1/pic3.jpg", "pics1/pic4.jpg", "pics1/pic5.jpg")
);
var slideshow2imgarray = Array(
Array("pics1/pic1.jpg", "pics1/pic2.jpg", "pics1/pic3.jpg", "pics1/pic4.jpg", "pics1/pic5.jpg"),
Array("pics2/pic1.jpg", "pics2/pic2.jpg", "pics2/pic3.jpg", "pics2/pic4.jpg", "pics2/pic5.jpg", "pics2/pic6.jpg"),
Array("pics3/pic1.jpg", "pics3/pic2.jpg", "pics3/pic3.jpg", "pics3/pic4.jpg")
);

OUT;
for(list($null,$x)=explode('?',$_SERVER['REQUEST_URI']);$x>0;$x--) {
echo <<<OUT
var imgs{$x} = {
urls: Array("pics3/pic1.jpg", "pics3/pic2.jpg", "pics3/pic3.jpg", "pics3/pic4.jpg",
"pics2/pic1.jpg", "pics2/pic2.jpg", "pics2/pic3.jpg", "pics2/pic4.jpg", "pics2/pic5.jpg", "pics2/pic6.jpg",
"pics1/pic1.jpg", "pics1/pic2.jpg", "pics1/pic3.jpg", "pics1/pic4.jpg", "pics1/pic5.jpg"),
objects: Array(),
preload: function() {
for (i=0; i < imgs{$x}.urls.length; i++) {
imgs{$x}.objects[i] = new Image();
imgs{$x}.objects[i].src = imgs{$x}.urls[i];
}
}
}
var slideshow{$x} = {
imgs: slideshow{$x}imgarray,
pause: 2,
delay: 30,
step: 0.05,
curIndex: 0,
curImgSet: 0,
curOpc: 1,
curDir: 0,
tOut: null,
start: function() {
$('slideIMG{$x}').src = slideshow{$x}.imgs[slideshow{$x}.curImgSet][0];
$('slideIMG{$x}').style.opacity = "1";
slideshow{$x}.curOpc = 1;
$('slideDIV{$x}').style.backgroundImage = "url('" + slideshow{$x}.imgs[slideshow{$x}.curImgSet][1] + "')";
slideshow{$x}.curIndex++;
slideshow{$x}.tOut = setTimeout(slideshow{$x}.doSlide, slideshow{$x}.pause*1000);
},
doSlide: function() {
if (!slideshow{$x}.curDir) {
slideshow{$x}.curOpc-=slideshow{$x}.step;
$('slideIMG{$x}').style.opacity = slideshow{$x}.curOpc;
if (window.ActiveXObject) $('slideIMG{$x}').style.filter = "alpha (opacity=" + (slideshow{$x}.curOpc*100) + ")";
if (slideshow{$x}.curOpc > 0) slideshow{$x}.tOut = setTimeout(slideshow{$x}.doSlide, slideshow{$x}.delay);
else {
slideshow{$x}.changeImgs();
slideshow{$x}.curDir = 1;
slideshow{$x}.tOut = setTimeout(slideshow{$x}.doSlide, slideshow{$x}.pause*1000);
}
}
else {
slideshow{$x}.curOpc+=slideshow{$x}.step;
$('slideIMG{$x}').style.opacity = slideshow{$x}.curOpc;
if (window.ActiveXObject) $('slideIMG{$x}').style.filter = "alpha (opacity=" + (slideshow{$x}.curOpc*100) + ")";
if (slideshow{$x}.curOpc < 1) slideshow{$x}.tOut = setTimeout(slideshow{$x}.doSlide, slideshow{$x}.delay);
else {
slideshow{$x}.changeImgs();
slideshow{$x}.curDir = 0;
slideshow{$x}.tOut = setTimeout(slideshow{$x}.doSlide, slideshow{$x}.pause*1000);
}
}
},
changeImgs: function() {
if (slideshow{$x}.curIndex < slideshow{$x}.imgs[slideshow{$x}.curImgSet].length-1) slideshow{$x}.curIndex++;
else slideshow{$x}.curIndex = 0;
if (!slideshow{$x}.curDir) {
$('slideIMG{$x}').src = slideshow{$x}.imgs[slideshow{$x}.curImgSet][slideshow{$x}.curIndex];
slideshow{$x}.curOpc = 0;
$('slideIMG{$x}').style.opacity = 0;
}
else $('slideDIV{$x}').style.backgroundImage = "url('" + slideshow{$x}.imgs[slideshow{$x}.curImgSet][slideshow{$x}.curIndex] + "')";
},
chgImgSet: function (newImgSet) {
if (newImgSet != slideshow{$x}.curImgSet) {
clearTimeout(slideshow{$x}.tOut);
slideshow{$x}.curImgSet = newImgSet;
slideshow{$x}.curIndex = 0;
slideshow{$x}.start();
}
}
}

OUT;
}
?>

Znupi
03-25-2007, 09:58 PM
I thought of that, too... But it's a bit... uhm... ugly...
About the preloading, you gave me a good idea :D... I'm working on something...

djr33
03-25-2007, 11:19 PM
Well, hey, it works ;)

It's at least a good temp. solution to the problem until it works with an OO method, and I haven't yet worked out all the user-friendliness. I think it could be better with some more automation of things. Even OO, it would still need all of the function calls and such, but it should be easy enough to avoid that with a little work.

Znupi
03-26-2007, 05:29 PM
Okay, I added another thing, which I hope is the last... The script will now wait until all images have finished loading (on FF & IE, on Opera it preloads them, but doesn't wait until they finish loading)... About the multiple instances thing... I've given up hope and have no idea how to do it (I tried but to no avail) unless you use php... but as I said it's ugly and many users won't be able to do it :p.

Working script: http://dc-hub-hosting.com/znupi/slideshow

Multiple-instance try (not working): http://dc-hub-hosting.com/znupi/slideshow/index2.html (if anyone feels like debugging / trying to get it to work, be my guest...)

djr33
03-27-2007, 03:39 AM
When I talked about the preloading, I meant the opposite, sorry. That might be a desired function for some people, but it should be optional.

What I wanted was for the slideshow to run without dealing with PRE-loading, then saving each image as it loads. Perhaps having a background loading thing would be helpful too, but waiting for it to load is just silly. At least start with some image there as a placeholder.

It does work well, though. That's good at least.

I don't know enough about JS to debug the second one. Glad you at least gave it a try, though. Hope it ends up working.

Znupi
03-27-2007, 09:47 AM
I updated it. You can now set it to wait until all images are loaded or not by changing the waitForLoad variable to 1 or 0. I also commented all the customizable variables so everyone knows what they do...

Znupi
04-20-2007, 09:37 PM
It is finally done. The slideshow script is now an object, and you can have as many of them as you wish! My internet connection is down so I can't upload the demo, but I'll post here the .js file, which has ~100 lines of code (excluding explanatory comments). In my opinion, the most easy to use javascript slideshow script, but that's probably because I made it, lol! :D Again, it was tested under FF 2.*, IE7, IE6 and Opera 9.

Will this be included in the mighty DD script library? :)

Znupi
04-23-2007, 03:29 PM
I got around my connection probs so I uploaded a demo! :D
http://www.dc-hub-hosting.com/znupi/slideshow/

Znupi
01-03-2008, 10:48 PM
Hi... I see this still hasn't reached the DD script library :( any specific reason? :(

Anyway.. I updated slightly the script.. I re added the option to wait or not for the images to load.. and I made it fade smoothly from the loading image to the first image (the first transition used to be rough).

The demo page is as usual.. http://dc-hub-hosting.com/znupi/slideshow/
The script has been used here: http://airscapes.ca and here: http://leski.com/

jscheuer1
01-04-2008, 07:11 AM
Hmm, first off, it's practically none of my business what gets into the library. Second, it looks like fairly good work, and compact code.

The script does have two obvious problems from my point of view if it were up to me to include it or not (which it isn't) in the DD library. Even though it has a slightly different feature set (more in some ways, less in others) its name is almost identical to a very similar script that is already in the DD library. And it generates a continuous stream of errors in the FF error console.

These are just what jump out at me at the moment, there could be other factors.

Znupi
01-04-2008, 02:56 PM
Ok, Firefox spews no more warnings... there were no errors, just warnings, but I fixed those... And changed it's name... it's now called:



SmoothShow

Znupi
01-09-2008, 09:04 PM
Bump :(

madcow
01-12-2008, 04:17 PM
it works in safari, firefox, ie and opera.

Znupi
01-12-2008, 10:07 PM
it works in safari, firefox, ie and opera.
Thanks for testing it in safari! :) What version of safari are you using?

madcow
01-13-2008, 08:38 AM
Safari 3 Public Beta (Windows), Not much diffrence from Safari 2 apart from it has tabs and it supports a bit of css 3.

ruthc
01-13-2008, 09:39 AM
I like this. Thanks for the download file

Ruth