...

View Full Version : Resolved Help with a fade version of a slider



mikka23
03-15-2009, 09:12 PM
I am looking for a plugin or script to fade out one panel then fade in a new one. I want to achieve an effect similar to http://www.rockettheme.com for their featured section. You can see my code below:

http://highermoney.com/rt/index6.html#

I want to be able to scroll through the <li> items the way the featured section is on rockettheme. I don't have experience with javascript but have been reading a lot of jquery tutorials recently.

All help is greatly appreciated.

mikka23
03-15-2009, 11:53 PM
I edited a script from dynamic drive (http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm). You can see what I have so far at:

http://highermoney.com/rt/index7.html

Click the numbers works but for some reason the next and previous arrows do not do anything. Sometimes the number links stop working as well. I am completely confused by this.

You can view the following JS files I am using:

http://highermoney.com/rt/contentslider.js
http://highermoney.com/rt/contentfade.js

The only things I editted on the dynamic drive script was to change the pagination links to <li> and put them in a <ul>. I then made the next and previous links images and put them in divs so they are floated right and left. The pagination links also use lavalamp.


Just noticed: Arrow links seem to work in IE but not firefox. Can't work out why.

TinyScript
03-16-2009, 01:00 AM
here's a simple fade script I found somewhere.



<html>
<html>
<head>
<style>
slideText{}
</style>
</head>
<body onload="runSlideShow()" bgcolor="black">
<img src="artp.jpg" style="width:500px;height:500px;position:absolute;left:25%;top:5%" >

<img id="slideShow" src="pic1.jpg" style="width:500px;height:500px;position:absolute;left:25%;top:15%" >
<div id="textfade" style="width:500px;position:absolute;left:25%;top:10%;">
<div id="slideText" style="width:500px;position:absolute;text-align: center;background-image:url('greenGradient.jpg');opacity:.45">
</div></div>

<img src="right.jpg" id="right" onmouseover="document.right.style.opacity=1" onmouseout="document.right.style.opacity=.5" style="position:absolute;left:150px;top:550px;opacity:.5"><img src="left.jpg" id="left" onmouseover="document.left.style.opacity=1" onmouseout="document.left.style.opacity=.5" style="position:absolute;left:100px;top:550px;opacity:.5">


<script language="JavaScript">

/*IMAGE ARRAY. LIST THE ADDRESS OF EACH OF YOUR IMAGES FOR YOUR SLIDESHOW HERE*/
var Pic = new Array()
Pic[0] = 'pic1.jpg'
Pic[1] = 'pic2.jpg'
Pic[2] = 'pic3.jpg'
/*TEXT ARRAY. ADD THE CAPTIONS FOR THE IMAGES HERE*/
var PicText = new Array()
PicText[0] = 'picture 1 text text text text text text'
PicText[1] = 'picture 2 text text text text text text'
PicText[2] = 'picture 3 text text text text text text'

var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){preLoad[i] = new Image();preLoad[i].src = Pic[i]}

function runSlideShow(){
var slideshow= document.getElementById('slideShow');
slideshow.src=Pic[j];
var slidetext = document.getElementById('slideText');
slidetext.innerHTML=PicText[j];

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

}

var element = document.getElementById('textfade');
//var element = document.getElementById('slideText');

var slideshow= document.getElementById('slideShow');

var duration = 1000; /* 1000 millisecond fade = 1 sec */
var steps = 30;
var delay = 5000;

function setOpacity(level) {
element.style.opacity = level;
element.style.MozOpacity = level;
element.style.KhtmlOpacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";

slideshow.style.opacity = level;
slideshow.style.MozOpacity = level;
slideshow.style.KhtmlOpacity = level;
slideshow.style.filter = "alpha(opacity=" + (level * 100) + ");";
}

function fadeIn(){
for (i = 0; i <= 1; i += (1 / steps)) { setTimeout("setOpacity(" + i + ")", i * duration);}
setTimeout("fadeOut()", delay);
runSlideShow()
}

function fadeOut(){
for (i = 0; i <= 1; i += (1 / steps)) {setTimeout("setOpacity(" + (1 - i) + ")", i * duration);}
setTimeout("fadeIn()", duration);
}
fadeIn();
</script>


</body>
</html>


the buttons don't do anything, just testing the opacity light up effect with a dark background instead of image swapping.

mikka23
03-16-2009, 01:10 AM
The script I am using at the moment seems to work well. The only problem is the next and previous arrow which for some reason work in IE for me but not firefox.

TinyScript
03-16-2009, 01:46 AM
where's the trigger? What is supposed to happen? Usually there's like an onclick event? Where's the trigger for previous and next? The others work. find out how. Then build the solution to include those buttons.

I don't get why everyone has such problems with Jquery. I got try to use it some time and see how bad it messes with me. heheheh

mikka23
03-16-2009, 01:56 AM
Is there a way to see the source code as outputted by javascript? For instance, when I view the source code of the page it doesn't show what is being added via javascript. I would like to see exactly what is being output.

TinyScript
03-16-2009, 02:55 AM
Is there a way to see the source code as outputted by javascript? For instance, when I view the source code of the page it doesn't show what is being added via javascript. I would like to see exactly what is being output.

using firefox, you can

save page as
webpage complete

and it saves the output. I confirmed this with a meta tag builder posted here yesterday. It was a script that added the tags but if you viewed the page source, it wasn't there. So I saved the webpage complete and it was in the head.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum