PDA

View Full Version : Rotating/fading images


likegluelikecrew
10-06-2005, 11:45 PM
I'd really like to have a table cell that had about 4 or 5 images that faded into each other, with each one linked to a different page. The cell above would have text that read "did you know about..." and then underneath it would be a certain image, then after a second or two it would fade and change to another picture, so on and so forth. Each would link to a different page. Anybody know of a script or extension that would do this? I'm under the gun to get this done, thanks big time!

We Are 138

PS: is there also a way to get random images instead of rotating images? Like every time the person refreshed the page, there would be a new image linked to its own page?

ranjan
10-07-2005, 12:13 AM
http://www.dreamweaverclub.com/forum/index...owtopic=194&hl= ('http://www.dreamweaverclub.com/forum/index.php?showtopic=194&hl=')

I also have the fade script written but i will have to try and find it, if i do i'll post it

ranjan
10-07-2005, 12:27 AM
http://dreamlettes.net/whims/fadealbum.htm ('http://dreamlettes.net/whims/fadealbum.htm')

Copy the source code

Creative Insanity
10-07-2005, 03:08 AM
hey ranjan, that is a nice little script :) very nice indeeed.

likegluelikecrew
10-07-2005, 03:10 AM
Wow, that's just what I was looking for, thanks! A few questions...

-is the only thing I have to change is the name of the images in the head tag? (where you have images/1.jpg, etc)
-are the images random or rotating in order?
-can I just point to a folder of images and then every time I want to add an image I just put it in the folder and it also gets in the rotation?
-is the drop shadow on the jpgs themselves or does the script somehow put it on there?
-do all the images have to be the same size?
-can I make each image link to a different page? How would I do that?
-if I want to have the rotating images on a few different pages, can I put it as a library item somehow so I can just pull it out onto any page I want?

Thanks big time, I really appreciate your reply!

We Are 138

ranjan
10-07-2005, 06:15 AM
is the only thing I have to change is the name of the images in the head tag?

Also within the body

<img src="images/1.jpg" alt="marker" width="300" height="200" id="SlideShow">

You can put any image as the first image here, also if javascript is disabled, this is the only image that shows.

are the images random or rotating in order?

Its rotating....

for random change

j = j + 1;
if (j > (p - 1)) j = 0;




to


j= Math.round(Math.random()*p);
can I just point to a folder of images and then every time I want to add an image I just put it in the folder and it also gets in the rotation?

No cant do that with javascript alone. It can be done using php/asp/etc with javascript.

is the drop shadow on the jpgs themselves or does the script somehow put it on there?

shadows are a part of image

do all the images have to be the same size?

For this script yes, but that can be modified with some work...

can I make each image link to a different page? How would I do that?

Yes but again it would take some work

if I want to have the rotating images on a few different pages, can I put it as a library item somehow so I can just pull it out onto any page I want?

Yes you can

likegluelikecrew
10-07-2005, 02:53 PM
Again, thanks big time, this is so helpful. I REALLY need to link each image to a different page, though, if you could explain how to do that, that would be awesome. Take care...

We Are 138

ranjan
10-07-2005, 03:59 PM
http://dreamlettes.net/whims/fadealbum.html ('http://dreamlettes.net/whims/fadealbum.html')

Linked images

likegluelikecrew
10-07-2005, 05:16 PM
Very Very Very cool...

Still a couple of questions...

-how would I make the fade faster and the image remain a tad bit longer?
-how can I get rid of the annoying blue link line around the images?

Thanks again, I can't wait to get this up and running!

We Are 138

ranjan
10-07-2005, 05:49 PM
how would I make the fade faster and the image remain a tad bit longer?

var slideShowSpeed = 5000;


Play with that number for speed

r=window.setTimeout("reveal('0')", 100);

You will find several 100s as above in the script change those 100s to make image stay longer

how can I get rid of the annoying blue link line around the images?

Use CSS

#SlideShow {border: none;}

likegluelikecrew
10-08-2005, 03:43 AM
Ok, I pretty much got it to work, whew that actually took me some time, coding is really not my thing, I don't know how you guys do it! Do you have to change the <a href> in the body tag to the first link in your array? At first I didn't do that and I got google for every picture I clicked on, but then when I changed it, it seemed to work. I'm on a Mac and the whole thing worked in Netscape and Safari, but when I previewed it in Internet Explorer (for Mac, version 5.2, which is the latest Mac version) the fade didn't work- the images just went one into another with no fade. How can I fix that? The blue border shows up in Internet Explorer too, did I do the CSS right? I shouldn't have to actually set up any CSS through the styles panel, should I?

Also, I played around with those numbers to try to get the fade timed right, but I just hopelessly messed it up. Can you recommend how I would set it up so that the fades are a bit faster with not as much blank time between images, and that the image stays onscreen for about 8 seconds before fading into the next one?

One last thing, how would I get the links to open up in a new browser window instead of loading over my page?

Again, thanks for all your help, I really appreciate it!

Here's my code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Fade Image Album</title>
<script type="text/javascript">
var Pic=new Array("images/rev1.gif","images/rev2.gif","images/rev3.gif", "images/rev4.gif", "images/rev5.jpg", "images/rev6.jpg")
var picUrl=new Array("http://www.equalvision.com","http://www.revelationrecords.com","http://yahoo.com", "http://www.bonesbrigade.com", "http://www.livewire-records.com", "http://www.vagrant.com")
var slideShowSpeed = 5000;
var t;
var r;
var f;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
var globalOpacity = 0;
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
document.images.SlideShow.src = preLoad[j].src;
if(document.getElementById){
ael=document.getElementById('SlideURL');
ael.setAttribute('href',picUrl[j]);
}
setalpha(0,"SlideShow");
r=window.setTimeout("reveal('0')", 100);
j = j + 1;
if (j > (p - 1)) j = 0;
t = window.setTimeout('runSlideShow()', slideShowSpeed);
}
function reveal(opacity) {
if (opacity <= 100 ){
setalpha(opacity,"SlideShow");
opacity += 5;
globalOpacity = opacity;
r = window.setTimeout("reveal("+opacity+")", 100);
}
else {
f=window.setTimeout("fade('100')",1000);
}
}
function fade(opacity) {
if (opacity >= 0 ){
setalpha(opacity,"SlideShow");
opacity -= 5;
globalOpacity = opacity;
r = window.setTimeout("fade("+opacity+")", 50);
}
}
function setalpha(opacity,t) {
var target=document.getElementById(t);
if (document.getElementById ) {
if (target.style.MozOpacity!=null) {
target.style.MozOpacity = (opacity/100) - 0.001; //patrick h. lauke (http://www.splintered.co.uk/) workaround for Mozilla 'flash' bug - I _never_ would have caught that
} else if (target.style.opacity!=null) {
target.style.opacity = opacity/100;
} else if (target.style.filter!=null) {
target.style.filter = "alpha(opacity=" + opacity + ")";
} else if (target.style.KhtmlOpacity!=null) {
target.style.KhtmlOpacity = opacity/100;
}
}
}
window.onload = runSlideShow;
</script>
<style type="text/css">
<!--
#SlideShow {border: none;}
}
-->
</style>
</head>

<body>

<table width="200" border="0">
<tr>
<td><div align="center">Fade In/Fade Out Test </div></td>
</tr>
<tr>
<td><div align="center">images/1.jpg (http://www.equalvision.com)</div></td>
</tr>
</table>
</body>
</html>

ranjan
10-08-2005, 06:17 AM
How can I fix that?

I don't know, I do not have a mac nor do I code with outdated browsers in mind. So you are on your own there....

Also, I played around with those numbers to try to get the fade timed right, but I just hopelessly messed it up

Its trial and error, I don't have the time to do it. You'll have to give it several tries till you are satisfied with the results.

how would I get the links to open up in a new browser window instead of loading over my page

Simple way is to use attribute target blank in href tag. But a better method is to use javascript, you'll have to find a open browser script and integrate it with this script.

Creative Insanity
10-08-2005, 09:08 AM
I am using ranjan's script likegluelikecrew on my new site and it works absolutly fine in Opera, Netscape, IE and Firefox for windows. I have also had a mate who owns a Mac and he said it worked fine on all his browsers.

So we know that ranjan's script works on both platforms and all browsers. So keep going there as we do know this works. :)

likegluelikecrew
10-09-2005, 04:15 PM
Ughh, please excuse me, I've been playing around with the #'s in this script to try to get it the way I want and I haven't been successful. Maybe some expert coders out there can help me.

var slideShowSpeed = 5000; ---- when I change this # to make the fade go faster, do I make it a larger or smaller #? I'm guessing larger, but when I try it just seems to make the fade jumpy and not smooth. Should I change it to something like 6000 or is it a much smaller scale like 5010?

Also, ranjan suggested that there are several 100's in the script and that I should play with those #'s to get the image to stay longer. Do I change every 100 in the script or just the two lines that start with r=window? There is also a 3rd line that starts with r=window, but it has 50 instead of 100, do I change that too? Also, do I go higher or lower with this # to make the image stay longer, and how much should I change it? Drastically, to something like 1000, or smaller, like maybe 110?

I have one last question about taking away the blue outline with CSS. I'm using an external style sheet for the site, do I put something in there or should I embed the no border style somehow in the page itself? I eventually want to put the rotating image as a library item and then pull it out onto as many pages as I want, so should I use an embedded style or link to the external, and how exactly would I set it up? Do I have to wrap the whole table cell in a Div tag or something?

Anyway, I'm sorry to be so persistant with this, if anyone has the time to answer that would be great, thanks...

We Are 138

Creative Insanity
10-09-2005, 07:09 PM
Looking at the script the fade is set on a calculation and to keep the fade smooth the calculation must be kept in sync for it to work properly. So you will need to study the script to see what the calcualtion is and then change the numbers to suit.
Normaly for speeding up you decrease the numbers and for slowing down you increse the numbers. I am also picking that the numbers are 10ths of seconds.
I used it as it was and never changed anything of the numbers as the default suited for what I wanted.

likegluelikecrew
10-10-2005, 03:47 AM
I have no clue about scripting though, so I wouldn't be able to tell how to keep the fade smooth if I studied the script for 10 years. I'm more of a designer than a coder and any sort of scripting doesn't come easy for me (which is probably why I got into Dreamweaver in the first place!) Any suggestions?

We Are 138

domedia
10-10-2005, 02:23 PM
It's going to take you much, much less time than 10 years to learn some javascript ;)

The best option you have rightn now is to play around with the script. If you wonder if a value should go up or down and by how much, play around with it and see what happens, you'll get a feel for it quickly.