Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    58
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help with a fade version of a slider

    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.
    Last edited by mikka23; 03-16-2009 at 07:55 PM.

  • #2
    New Coder
    Join Date
    Aug 2006
    Posts
    58
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I edited a script from dynamic drive. 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.
    Last edited by mikka23; 03-16-2009 at 01:32 AM.

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    here's a simple fade script I found somewhere.

    Code:
    <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.

  • #4
    New Coder
    Join Date
    Aug 2006
    Posts
    58
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    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

  • #6
    New Coder
    Join Date
    Aug 2006
    Posts
    58
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Quote Originally Posted by mikka23 View Post
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •