Random Pictures Popping out

**daddycardona** · 02-22-2013 05:55 AM

I am not really good with JavaScript, and I am trying to make a site for my friend's business. I am making like a comic book website for him, he draws. He would like to have like characters from his story pop out randomly for 30 seconds but just the picture's popping out the side and randomly change. So like you on the site and from the middle right it just opens up for 30 seconds, closes and 2 minutes later a different picture of a different character comes out. This might be already done for a site but I can not find anything like this and I certainly am not creative enough to think how to do it.

**vwphillips** · 02-22-2013 05:12 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
</head>

<body>

<script type="text/javascript">
<!--
// Cartoon PopUp (22-Febuary-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcCartoonPopUp={

 init:function(o){
  var ld=o.ImageLoad,ary=o.ImageArray,a,z0=0;
  for (;z0<ary.length;z0++){
   a=[document.createElement('IMG'),new Image(),0,0];
   a[1].src=ary[z0][0];
   a[0].style.position='absolute';
   a[0].style.visibility='visible';
   a[0].style.borderWidth='0px';
   ary[z0][1]?a[0].title=ary[z0][1]:null;
   ary[z0]=a.concat(ary[z0]);
  }
  this.load(o,ary,new Date(),(typeof(ld)=='number'?ld:5)*1000);
 },

 load:function(o,ary,d,ms){
  clearTimeout(o.to);
  for (var oop=this,w,h,z0=0,z1=0;z0<ary.length;z0++){
   if ((ary[z0][1]&&ary[z0][1].width<40)&&new Date()-d<ms){
    o.to=setTimeout(function(){ oop.load(o,ary,d,ms); },200);
    return;
   }
  }
  for (;z1<ary.length;z1++){
   if (ary[z1][1]&&ary[z1][1].width<40){
    o.obj.removeChild(ary[z1][0]);
    ary.splice(z1--,1);
   }
   else {
    ary[z1][0].src=ary[z1][1].src;
    w=ary[z1][1].width;
    h=ary[z1][1].height;
    ary[z1][2]=[h/2,w/2,h/2,w/2];
    ary[z1][3]=[0,w,h,0];
   }
  }
  if (ary[0]){
   oop.ready(o,ary);
  }
 },

 ready:function(o,ary){
  var ms=o.Animate,ms=typeof(ms)=='number'&&ms>20?ms:1000,show=o.ShowEvery,show=(typeof(show)=='number'&&show>ms/1000*2?show:ms*1000*4)*1000,hide=o.HideAfter,hide=(typeof(hide)=='number'&&hide>ms/1000*2?hide:ms*1000*4)*1000,msk=document.createElement('DIV'),a=document.createElement('A'),mk,z0=0;
  msk.style.position='fixed';
  msk.style.visibility='hidden';
  msk.style.zIndex='202';
  mk=msk.cloneNode(false);
  mk.style.bottom='0px';
  mk.style.width='0px';
  mk.style.right='0px';
  mk.style.height='0px';
  document.body.appendChild(mk);
  msk.style.left='0px';
  msk.style.top='0px';
  msk.style.width='100%';
  msk.style.height=mk.offsetTop+'px';
  document.body.appendChild(msk);
  msk.appendChild(a);
  o=this;
  o.msk=msk;
  o.mk=mk;
  o.a=a;
  o.ary=ary;
  o.lgth=ary.length;
  o.ms=ms;
  o.show=show/2;
  o.hide=hide/2;
  o.to=setTimeout(function(){ o.pop(); },o.show*2);
 },


 pop:function(){
  var o=this,nu=Math.floor(Math.random()*o.lgth);
  o.msk.style.height=o.mk.offsetTop+'px';
  o.ary[nu][0].style.left=Math.random()*(o.msk.offsetWidth-o.ary[nu][3][1])+'px';
  o.ary[nu][0].style.top=Math.random()*(o.msk.offsetHeight-o.ary[nu][3][2])+'px';
  o.a.removeAttribute('href');
  o.ary[nu][6]?o.a.href=o.ary[nu][6]:null;
  o.a.appendChild(o.ary[nu][0]);
  o.animate(o,o.ary[nu],o.ary[nu][2],o.ary[nu][3],new Date(),o.ms,true);
 },

 animate:function(o,ary,f,t,srt,mS,nxt){
  clearTimeout(ary[1]);
  var oop=this,ms=new Date().getTime()-srt,nu,n=[],z0=0;
  for (;z0<4;z0++){
   nu=(t[z0]-f[z0])/mS*ms+f[z0];
   if (isFinite(nu)){
    n[z0]=Math.max(nu,0);
   }
  }
  ary[0].style.clip='rect('+n[0]+'px,'+n[1]+'px,'+n[2]+'px,'+n[3]+'px)';
  if (ms<mS){
   ary[1]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS,nxt); },10);
  }
  else {
   ary[0].style.clip='rect('+t[0]+'px,'+t[1]+'px,'+t[2]+'px,'+t[3]+'px)';
   oop.to=nxt===true?setTimeout(function(){ oop.animate(o,ary,t,f,new Date(),o.ms,false); },o.hide+(Math.random()*o.hide)):setTimeout(function(){  oop.pop(); },o.show+(Math.random()*o.show));
   nxt===false?oop.a.removeChild(ary[0]):null;
  }
 }



}

  zxcCartoonPopUp.init({
   ImageArray:[            //(optional) anarry.arrays defining the image src, title and link href. (number, default = Animate*4)
    // field 0 = image src.
    // field 1 = image title.
    // field 1 = image link href.
    ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon1.gif','Cartoon 1'],
    ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon2.gif','Cartoon 2','http://www.vicsjavascripts.org.uk/'],
    ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon3.gif','Cartoon 3'],
    ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon4.gif','Cartoon 4']
   ],
   ImageLoad:5,             //(optional) the time allowed to load all images in seconds.           (number, default = 5 seconds)
   Animate:1000,            //(optional) the animation duration in milli seconds.                  (number, default = 1000 milli seconds)
   ShowEvery:5,             //(optional) the show period in seconds.                               (number, default = Animate*4)
   HideAfter:5              //(optional) the show period in seconds.                               (number, default = Animate*4)
  })
//-->
</script>
</body>

</html>

**daddycardona** · 02-23-2013 02:36 PM

This is almost what I want I, I was just thinking this might be what he wants. I wanted like a picture to slide on and then go back like in a picture frame, but this is much cooler

Thread: Random Pictures Popping out

Thread Tools

Display

Random Pictures Popping out

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions