/    Sign up×
Community /Pin to ProfileBookmark

help pleases :)

Hello, hope you have a few minutes to lend me your thoughts on why my code doesn’t do anything. I’m trying to run a looping slideshow of 3 or more pictures, fading in and out. At the moment, nothing happens. The first image is displayed statically in position, no fading or changing image at all.

my code:
in the head I declare my images

[CODE] <script type=”text/javascript”>
<!–
var image1=new Image()
image1.src=”media/home/image1.jpg”
var image2=new Image()
image2.src=”media/home/image2.jpg”
var image3=new Image()
image3.src=”media/home/image3.jpg”
//–>
</script>[/CODE]

and this is in the body

[code]<div id=”content”>
<div id=”slideshow”> <img src=”media/home/image1.jpg”
alt=”oops! The slideshow hasn’t loaded! Please try
refreshing (ctrl+F5) or send us an email to let us know.”
name=”slide” height=”410″ width=”600″> </div>
<div id=”nextslide”> <img src=”media/home/image2.jpg”
alt=”oops! The slideshow hasn’t loaded! Please try
refreshing (ctrl+F5) or send us an email to let us know.”
name=”slide” height=”410″ width=”600″> </div>
<script type=”text/javascript”>
<!–
//if browser does not support the image object, exit.
if (!document.images)
return
if (!document.getElementById)
return

var slide1 = document.getElementById(“slideshow”);
var slide2 = document.getElementById(“nextslide”);
var currentpic = document.getElementById(“slide1pic”);
var nextpic = document.getElementById(“slide2pic”);
var changeslide = document.getElementById(“slideshow”).src;
var duration = 3000; /* fade duration in millisecond */
var showtime = 10000; /* time to stay visible */
//variable that will increment through the images
var step=3;

//function to update opacity/alpha filter of slide1 to a given value and of slide2 to the inverse
function SetOpa(Opa) {
Opa2 = 1-Opa;
slide1.style.opacity = Opa;
slide1.style.MozOpacity = Opa;
slide1.style.KhtmlOpacity = Opa;
slide1.style.filter = ‘alpha(opacity=’ + (Opa * 100) + ‘);’;
slide2.style.opacity = Opa2;
slide2.style.MozOpacity = Opa2;
slide2.style.KhtmlOpacity = Opa2;
slide2.style.filter = ‘alpha(opacity=’ + (Opa2 * 100) + ‘);’;
}

function fade() {
//fade from slide1 to halfway between 1 and 2
for (i = 0; i <= 0.5; i += 0.01) {
setTimeout(“SetOpa(” + (1 – i) +”)”, i * duration);
}
//at halfway point, switch slide images
changeslide=currentpic.src;
document.images.currentpic.src=eval(nextpic.src);
document.images.nextpic.src=changeslide;

//complete fade through
for (i = 0.5; i <= 1; i += 0.01) {
setTimeout(“SetOpa(” + (1 – i) +”)”, i * duration);
}
//update nextslide
document.images.slide2.src=eval(“image”+(step)”.src”);

if(step < 3)
step++;
else
step=1;

//call function fade() every 10 seconds
setTimeout(“fade()”,showtime);
}

fade();
//–>
</script>
</div>
[/code]

can you tell me what i’m doing wrong?

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@007JulienFeb 05.2012 — I do not find elements with [I]slide1pic [/I]and [I]slide2pic[/I] ids ?
[CODE]var currentpic = document.getElementById("slide1pic");// ???
var nextpic = document.getElementById("slide2pic");//???
[/CODE]
Copy linkTweet thisAlerts:
@clover8leafauthorFeb 05.2012 — Oops, it's the image files, this section:

&lt;div id="slideshow"&gt; &lt;img id="slidepic1" src="media/home/image1.jpg"
alt="oops! The slideshow hasn't loaded! Please try
refreshing (ctrl+F5) or send us an email to let us know."
name="slide" height="410" width="600"&gt; &lt;/div&gt;
&lt;div id="nextslide"&gt; &lt;img id="slidepic2" src="media/home/image2.jpg"
alt="oops! The slideshow hasn't loaded! Please try
refreshing (ctrl+F5) or send us an email to let us know."
name="slide" height="410" width="600"&gt; &lt;/div&gt;
&lt;script type="text/javascript"&gt;
Copy linkTweet thisAlerts:
@007JulienFeb 05.2012 — Use a debugger like firebug for firefox or other development console.

You will see, at first, that your [COLOR="Red"]return are not in function[/COLOR] (display warnings if necessary) the command return is made for functions...

With comment before this lines
[CODE]// if (!document.images) return;
// if (!document.getElementById) return;[/CODE]

You will see that [COLOR="Red"]missing + (line 76, col 46)[/COLOR]
[CODE]document.images.slide2.src=eval("image"+(step)[COLOR="Red"]+[/COLOR]".src");
[/CODE]

Than that [COLOR="Red"]curentpic[/COLOR] is null (the eval seems not useful line 68 ? I do not know if it is the solution...)
[CODE]changeslide=currentpic.src;[/CODE]
and so on...
Copy linkTweet thisAlerts:
@bradd_weyandFeb 06.2012 — I think you should have to use Windows Movie Maker its very easy to make a Vedio by putting images on a song,edit some vedio clips etc its quite nice and easy try it !! ?
×

Success!

Help @clover8leaf spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.12,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...