[DHTML] Slideshow - clean, easy markup & javascript

[Znupi]

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 ... So far I added multiple image sets compatibility... A partial recode could do the trick to multiple slideshows on one page ... But you'll have to wait a little...

[Znupi]

I've given up on the idea of multiple instances ... so I guess I'm ready for the raping .
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 .

[djr33]

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]

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

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]

I thought of that, too... But it's a bit... uhm... ugly...
About the preloading, you gave me a good idea ... I'm working on something...

[djr33]

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]

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 .

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]

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]

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]

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! Again, it was tested under FF 2.*, IE7, IE6 and Opera 9.

Will this be included in the mighty DD script library?