Is it marquee ?

[cliffcc]

I have found some websites, they show the pictures like marquee, but not exaclty marquee. Not continuously moving from bottom to top.

Instead, moving from bottom show one picture and then stop a few seconds and then moving again! What is that function and the code? Thanks!

[twiss]

Such things are written in javascript. For example: http://jsbin.com/udije4/10/.

[cliffcc]

Any example of from bottom to top?

[twiss]

Because you ask it so friendly:

In the html, change left:-600px; to top:-450px;
JS:

var sImgArray = [];

function show()
{
    sImgArray = ["imgLaVera", "imgAlmanzor", "imgRosarito", "imgBaile"];
  
    // select elements by their id and replace them in the array
    for (var i = sImgArray.length; i--;) {
      sImgArray[i] = document.getElementById( sImgArray[i] );
    }

    iImg = sImgArray.length - 1;
    setTimeout('playShow(0,' + iImg + ')', 0);
}

function playShow(iVisible, iImgs)
{
    if( iVisible < iImgs )
        iLeft = iVisible + 1;
    else
        iLeft = 0;
        
    imgLeft = sImgArray[iLeft];
    imgLeft.style.top = "-" + imgLeft.height + "px";
    playMove(-imgLeft.height, iVisible, iImgs);
}

function playMove(i, iVisible, iImgs)
{
    if( iVisible < iImgs )
        iLeft = iVisible + 1;
    else
        iLeft = 0;
        
    imgLeft  = sImgArray[iLeft];
    imgRight = sImgArray[iVisible];
    
    if( i < 0 )
    {
        i = i + 1;
        imgLeft.style.top = (i - 2) + "px";
        imgRight.style.top = (i + imgLeft.height) + "px";
        setTimeout('playMove(' + i + ', ' + iVisible + ',' + iImgs + ')', 15);
    }
    else
    {
        if( iVisible < iImgs )
            iVisible = iVisible + 1;
        else
            iVisible = 0;
        setTimeout('playShow(' + iVisible + ',' + iImgs + ')', 4000);
    }
}

[cliffcc]

Thanks! but not top to bottom, how about bottom to top ? actually what is the varibles to control the direction!

WHy don't you use a jQuery slideshow? They're all documented.

[twiss]

Bottom to top is not so easy with this script, you'll need to rewrite it quite a bit. Try yourself, first? And perhaps jQuery is a bit overkill for something simple like this?

Maybe. However, it does have a animation. Vanilla js tends to be a little rough as there's no easing. Vertical slideshows leave me cold.

[twiss]

Yes, that's true. With those large images, I would find easing a bit chaotic, but for small ones it's nice I guess.

[cliffcc]

ok thanks!