...

View Full Version : How Do I make it fade from one image to the next?



G2Smil
08-31-2010, 06:15 PM
I have this code...
I want to be able to make each image fade from one to the other.
Like this...
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Is there a way to do that with this code?




<script type="text/javascript">
// Simple Javascript Time based Image Swap

var Pics = new Array();

var counter = 0;


// Use this section to change the image paths
function LoadImages()
{
Pics[1] = new Image();
Pics[1].src = "images/pic1.jpg";
Pics[2] = new Image();
Pics[2].src = "images/pic2.jpg";
Pics[3] = new Image();
Pics[3].src = "images/pic3.jpg";
Pics[4] = new Image();
Pics[4].src = "images/pic4.jpg";
Pics[5] = new Image();
Pics[5].src = "images/pic5.jpg";
Pics[6] = new Image();
Pics[6].src = "images/pic6.jpg";
Pics[7] = new Image();
Pics[7].src = "images/pic7.jpg";
Pics[8] = new Image();
Pics[8].src = "images/pic8.jpg";
Pics[9] = new Image();
Pics[9].src = "images/pic9.jpg";
Pics[10] = new Image();
Pics[10].src = "images/pic10.jpg";
Pics[11] = new Image();
Pics[11].src = "images/pic11.jpg";
Pics[12] = new Image();
Pics[12].src = "images/pic12.jpg";
Pics[13] = new Image();
Pics[13].src = "images/pic13.jpg";
Pics[14] = new Image();
Pics[14].src = "images/pic14.jpg";
Pics[15] = new Image();
Pics[15].src = "images/pic15.jpg";
Pics[16] = new Image();
Pics[16].src = "images/pic16.jpg";
Pics[17] = new Image();
Pics[17].src = "images/pic17.jpg";

document.pic1.src = Pics[1].src;
}
//Time in miliseconds
function timedImage()


{
counter ++
if (counter > 17) {
counter = 1;
}
document.pic1.src = Pics[counter].src;
t=setTimeout("timedImage()",5000);
}
</script>

Old Pedant
08-31-2010, 07:47 PM
No. Or, rather, there is. But why would you want to?

Use the code that they show in that link and forget your old code.

codebyter
08-31-2010, 07:50 PM
Please take a look at my code.

http://codebyter.com/post.php?code&id=11

Let me know if you have any questions. You can customize everything needed. Just read the post and how to configure.

p.s. Leave me a comment if you like the script!

Old Pedant
08-31-2010, 08:07 PM
Pretty nice. Only major thing missing, compared to the DynamicDrive script, are the text labels.

I, personally, would rather you had coded:


function Picture( img, link, text )
{
this.image = img;
this.url = link;
this.caption = text;
}

var pix = [
new Picture( "xyz.jpg", "zambonis.html", "Lovely ice scrapers" ),
...

Or similar. Rather than having parallel arrays. Has the major advantage that you can easily add more characteristics to each Picture by just changing what the constructor can handle and if some characteristics are missing for some pictures, you can supply defaults. The user doesn't have to create yet another parallel array to add another property (as for example captions, in your case).

But that's me.

codebyter
08-31-2010, 09:21 PM
Pretty nice. Only major thing missing, compared to the DynamicDrive script, are the text labels.

I, personally, would rather you had coded:


function Picture( img, link, text )
{
this.image = img;
this.url = link;
this.caption = text;
}

var pix = [
new Picture( "xyz.jpg", "zambonis.html", "Lovely ice scrapers" ),
...

Or similar. Rather than having parallel arrays. Has the major advantage that you can easily add more characteristics to each Picture by just changing what the constructor can handle and if some characteristics are missing for some pictures, you can supply defaults. The user doesn't have to create yet another parallel array to add another property (as for example captions, in your case).

But that's me.

Thats actually a great idea for version 2! Thanks :)

wildreason
09-01-2010, 06:47 AM
codebyter, I'm digging your site. I like the simplicity of it. Nice slideshow BTW.

hitek
09-01-2010, 08:49 AM
Good article in first post. There (http://www.jsmadeeasy.com/javascripts/Images/fade-in_slideshow/template.htm) is also another one, I like.

codebyter
09-01-2010, 02:20 PM
codebyter, I'm digging your site. I like the simplicity of it. Nice slideshow BTW.

Thanks much :) I really appreciate it :)

G2Smil
09-01-2010, 05:17 PM
codebyter,

having a few problems putting your slideshow code on my website.
As you can see it's working pretty well on my homepage
http://www.morganwalp.com/
except for the fact that the first image is a tiny square?
Not sure how to get rid of that.

Problem is on my portfolio page it isn't showing up at all?
http://www.morganwalp.com/portfolio.html

Help? Please?

Also is there any way to make it to the images aren't links?
I don't really want to have links on them.
I tried deleting the links, but there is still a finger pointer when moving the mouse on top of them.
And when you click on them you get a blank page?

G2Smil
09-01-2010, 05:40 PM
codebyter,

ok fixed one problem....
now confused on another...
the code only works if i have it twice in my code....

In my head I have this


<script type="text/javascript" src="http://www.codebyter.com/concepts/js/image_slideshow/functions.js"></script>

<script type="text/javascript" id="kwm_img_script">
var images = [];
var urls = [];
images[0] = 'images/pic1';
urls[0] = '';
images[1] = 'images/pic2';
urls[1] = '';
images[2] = 'images/pic3';
urls[2] = '';

var settings = {'step' : 5, 'speed' : 20, 'time_btwn_images' : 3000};
kwm_image_rotator.add(
settings,
'images/pic1',
'height: 300px; width: 500px; border: 1px solid black; background-color: white; z-index: 1;',
images, urls);
</script>


then in my body i have this


<script type="text/javascript" src="http://www.codebyter.com/concepts/js/image_slideshow/functions.js"></script>

<script type="text/javascript" id="kwm_img_script">
var images = [];
images[0] = 'http://morganwalp.com/images/pic1.jpg';
images[1] = 'http://morganwalp.com/images/pic2.jpg';
images[2] = 'http://morganwalp.com/images/pic3.jpg';
images[3] = 'http://morganwalp.com/images/pic4.jpg';
images[4] = 'http://morganwalp.com/images/pic5.jpg';
images[5] = 'http://morganwalp.com/images/pic6.jpg';
images[6] = 'http://morganwalp.com/images/pic7.jpg';
images[7] = 'http://morganwalp.com/images/pic8.jpg';
images[8] = 'http://morganwalp.com/images/pic9.jpg';
images[9] = 'http://morganwalp.com/images/pic10.jpg';
images[10] = 'http://morganwalp.com/images/pic11.jpg';
images[11] = 'http://morganwalp.com/images/pic12.jpg';
images[12] = 'http://morganwalp.com/images/pic13.jpg';
images[13] = 'http://morganwalp.com/images/pic14.jpg';
images[14] = 'http://morganwalp.com/images/pic15.jpg';
images[15] = 'http://morganwalp.com/images/pic16.jpg';
images[16] = 'http://morganwalp.com/images/pic17.jpg';

var settings = {'step' : 5, 'speed' : 20, 'time_btwn_images' : 4000};
kwm_image_rotator.add(
settings,
'http://morganwalp.com/images/pic1.jpg',
'height: 469px; width: 870px; border: 1px solid black; background-color: white; z-index: 1;',
images, urls);
</script>


And somehow that makes it work?
If I try to delete the code in the header the whole thing dissappears?

codebyter
09-01-2010, 05:57 PM
you need to put the script on the page where you want the image rotator to be. it wont work in the head of the page, only in the body.

codebyter
09-01-2010, 06:03 PM
also, you have:


<script type="text/javascript" id="kwm_img_script">
var images = [];
var urls = [];
images[0] = 'images/pic1';
urls[0] = '';
images[1] = 'images/pic2';
urls[1] = '';
images[2] = 'images/pic3';
urls[2] = '';

var settings = {'step' : 5, 'speed' : 20, 'time_btwn_images' : 3000};
kwm_image_rotator.add(
settings,
'images/pic1',
'height: 300px; width: 500px; border: 1px solid black; background-color: white; z-index: 1;',
images, urls);
</script>


it needs to be:


<script type="text/javascript" id="kwm_img_script">
var images = [];
var urls = [];
images[0] = 'images/pic1';
urls[0] = '';
images[1] = 'images/pic2';
urls[1] = '';
images[2] = 'images/pic3';
urls[2] = '';

var settings = {'step' : 5, 'speed' : 20, 'time_btwn_images' : 3000};
kwm_image_rotator.add(
settings,
'URL OF SOME LOADING IMAGE GOES HERE',
'height: 300px; width: 500px; border: 1px solid black; background-color: white; z-index: 1;',
images, urls);
</script>

G2Smil
09-01-2010, 06:14 PM
When I delete the code from the header the slideshow doesn't work at all?
I don't understand it.
But somehow keeping the code in the header makes it work?

I'm not sure what you mean by this either?
'URL OF SOME LOADING IMAGE GOES HERE'

I'm pretty new to trying to mess with my code so...

G2Smil
09-01-2010, 06:16 PM
I have this code in my body



<script type="text/javascript" src="http://www.codebyter.com/concepts/js/image_slideshow/functions.js"></script>

<script type="text/javascript" id="kwm_img_script">
var images = [];
images[0] = 'http://morganwalp.com/images/pic1.jpg';
images[1] = 'http://morganwalp.com/images/pic2.jpg';
images[2] = 'http://morganwalp.com/images/pic3.jpg';
images[3] = 'http://morganwalp.com/images/pic4.jpg';
images[4] = 'http://morganwalp.com/images/pic5.jpg';
images[5] = 'http://morganwalp.com/images/pic6.jpg';
images[6] = 'http://morganwalp.com/images/pic7.jpg';
images[7] = 'http://morganwalp.com/images/pic8.jpg';
images[8] = 'http://morganwalp.com/images/pic9.jpg';
images[9] = 'http://morganwalp.com/images/pic10.jpg';
images[10] = 'http://morganwalp.com/images/pic11.jpg';
images[11] = 'http://morganwalp.com/images/pic12.jpg';
images[12] = 'http://morganwalp.com/images/pic13.jpg';
images[13] = 'http://morganwalp.com/images/pic14.jpg';
images[14] = 'http://morganwalp.com/images/pic15.jpg';
images[15] = 'http://morganwalp.com/images/pic16.jpg';
images[16] = 'http://morganwalp.com/images/pic17.jpg';

var settings = {'step' : 5, 'speed' : 20, 'time_btwn_images' : 4000};
kwm_image_rotator.add(
settings,
'http://morganwalp.com/images/pic1.jpg',
'height: 469px; width: 870px; border: 1px solid black; background-color: white; z-index: 1;',
images, urls);
</script>

codebyter
09-01-2010, 06:19 PM
put this in the <head> tag:


<script type="text/javascript" src="http://www.codebyter.com/concepts/js/image_slideshow/functions.js"></script>

put this in the <body> tag where you want the image rotator to show:


<script type="text/javascript" id="kwm_img_script">
var images = [];
var urls = [];
images[0] = 'images/pic1';
urls[0] = '';
images[1] = 'images/pic2';
urls[1] = '';
images[2] = 'images/pic3';
urls[2] = '';

var settings = {'step' : 5, 'speed' : 20, 'time_btwn_images' : 3000};
kwm_image_rotator.add(
settings,
'http://www.sony.co.uk/biz/wep/menuimages/loading.gif',
'height: 300px; width: 500px; border: 1px solid black; background-color: white; z-index: 1;',
images, urls);
</script>

G2Smil
09-01-2010, 06:26 PM
ok for some reason it's still not working....

here's my original working slideshow with the script in both the header and body
http://morganwalp.com/index.html
it works

here's the code with this in the header

<script type="text/javascript" src="http://www.codebyter.com/concepts/js/image_slideshow/functions.js"></script>

and this in the body

<script type="text/javascript" id="kwm_img_script">
var images = [];
images[0] = 'http://morganwalp.com/images/pic1.jpg';
images[1] = 'http://morganwalp.com/images/pic2.jpg';
images[2] = 'http://morganwalp.com/images/pic3.jpg';
images[3] = 'http://morganwalp.com/images/pic4.jpg';
images[4] = 'http://morganwalp.com/images/pic5.jpg';
images[5] = 'http://morganwalp.com/images/pic6.jpg';
images[6] = 'http://morganwalp.com/images/pic7.jpg';
images[7] = 'http://morganwalp.com/images/pic8.jpg';
images[8] = 'http://morganwalp.com/images/pic9.jpg';
images[9] = 'http://morganwalp.com/images/pic10.jpg';
images[10] = 'http://morganwalp.com/images/pic11.jpg';
images[11] = 'http://morganwalp.com/images/pic12.jpg';
images[12] = 'http://morganwalp.com/images/pic13.jpg';
images[13] = 'http://morganwalp.com/images/pic14.jpg';
images[14] = 'http://morganwalp.com/images/pic15.jpg';
images[15] = 'http://morganwalp.com/images/pic16.jpg';
images[16] = 'http://morganwalp.com/images/pic17.jpg';

var settings = {'step' : 5, 'speed' : 20, 'time_btwn_images' : 4000};
kwm_image_rotator.add(
settings,
'http://www.sony.co.uk/biz/wep/menuimages/loading.gif',
'height: 469px; width: 870px; border: 1px solid black; background-color: white; z-index: 1;',
images, urls);
</script>


http://studentpages.scad.edu/~cmorga27/morganwalp810/index2.html
it doesn't work? and i don't know why?

G2Smil
09-01-2010, 06:31 PM
Ok this is still not working...

page with the script both in the header and body
http://morganwalp.com/index.html
WORKS

This page....
http://studentpages.scad.edu/~cmorga27/morganwalp810/index2.html
page with this in the header

<script type="text/javascript" src="http://www.codebyter.com/concepts/js/image_slideshow/functions.js"></script>
and this in the body

<script type="text/javascript" id="kwm_img_script">
var images = [];
images[0] = 'http://morganwalp.com/images/pic1.jpg';
images[1] = 'http://morganwalp.com/images/pic2.jpg';
images[2] = 'http://morganwalp.com/images/pic3.jpg';
images[3] = 'http://morganwalp.com/images/pic4.jpg';
images[4] = 'http://morganwalp.com/images/pic5.jpg';
images[5] = 'http://morganwalp.com/images/pic6.jpg';
images[6] = 'http://morganwalp.com/images/pic7.jpg';
images[7] = 'http://morganwalp.com/images/pic8.jpg';
images[8] = 'http://morganwalp.com/images/pic9.jpg';
images[9] = 'http://morganwalp.com/images/pic10.jpg';
images[10] = 'http://morganwalp.com/images/pic11.jpg';
images[11] = 'http://morganwalp.com/images/pic12.jpg';
images[12] = 'http://morganwalp.com/images/pic13.jpg';
images[13] = 'http://morganwalp.com/images/pic14.jpg';
images[14] = 'http://morganwalp.com/images/pic15.jpg';
images[15] = 'http://morganwalp.com/images/pic16.jpg';
images[16] = 'http://morganwalp.com/images/pic17.jpg';

var settings = {'step' : 5, 'speed' : 20, 'time_btwn_images' : 4000};
kwm_image_rotator.add(
settings,
'http://www.sony.co.uk/biz/wep/menuimages/loading.gif',
'height: 469px; width: 870px; border: 1px solid black; background-color: white; z-index: 4;',
images, urls);
</script>
DOESN't WORK!!!

why?

Sciliano
09-01-2010, 06:40 PM
G2Smil:

You may want to try another approach.

Download my complete application, posted in a .zip file, here:

http://codingforums.com/showpost.php?p=988714&postcount=2

My code is unobtrusive.

This is the only markup you place within the <body>:


<div class="fade_container">
<div class="fade_img_container">
<div class="fade_img"></div>
</div>
<div class="fade_caption"></div>
</div>



and my copyright notice.

No HTML names or IDs are used, greatly reducing the chance of conflict with an existing document.

This is part of the config file:


var pause = 3; // 3 seconds for each image;
var nonStop = false; // continuous if true;
var hideWhenDone = true; // relevant only if nonStop = false;
var randomize = true;
var useCaptions = true; // see comment, below;
var useLinks = true; // or false;

var imgPath = "./fading_images/images/";
var linkPath = "./fading_images/links/";

/* Image file names and captions, if any.
Use the vertical bar, | to separate the image file name from its caption.
If a caption is present for any image and useCaptions = false, it will be ignored.
*/

var imgSet = []; // image file names - captions - link documents;

imgSet[imgSet.length] = "village1.jpg | Wrought Iron Street Fence | bathtub_link.html";
imgSet[imgSet.length] = "village2.jpg | Brick Fence | bridge_link.html";
imgSet[imgSet.length] = "village3.jpg | Main House and Guest House | dancers_link.html";
imgSet[imgSet.length] = "village4.jpg | Balcony and Towers | dinghy_link.html";
imgSet[imgSet.length] = "village5.jpg | White Two Level | double_bowl_link.html";


Captions and/or links are optional.


The image file names may be any valid HTML name, they don't have to be consecutively numbered as in the example.

codebyter
09-02-2010, 03:09 AM
G2Smil:

U need to define the url variable.

after this:

var images = [];


add this:

var urls = [];

codebyter
09-02-2010, 03:20 AM
Sciliano:

Idk what your deal is, posting around the forums bashing my code. Before you call people out about validated HTML, check the w3c validator for google.com. Also, learn what unobtrusive means. I don't really have the time to download your code and pick through it and nor do I want to bash fellow coders.

A little kindness and respect goes a long way.

Sciliano
09-02-2010, 11:59 AM
codebyter:

You posted a link to your code and asked for comments. ???

http://codingforums.com/showthread.php?p=989305#post989305

let me know if u have any questions or anything.

You identified your code as being "unobtrusive," but it isn't, so that's what I wrote. The page also caused my Firefox to lock, then shut-down with a "not responding" error. I wrote that, too.

Who cares whether google.com validates or not? Two wrongs don't make a right. Google isn't offering their page to the world, you are. Don't you think that if you are going to offer your code to the world, as a complete application and not just an experimental snippet, that you ought to at least validate the markup?

Look, nearly every time I post here, many, many, many people hate my code. Some go so far as to call it crap, most, like the guy who started this thread, just behave as if my post doesn't exist. They never respond. He will never respond, not to me, that is.

That's okay, call my code crap, ignore my post, all I do is add their name to my Ignore List so that I don't make the mistake of offering my help to that person again.

I think we may be more alike than you think. I like the way I do things and I'm never going to change just because some jackwagon on a forum demands that I do.

Just add my name to your Ignore List. All I did was respond to your request for comments about your code.

Keep doing things your way. Don't change just because I came along and posted a few unfavorable comments about your code. Whatever people can write about your code or mine, they at least have to respect that we don't jump just because someone tells us to jump.

I'm sorry if you were offended by my comments, I didn't intend that, I just thought that you'd really want to know that your page locked up my browser.

codebyter
09-02-2010, 02:33 PM
I understand. I posted that link in a fadeShow topic. I didn't claim it to be unobtrusive though now I see why you jumped onto it.

Unobtrusive code is just a term coined by adherents who say inline javascript functions shouldn't be inline. The term is not formally defined anywhere. On another note, I can see why this is a big issue for some people. I could definitely create listeners for everything but until it becomes a standard, I think i'll stick to a little less javascript work to keep things a wee bit faster.

I need to know when the code locks up? I have tested this script on 4 diff. comps last night, every browser including 3 versions of Firefox (even 3.6.4) to see where it freezes or if there is a freeze. I didn't manage to find anything. I tested on Firefox, Internet Explorer 6,7,8,9, Chrome, Safari, Opera, Mobile Safari, Mobile Opera, Linux versions of Chrome and Firefox, everything worked for me.


Google isn't offering their page to the world, you are. lol. k.


that you ought to at least validate the markup? the w3c validator link you showed me, had no javascript validation in it. just html sir.

G2Smil
09-02-2010, 03:08 PM
Uhhh if you all are done arguing now....

First of all I'm a girl.


Look, nearly every time I post here, many, many, many people hate my code. Some go so far as to call it crap, most, like the guy who started this thread, just behave as if my post doesn't exist. They never respond. He will never respond, not to me, that is.


Second thank you codebyter for helping me figure out the code. Everything works well now.

Third Sciliano I took a look at your code, it took me awhile to figure everything out.
But honestly I really didn't want to put a copywrite notice on my website.
Otherwise I probably would have used it.

Thank you both

G2Smil
09-02-2010, 03:20 PM
codebyter,

Is there anyway to get rid of the url option entirely?

Sciliano
09-02-2010, 04:31 PM
codebyter:


the w3c validator link you showed me, had no javascript validation in it. just html sir.

Oh, heck, I'm not a "sir."

HTML is markup, Hypertext Markup Language.

There is no such thing, to my knowledge, as a JavaScript validator. I think I've seen some kind of product that claims to find errors in code, but nothing to validate it. I don't know how you could do that, anyway, since, there are at least 50 versions of the code you wrote, 49 of them can't be "invalid."


...could definitely create listeners for everything but until it becomes a standard,


It actually is the "standard, or "best practice." Always separate structure, from function from appearance. That means no inline styles, no inline JS, no script tags inside the <body>. So, if you are going to use "best practices," I think you should start with a valid structure -- valid HTML. Then write the script and styles.

There is also a CSS validator: http://jigsaw.w3.org/css-validator/

I don't want to visit that page again, to see when my browser locks, but I remember that the images cycled more than once, then I clicked a button, not one of the "resize" buttons, maybe "next" or "pause," I don't remember. That's when it locked.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum