8 Replies - 11075 Views - Last Post: 29 January 2011 - 12:45 PM

#1 Decypher  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 400
  • Joined: 28-June 08

Slideshow fade in and out

Posted 27 January 2011 - 09:05 AM

Hey guys, currently making a website for a friend and he's after a image slide show that fades in and out of the images. He wants it javascript based as he does not want flash on it. However my knowledge of javascript at the moment is very poor but this is what I've come up with so far.

I managed to get a slideshow working fine without the fade. Then I got a fade working for IE with this code:


var slideShowSpeed = 5000;

var crossFadeDuration = 5;

var Pic = new Array();

Pic[0] = 'images/SD_Banner.jpg'
Pic[1] = 'images/SD_Banner1.jpg'

var t;
var o;
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() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=9)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}



However after doing some research found out "document.all" only works for IE only...

So did some more looking into it and found this:

</div>
    <div id="banner">
     <img src="images/SD_Banner.jpg" />
     <img src="images/SD_Banner1.jpg" />
    </div>
    
 <script type="text/javascript">
/*<![CDATA[*/
function zxcSS(o){
 var parent=document.getElementById(o.ID)                // the parent node of the images
 var imgs=parent.getElementsByTagName('IMG');            // the images in the parent node, the parent must be position 'relative' in the CSS
 this.ary=[];                                            // create a script instance array to store fade animator instances
 for (var z0=0;z0<imgs.length;z0++){                     // rotate through the images
  imgs[z0].style.position='absolute';                    // to allow the images to be placed on top of each other
  imgs[z0].style.zIndex=z0>0?'0':'1';                    // the first image is on top
  imgs[z0].style.left='0px';                             // all images have a position left of 0px
  imgs[z0].style.top='0px';                              // all images have a position top of 0px
  this.ary[z0]=new zxcFadeAnimator(imgs[z0],z0>0?0:100); // each field of this.ary contains a new instance for the fade animator with an image as its object
  this.ary[z0].opacity(z0>0?0:100);                      // set the opacity of the top image to 100 and the balance to 0
 }
 this.cnt=0;                                             // create a script instance counter this.cnt to 0
 this.lst=this.ary[0];                                   // create a script instance object referencing the top image
 this.ms=o.Duration||1000;                               // create a script instance recording the fade duration
 this.hold=o.Hold||this.ms*2;                            // create a script instance recording the automatic image change duration
}

zxcSS.prototype={

// the instance 'GoTO' function
// pass a number of the instance ary field to fade in that image
 GoTo:function(nu){
  clearTimeout(this.to);  // clear the timeout of the instance 'Auto' function
  if (this.ary[nu]){      // make sure the instance ary field exists
   this.cnt=nu;           // set the instance count to the number
   this.Next(0);          // call the instance 'NEXT' function passing 0 which will not increment the count
  }
 },

// the instance 'Next' function
// pass 1 or -1 to increment or decrement the intance count
 Next:function(ud){
  clearTimeout(this.to);                       // clear the timeout of the instance 'Auto' function
  this.lst.obj.style.zIndex='0';               // move the last image to the bottom
  this.lst.fade(this.lst.data[0],0,this.ms);   // fade out the last image
  this.cnt+=ud;                                // increment or decrement the intance count
  this.cnt=this.cnt<0?this.ary.length-1:this.cnt>=this.ary.length?0:this.cnt; // if the count is less than 0 set it to the maximum, if grater then the maximum set it to 0
  this.lst=this.ary[this.cnt];                 // change the instance lst to the new image
  this.lst.obj.style.zIndex='1';               // move the last image to the top
  this.lst.fade(this.lst.data[0],100,this.ms); // fade in the last image
 },

// the instance 'Auto' function
// to automatically change the images
 Auto:function(){
  clearTimeout(this.to); // clear the timeout of the instance 'Auto' function
  var oop=this;          // assign the instance to a local vaiable  to allow the setTimeout to function
  this.Next(1);          // call the instance 'Next' function  passing 1 to increment the count
  this.to=setTimeout(function(){ oop.Auto(); },this.hold+this.ms); // recall 'Auto' after the 'hold' plus 'fade' duration
 },


}


// Opacity Fade Animator
function zxcFadeAnimator(obj,srt){
 this.obj=obj;            // the instance object
 this.data=[srt];         // and array the current, start and finish value of opacity
 this.to=null;
}

zxcFadeAnimator.prototype={

// instace function 'fade'
// to start a fade in or fade out
// parameter 0 = the fade start value.  (digits)
// parameter 1 = the fade finish value. (digits)
// parameter 0 = the fade duration.     (digits)
 fade:function(srt,fin,ms){
  clearTimeout(this.to);         // stop the instance setTimeout
  this.data=[srt,srt,fin];       // assign the current, start and finish value of opacity
  this.ms=ms*1;                  // the duration of the effect
  this.srt=new Date().getTime(); // the start time of the change
  this.change();                 // start the change
 },

// instance function 'change'
// to control the change of fade in or fade out
 change:function(){
  var oop=this;                                                      // assign the instance to a local vaiable  to allow the setTimeout to function
  var ms=new Date().getTime()-this.srt;                              // the current time minus the start time
  this.data[0]=(this.data[2]-this.data[1])/this.ms*ms+this.data[1];  // increment the current value dependent on the start and finish values and elapsed time
  this.opacity(this.data[0]);                                        // set the opacity to the current value
  if (ms<this.ms){                                                   // if the elapsed time is less than the 'fade duration' recall function opac
   this.to=setTimeout(function(){oop.change()},10);
  }
  else {
   this.data[0]=this.data[2];                                        // set the current value to the finish value
   this.opacity(this.data[0]);                                       // set the opacity to the current value(finish value)
  }
 },

// instance function 'opacacity'
// to control the change of fade in or fade out
 opacity:function(opc){
  opc=opc<0?0:opc>100?100:opc;
  var obj=this.obj;
  obj.style.filter='alpha(opacity='+opc+')';
  obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
 }


}

var S2=new zxcSS({
 ID:'banner',      // the unique ID name of the images parent node.                 (string)
 Duration:1000, // (optional) the duration of the fade effect in milliseconds.   (digits, default = 1000)
 Hold:5000     // (optional) the hold duration of automatic changing of images. (digits, default = Duration*2)
});

S2.Auto();

/*]]>*/
</script>



However, even though this works for Mozilla and Chrome, IE does not like this at all...

Is there anyway of somehow doing some kind of IF statemement depending on which browser is open to determine which code shoud be used?

Cheers in advance

Is This A Good Question/Topic? 0
  • +

Replies To: Slideshow fade in and out

#2 cfoley  Icon User is offline

  • Cabbage
  • member icon

Reputation: 1939
  • View blog
  • Posts: 4,027
  • Joined: 11-December 07

Re: Slideshow fade in and out

Posted 27 January 2011 - 09:29 AM

Quote

However my knowledge of javascript at the moment is very poor


We can start with the basics then. Java and Javascript are different animals. One is warm and fizzy and the other is sharp and spiky. I'll leave it to you to decide which is which.

I've moved your thread to the Javascript forum where you'll get more useful help. ;)
Was This Post Helpful? 0
  • +
  • -

#3 nkasei28  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 93
  • Joined: 10-May 09

Re: Slideshow fade in and out

Posted 27 January 2011 - 05:37 PM

I think you can use jquery. Jquery has fadeIn and fadeOut functions and i think you might wanna take a look at them from here.

This post has been edited by nkasei28: 27 January 2011 - 05:43 PM

Was This Post Helpful? 1
  • +
  • -

#4 Decypher  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 400
  • Joined: 28-June 08

Re: Slideshow fade in and out

Posted 27 January 2011 - 07:50 PM

cheers will have a look into it :)
Was This Post Helpful? 0
  • +
  • -

#5 Decypher  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 400
  • Joined: 28-June 08

Re: Slideshow fade in and out

Posted 29 January 2011 - 08:22 AM

Hey found something about a jquery slideshow but when I input it into my code, it doesn't seem to work:

JS:
function slideSwitch() {
    var $active = $('#banner IMG.active');

    if ( $active.length == 0 ) $active = $('#banner IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#banner IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});



CSS:
#banner {
	border:#000; border:thin;
	background-color:#000;
	height:278px; max-height:278px; 
	width:550px; max-width:550px; 
	position:relative;
	float:right;
}

#banner IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#banner IMG.active {
    z-index:10;
}

#banner IMG.last-active {
    z-index:9;
}



HTML:
<script src="js/javasript.js" type="text/javascript">
</script>
</head>
<body onload="slideSwitch();">

</div>
    <div id="banner">
     <img src="images/SD_Banner.jpg" alt="" class="active"/>
     <img src="images/SD_Banner1.jpg" alt""/>
    </div>


Was This Post Helpful? 0
  • +
  • -

#6 nkasei28  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 93
  • Joined: 10-May 09

Re: Slideshow fade in and out

Posted 29 January 2011 - 10:14 AM

I am browsing wiv ma fon and it's hard to read your code but the way i see it, u don't need so much code. what you need to do is to get the jquery library and include it in your website. Then call the fadein function on a slide when it is being shown and call the fadeout function when it is has to go for a next slide to come. Please follow the link i gave you in my other post and read a little about it. I'm pretty sure life will be a lot easier after you read it.
Was This Post Helpful? 1
  • +
  • -

#7 Decypher  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 400
  • Joined: 28-June 08

Re: Slideshow fade in and out

Posted 29 January 2011 - 10:38 AM

ahh...Haven't added a jquery library or know what it is if I'm honest...
looked on the link you gave but nothing about a library is mentioned either. When I go to google the top links what me to download something...Is that correct?

This post has been edited by Decypher: 29 January 2011 - 10:48 AM

Was This Post Helpful? 0
  • +
  • -

#8 nkasei28  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 93
  • Joined: 10-May 09

Re: Slideshow fade in and out

Posted 29 January 2011 - 11:23 AM

Please follow this link: here. I think it will take you about half an hour to read through and you will get the library there as well. Sorry i didn't tell you about that earlier.

This post has been edited by nkasei28: 29 January 2011 - 12:00 PM

Was This Post Helpful? 1
  • +
  • -

#9 Decypher  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 400
  • Joined: 28-June 08

Re: Slideshow fade in and out

Posted 29 January 2011 - 12:45 PM

Not your fault, it's my own for not looking around the topic.

Cheers for all the help. last piece in the jigsaw to the website.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1