Log in

View Full Version : Need slideshows stacked vertically as background


testeingchecking
03-20-2008, 12:36 AM
I'd like to stack a series of small slideshows vertically as the background behind a foreground border image.

I am brand new to this. I can use both the ultimate and swiss army slideshows successfully, and the code I found for stacking background images vertically behind a foreground image works fine too.

But I don't know how to combine them.

Here is the background that I can use with an example (****) of what I would like to do with the results from the javascript slideshow, if it were possible.


<style>
span#column {
float:right;
width:191px;
height:787px;
font:0px/0px serif;
background-image:url(file:///Users/boss/Desktop/rt-col/0a-rec-2.png),
****url('javascript:new fadeshow(fadeimages, 176, 846, 0, 3000, 0)'),****
url(file:///Users/boss/Desktop/rt-col/3b-ryle-2.png),
url(file:///Users/boss/Desktop/rt-col/3c-durer.png),
url(file:///Users/boss/Desktop/rt-col/3d-carolina-church.png);
background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-position: 9px 0.1%, 9px 99px, 9px 265px, 9px 430px, 9px 597px;
}

head:first-child+body span#column {
width:auto;height:auto
}

span#column:before {
content:url(file:///Users/boss/Desktop/rt-col/1-foreground.png);
}
</style>


By the way, the reason for doing it this way is that the images will be about 20% the size than the ones I would use for the ultimate or swiss army slideshows as they are. Since I am using about twenty thumbnails total, I want to keep the load down. A gif worked, but the quality is very poor, and if I change one little thing, I have to make it all over. Also, by loading the slideshows in a background stacked, I can control the slideshow settings and make changes more easily.

Thanks to anyone who can show me a code!
Kenny
03-20-2008, 04:47 AM
I write a slide show once in awhile but, I don't worry about xBrowser unless I get paid. You only need to have the first and last images the same...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>Previewer</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/CSS>
body{margin:0px;background-color:#000000;}
img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
.play{background:navy;color:ivory;height:22px;width:18px;font-family:arial;font-size:14px;font-weight:bold;}
.stop{background:red;color:ivory;height:22px;width:18px;font-family:arial;font-size:14px;font-weight:bold;}
</STYLE>
<SCRIPT type="text/javascript">
var timer='';var a=3;var t=20; var loop=0;
function playQ(w){
if(w>0){
if(document.images[w].filters.item('DXImageTransform.Microsoft.alpha').opacity>1 ){
document.images[w].filters.item('DXImageTransform.Microsoft.alpha').opacity-=a;
timer=setTimeout('playQ('+w+')',t);
}
else{w--;timer=setTimeout('playQ('+w+')',2000)}
}
else{
for(i=document.images.length-1;i>0;i--){document.images[i].filters.item('DXImageTransform.Microsoft.alpha').opacity=100}
loop++;
if(loop==2){alert('loop-'+loop)}

else{ timer=setTimeout('playQ(document.images.length-1)',2000);}
}
}

</SCRIPT>
<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY scroll=no>
<table style="height:100%;width:100%;text-align:center"><tbody><tr><td>
<div id="cropper" style="width:930px;height:570px;overflow:hidden;background-color:#b0b0b0">

<img style="position:absolute;top:-46px;left:-12px;z-index:0;width:1024px;" src="1.jpg">
<img style="position:absolute;top:-23px;left:-78px;z-index:3;width:1024px;" src="3.jpg">
<img style="position:absolute;top:-41px;left:-58px;z-index:3;width:1024px;" src="2.jpg">
<img style="position:absolute;top:-23px;left:-78px;z-index:3;width:1024px;" src="3.jpg">
<img style="position:absolute;top:-46px;left:-12px;z-index:3;width:1024px;" src="1.jpg">
</div></td></tr></tbody></table>

<div style="position:absolute;right:0px;top:0px;width:72px">
<input type=button class=play onclick="playQ(document.images.length-1)" value="Q">
<input type=button class=stop onclick="clearTimeout(timer)" value="stop">
</div>


</BODY></HTML>
testeingchecking
03-20-2008, 12:26 PM
Thanks! I'll give this a try this weekend.
testeingchecking
03-21-2008, 01:41 AM
Thanks, but my server does not recognize the code, I presume because it is PHP. The website is a non-profit using a discount service, so I have no control over that.

So if anyone has a code that would run the swissarmy slideshow script as a vertical column of images behind a foreground image (which I have already designed), I would be ecstatically happy and grateful.

I think it would be really easy; I am just too ignorant to figure it out.
Medyman
03-21-2008, 06:29 AM
Thanks, but my server does not recognize the code, I presume because it is PHP.

Hmm...no, it's javascript. Discount host or not, javascript should work.

What are you seeing on the page when you insert it? Perhaps paste the code that you're using because you probably just inserted it wrong.

On another note, I'm not quite sure this script is what you need anyway but I'm unclear on what you mean by "stacked" -- either on top of each other vertically (so you see all the images at once) or literally on top of each other (so you're only seeing one).
testeingchecking
03-22-2008, 12:54 AM
Hmm... I could have sworn it said PHP. LOL.

Oh well, the server's down now, maybe that had something to do with it not working.

Anyway, I don't think the above script would have been what I am hoping for. By "vertical stack" I mean a column of quick, thumbnail slideshows (or rather "rotating images"). If the server were up, I could upload a dithered gif that shows the behaviors I mean.

I wanted to run that column of "slideshow" thumbnails behind a foreground image used as a frame (with a transparent middle, curved corners, and shadow around the edge), so that I could change the images more easily if I had to. Otherwise, I have to edit the images one by one and add the frame by hand.

That's why I tried to combine the Ultimate Slideshow script with code for background and foreground images. It looks easy to do, but my skills are too basic. The code I have works great for static images, but I do not know how to modify it for rotating images.

With the server down, I can't show what I mean.