www.webdeveloper.com
Results 1 to 9 of 9

Thread: Looking for a non-flash site intro

  1. #1
    Join Date
    Mar 2012
    Posts
    10

    Looking for a non-flash site intro

    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!

  2. #2
    Join Date
    Jul 2012
    Posts
    32

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

    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 CodeOutSide 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.

  3. #3
    Join Date
    Mar 2012
    Posts
    10
    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.

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,688
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Jul 2012
    Posts
    32
    Is There A Reason Why You Cannot Use Flash (I For One Have Never Used It B4 Though)

  6. #6
    Join Date
    Mar 2012
    Posts
    10
    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.

  7. #7
    Join Date
    Mar 2012
    Posts
    10
    Got that working perfectly thank you,, just a really quick one, do you know how I can perfectly center the slideshow?

    Thanks so much!!

  8. #8
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,688
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  9. #9
    Join Date
    Jul 2012
    Posts
    32
    I See

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles