Looking for a non-flash site intro

**lucky118** · 07-09-2012 04:01 AM

Helloo, I was wondering if anyone could point me in the direction of a script for a java, jquery or any other non-flash site intro?

Basically it just needs to be a simple slideshow that fades through several images, then after the last image it would automatically take you to the main website?

Can't find this anywhere! Thanks for your help guys!

**iGeekiHackiMatt** · 07-09-2012 08:37 PM

Hey, I Think I Have A Solution That Is Not The Greatest But Should Work, You Use The Slide Show From http://www.javascriptkit.com/ Here is the script for the head

Code:

<script language="JavaScript1.1">
<!--

/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}

//-->
</script>

Then You Have The Script For The Body

Code:

<a href="javascript:gotoshow()"><img src="food1.jpg" name="slide" border=0 width=300 height=375></a>
<script>
<!--

//configure the paths of the images, plus corresponding target links
slideshowimages("food1.jpg","food2.jpg","food3.jpg","food4.jpg","food5.jpg")
slideshowlinks("http://food.epicurious.com/run/recipe/view?id=13285","http://food.epicurious.com/run/recipe/view?id=10092","http://food.epicurious.com/run/recipe/view?id=100975","http://food.epicurious.com/run/recipe/view?id=2876","http://food.epicurious.com/run/recipe/view?id=20010")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()

//-->
</script>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>

Now You Go Back Up To The Head And Add This Code

OutSide Of <script>Tags)

Code:

<META HTTP-EQUIV="refresh" CONTENT="seconds;URL=the-other-url">

Again This IS NOT The Best Fix But It Will Work Until You Find A Better Way.

**lucky118** · 07-10-2012 07:21 AM

thanks for your reply, couldn't get it to work unfortunately

This is really bugging me, I could throw this together in seconds using flash!

Must be a way to have a simple fade java slideshow that redirects or somehow brings up the website after the last image.

**vwphillips** · 07-10-2012 08:33 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

.container {
  position:relative;width:200px;height:150px;border:solid red 1px;
}

.content {
 width:200px;height:150px;
}

.captions {
  position:relative;width:200px;height:15px;background-Color:#FFFFCC;border:solid red 1px;
}

.caption {
 width:200px;height:15px;background-Color:#FFFFCC;text-Align:center;
}

.paginate {
  position:relative;width:200px;height:15px;border:solid red 1px;
}

.page {
 width:40px;height:15px;background-Color:#FFFFCC;text-Align:center;float:left;margin-Left:10px;
}

.active {
 background-Color:#FFCC66;
}

.mouseover {
 background-Color:red;
}

/*]]>*/
</style>


<script type="text/javascript">
/*<![CDATA[*/
// Fade Slide Show with optional Captions and Paginate. (19-May-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

// Functional Code Size 3.81K.


var zxcFadeSlideShow={

 init:function(o){
  var id=o.ContainerID,p=document.getElementById(id),ary=p.getElementsByTagName('IMG'),ms=o.FadeDuration,ms=typeof(ms)=='number'?ms:1000,hold=o.AutoHold,srt=o.AutoStart,z0=0;
  for (;z0<ary.length;z0++){
   ary[z0].style.position='absolute';
   ary[z0].style.zIndex=z0>0?'0':'1';
   ary[z0].style.left='0px';
   ary[z0].style.top='0px';
   this.opac(ary[z0],z0>0?0:100);
  }
  this[id]={
   id:id,
   ary:ary,
   ms:ms,
   hold:typeof(hold)=='number'?hold:ms*2,
   ud:true,
   src:o.Location,
   cnt:0
  }
  if (o.AddAutoEvents!==false){
   this.addevt(p,'mouseover','Pause',id);
   this.addevt(p,'mouseout','Auto',id);
  }
  if (typeof(srt)=='number'){
   this.Auto(id,srt);
  }
 },

 Auto:function(id,ms){
  var oop=this,obj=this[id];
  if (obj){
   this.Pause(obj.id);
   obj.to=setTimeout(function(){ oop.fade(obj,obj.ud,true); },ms||100);
  }
 },

 Pause:function(id){
  var obj=this[id];
  if (obj){
   obj.auto=false;
   clearTimeout(obj.to);
  }
 },

 GoTo:function(id,nu){
  var obj=this[id];
  if (obj&&obj.ary[nu]&&nu!=obj.cnt){
   this.fade(obj,nu);
  }
 },

 fade:function(o,nu,auto){
  var lgth=o.ary.length-1,cnt=typeof(nu)=='number'?nu:o.cnt+(nu?1:-1),lst=o.ary[o.cnt],z0=0;
  if (o.ary[cnt]){
   this.Pause(o.id);
   for (;z0<=lgth;z0++){
    this.opac(o.ary[z0],o.ary[z0]!=lst?0:100);
   }
   lst.style.zIndex='0';
   o.ary[cnt].style.zIndex='1';
   o.cnt=cnt;
   o.auto=auto===true;
   clearTimeout(o.dly);
   this.animate(o,o.ary[cnt],0,100,new Date(),o.ms,'dly');
  }
  else {
   window.top.location=o.src;
  }
 },

 animate:function(obj,ob,f,t,srt,mS,to){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   this.opac(ob,now);
  }
  if (ms<mS){
   obj[to]=setTimeout(function(){ oop.animate(obj,ob,f,t,srt,mS,to); },10);
  }
  else if (obj.auto){
    this.Auto(obj.id,obj.hold);
  }
 },

 opac:function(ob,now){
  ob.style.filter='alpha(opacity='+now+')';
  ob.style.opacity=ob.style.MozOpacity=ob.style.WebkitOpacity=ob.style.KhtmlOpacity=now/100-.001;
 },

 addevt:function(o,t,f,p,p1,p2){
  var oop=this;
  if (o.addEventListener){
   o.addEventListener(t,function(e){ return oop[f](p,p1,p2);}, false);
  }
  else if (o.attachEvent){
   o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); });
  }
 }


}

/*]]>*/
</script>


</head>

<body>

<div id="tst1" class="container" >
 <img class="content" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
 <img class="content" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
 <img class="content" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
 <img class="content" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" />
</div>


<script type="text/javascript">
/*<![CDATA[*/

zxcFadeSlideShow.init({
 ContainerID:'tst1',         // the unique ID name of the content DIV element.                (string)
 Location:'http://www.vicsjavascripts.org.uk/', // the url of the page to load.               (string)
 FadeDuration:1000,          //(optional) the fade duration in milli seconds.                 (number, default = 1000)
 AutoHold:1000,              //(optional) the auto rotation 'hold' duration in milli seconds. (number, default = FadeDuration*2)
 AutoStart:1000,             //(optional) the auto rotation 'start' duration in milli seconds.(number, default = no auto rotation 'start')
 AddAutoEvents:1000          //(optional) true = add mouseover Pause and mouseout Auto Rotate.(boolean, default = true)
})
/*]]>*/
</script>
</body>

</html>

**iGeekiHackiMatt** · 07-10-2012 07:46 PM

Is There A Reason Why You Cannot Use Flash (I For One Have Never Used It B4 Though)

**lucky118** · 07-11-2012 04:30 AM

Ah Vic thats perfect thanks so much!!! Thought this was going to be impossible lol! Legend, really thats great, thank you.

I want it non flash so will work on iPad.

**lucky118** · 07-11-2012 09:36 AM

Got that working perfectly thank you,, just a really quick one, do you know how I can perfectly center the slideshow?

Thanks so much!!

**vwphillips** · 07-12-2012 01:47 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

.container {
  position:absolute;visibility:hidden;width:200px;height:150px;border:solid red 1px;
}

.content {
 width:200px;height:150px;
}

.captions {
  position:relative;width:200px;height:15px;background-Color:#FFFFCC;border:solid red 1px;
}

.caption {
 width:200px;height:15px;background-Color:#FFFFCC;text-Align:center;
}

.paginate {
  position:relative;width:200px;height:15px;border:solid red 1px;
}

.page {
 width:40px;height:15px;background-Color:#FFFFCC;text-Align:center;float:left;margin-Left:10px;
}

.active {
 background-Color:#FFCC66;
}

.mouseover {
 background-Color:red;
}

/*]]>*/
</style>


<script type="text/javascript">
/*<![CDATA[*/
// Fade Slide Show with optional Captions and Paginate. (19-May-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

// Functional Code Size 3.81K.


var zxcFadeSlideShow={

 init:function(o){
  var id=o.ContainerID,p=document.getElementById(id),ary=p.getElementsByTagName('IMG'),ms=o.FadeDuration,ms=typeof(ms)=='number'?ms:1000,hold=o.AutoHold,srt=o.AutoStart,z0=0;
  for (;z0<ary.length;z0++){
   ary[z0].style.position='absolute';
   ary[z0].style.zIndex=z0>0?'0':'1';
   ary[z0].style.left='0px';
   ary[z0].style.top='0px';
   this.opac(ary[z0],z0>0?0:100);
  }
  this[id]={
   p:p,
   id:id,
   ary:ary,
   ms:ms,
   hold:typeof(hold)=='number'?hold:ms*2,
   ud:true,
   src:o.Location,
   cnt:0
  }
  this.resize(id);
  this.addevt(window,'resize','resize',id);
  if (o.AddAutoEvents!==false){
   this.addevt(p,'mouseover','Pause',id);
   this.addevt(p,'mouseout','Auto',id);
  }
  if (typeof(srt)=='number'){
   this.Auto(id,srt);
  }
 },

 resize:function(id){
  var obj=this[id];
  if (obj){
   var wwh=this.wwhs();
   obj.p.style.left=(wwh[0]-obj.p.offsetWidth)/2+'px';;
   obj.p.style.top=(wwh[1]-obj.p.offsetHeight)/2+'px';;
   obj.p.style.visibility='visible';;
  }
 },

 wwhs:function(){
  if (window.innerHeight) return [window.innerWidth,window.innerHeight,window.pageXOffset,window.pageYOffset];
  else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth,document.documentElement.clientHeight,document.documentElement.scrollLeft,document.documentElement.scrollTop];
  return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
 },

 Auto:function(id,ms){
  var oop=this,obj=this[id];
  if (obj){
   this.Pause(obj.id);
   obj.to=setTimeout(function(){ oop.fade(obj,obj.ud,true); },ms||100);
  }
 },

 Pause:function(id){
  var obj=this[id];
  if (obj){
   obj.auto=false;
   clearTimeout(obj.to);
  }
 },

 GoTo:function(id,nu){
  var obj=this[id];
  if (obj&&obj.ary[nu]&&nu!=obj.cnt){
   this.fade(obj,nu);
  }
 },

 fade:function(o,nu,auto){
  var lgth=o.ary.length-1,cnt=typeof(nu)=='number'?nu:o.cnt+(nu?1:-1),lst=o.ary[o.cnt],z0=0;
  if (o.ary[cnt]){
   this.Pause(o.id);
   for (;z0<=lgth;z0++){
    this.opac(o.ary[z0],o.ary[z0]!=lst?0:100);
   }
   lst.style.zIndex='0';
   o.ary[cnt].style.zIndex='1';
   o.cnt=cnt;
   o.auto=auto===true;
   clearTimeout(o.dly);
   this.animate(o,o.ary[cnt],0,100,new Date(),o.ms,'dly');
  }
  else {
   window.top.location=o.src;
  }
 },

 animate:function(obj,ob,f,t,srt,mS,to){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   this.opac(ob,now);
  }
  if (ms<mS){
   obj[to]=setTimeout(function(){ oop.animate(obj,ob,f,t,srt,mS,to); },10);
  }
  else if (obj.auto){
    this.Auto(obj.id,obj.hold);
  }
 },

 opac:function(ob,now){
  ob.style.filter='alpha(opacity='+now+')';
  ob.style.opacity=ob.style.MozOpacity=ob.style.WebkitOpacity=ob.style.KhtmlOpacity=now/100-.001;
 },

 addevt:function(o,t,f,p,p1,p2){
  var oop=this;
  if (o.addEventListener){
   o.addEventListener(t,function(e){ return oop[f](p,p1,p2);}, false);
  }
  else if (o.attachEvent){
   o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); });
  }
 }


}

/*]]>*/
</script>


</head>

<body>
<div id="tst1" class="container" >
 <img class="content" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
 <img class="content" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
 <img class="content" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
 <img class="content" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" />
</div>

<script type="text/javascript">
/*<![CDATA[*/

zxcFadeSlideShow.init({
 ContainerID:'tst1',         // the unique ID name of the content DIV element.                (string)
 Location:'http://www.vicsjavascripts.org.uk/', // the url of the page to load.               (string)
 FadeDuration:1000,          //(optional) the fade duration in milli seconds.                 (number, default = 1000)
 AutoHold:1000,              //(optional) the auto rotation 'hold' duration in milli seconds. (number, default = FadeDuration*2)
 AutoStart:1000,             //(optional) the auto rotation 'start' duration in milli seconds.(number, default = no auto rotation 'start')
 AddAutoEvents:1000          //(optional) true = add mouseover Pause and mouseout Auto Rotate.(boolean, default = true)
})
/*]]>*/
</script>
</body>

</html>

**iGeekiHackiMatt** · 07-16-2012 08:45 PM

I See

Thread: Looking for a non-flash site intro

Thread Tools

Display

Looking for a non-flash site intro

This Is Not The Best But It Should Work...

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions