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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to Image Slideshow?

    Hi, Does anybody know how to create an Image Slideshow like the ones on the main page of http://www.game.co.uk and http://www.burton.co.uk????

  • #2
    Regular Coder
    Join Date
    Jul 2010
    Location
    St George, UT
    Posts
    138
    Thanks
    6
    Thanked 17 Times in 17 Posts

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts
    there isnt the one that GAME use on there main page.

    I know how to change the image by onclick but I need to know the simple way to change multiple images on a timer and fade them each time they change.

  • #4
    New Coder
    Join Date
    Jul 2010
    Posts
    37
    Thanks
    17
    Thanked 0 Times in 0 Posts
    http://www.dynamicdrive.com/dynamici...nslideshow.htm

    Here is one similar. Should be a breeze to edit.

  • #5
    New Coder
    Join Date
    Jun 2010
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts
    do i have to use jquery for what i want to achieve? I know nothing about jquery whatsoever so i dont really want to use it.

  • #6
    New Coder
    Join Date
    Jul 2010
    Posts
    37
    Thanks
    17
    Thanked 0 Times in 0 Posts
    I dont believe that link I posted uses jQuery.

    If its from dynamicdrive.com then most likely it is really simple to install and customize.

    To have a dynamic sideshow you are gonna have to dip your paws into JavaScript.
    Last edited by rettgoings; 07-20-2010 at 04:01 PM.

  • #7
    New Coder
    Join Date
    Jun 2010
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts
    fadeslideshow.js is jquery, theres a ton of script which makes it difficult to edit and understand.

  • #8
    New Coder
    Join Date
    Jul 2010
    Posts
    37
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Most of the variables are located in the <HEAD> script though. The speed size and a few others are located below. What else would you need to edit.

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
    		["http://i30.tinypic.com/531q3n.jpg"],
    		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: ""
    })
    
    
    var mygallery2=new fadeSlideShow({
    	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
    		["http://i30.tinypic.com/531q3n.jpg"],
    		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "always",
    	togglerid: "fadeshow2toggler"
    })
    
    </script>
    Last edited by rettgoings; 07-20-2010 at 04:03 PM.

  • #9
    New Coder
    Join Date
    Jun 2010
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts
    i need to understand it and the entire script is made for TWO image slideshows, not ONE,so i dont know what belongs where in the fadeslideshow.js, the head is easy to understand and edit.

  • #10
    New Coder
    Join Date
    Jul 2010
    Posts
    37
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Because the script is giving a demo of 2 options of how to do a sideshow. You wouldnt need to edit the .js file unless you needed to change the actual functions of how its working.

    Code:
    <div id="fadeshow1"></div>
    
    <br />
    
    <div id="fadeshow2"></div>
    
    <div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px">
    <a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png" style="border-width:0" /></a>  <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png" style="border-width:0" /></a>
    </div>
    Then you select one or the other from the head.
    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
    		["http://i30.tinypic.com/531q3n.jpg"],
    		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: ""
    })
    
    
    var mygallery2=new fadeSlideShow({
    	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
    		["http://i30.tinypic.com/531q3n.jpg"],
    		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "always",
    	togglerid: "fadeshow2toggler"
    })
    
    </script>

    I am assuming the first one is the one most like what you are looking for. Demo it. Should be a quick setup.

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    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[*/
    #tst {
      position:relative;width:260px;height:200px;border:solid black 1px;
    }
    #tst IMG {
     width:100%;height:100%;
    
    }
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
    <div id="tst">
     <img src="http://www.dynamicdrive.com/dynamicindex14/stadium.jpg" />
     <img src="http://www.dynamicdrive.com/dynamicindex14/winter.jpg" />
     <img src="http://www.dynamicdrive.com/dynamicindex14/duck.jpg" />
    </div>
    
    <input type="button" name="" value="Next" onclick="S1.Next(1);" />
    <input type="button" name="" value="Prev" onclick="S1.Next(-1);" />
    <script type="text/javascript">
    /*<![CDATA[*/
    function zxcSS(o){
     this.ary=[];
     var imgs=document.getElementById(o.ID).getElementsByTagName('IMG');
     for (var z0=0;z0<imgs.length;z0++){
      imgs[z0].style.position='absolute';
      imgs[z0].style.zIndex=z0>0?'0':'1';
      imgs[z0].style.left='0px';
      imgs[z0].style.top='0px';
      this.ary[z0]=new zxcFadeAnimator(imgs[z0]);
      this.ary[z0].opacity(z0>0?0:100);
     }
     this.cnt=0;
     this.lst=this.ary[0];
     this.ms=o.Duration||1000;
     this.Next(0);
    }
    
    zxcSS.prototype={
    
     Next:function(ud){
      this.lst.obj.style.zIndex='0';
      this.lst.fade(this.lst.data[0],1,this.ms);
      this.cnt+=ud;
      this.cnt=this.cnt<0?this.ary.length-1:this.cnt>=this.ary.length?0:this.cnt;
      this.lst=this.ary[this.cnt];
      this.lst.obj.style.zIndex='1';
      this.lst.fade(this.lst.data[0],100,this.ms);
     }
    
    
    }
    
    
    // Optional Opacity Fade Animator
    function zxcFadeAnimator(obj){
     this.obj=obj;
     this.data=[0];
     this.to=null;
    }
    
    zxcFadeAnimator.prototype={
    
     fade:function(srt,fin,ms){
      clearTimeout(this.to);
      this.data=[srt,srt,fin];
      this.ms=ms*1;
      this.srt=new Date().getTime();
      this.opac();
     },
    
     opac:function(){
      var oop=this,ms=new Date().getTime()-this.srt;
      this.data[0]=(this.data[2]-this.data[1])/this.ms*ms+this.data[1];
      this.opacity(this.data[0]);
      if (ms<this.ms){
       this.to=setTimeout(function(){oop.opac()},10);
      }
      else if (this.data[2]==0){
       this.obj.style.visibility='hidden';
      }
     },
    
     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;
     }
    
    
    }
    
    
    /*]]>*/
    </script>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var S1=new zxcSS({
     ID:'tst',
     Duration:1000
    });
    /*]]>*/
    </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/

  • Users who have thanked vwphillips for this post:

    rettgoings (07-20-2010)

  • #12
    New Coder
    Join Date
    Jun 2010
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts
    brilliant VWPHILLIPS, almost what i need, its simple script, i just want to know if you can make it change the image every 10 seconds or so

  • #13
    New Coder
    Join Date
    Jun 2010
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts
    also is there any way to make it so you can select a certain image?

  • #14
    Regular Coder
    Join Date
    Jul 2010
    Location
    St George, UT
    Posts
    138
    Thanks
    6
    Thanked 17 Times in 17 Posts
    Quote Originally Posted by fleewood View Post
    there isnt the one that GAME use on there main page.

    I know how to change the image by onclick but I need to know the simple way to change multiple images on a timer and fade them each time they change.
    Yeah.. if you want exactly what they are using try looking at the souce. But you are going to have to dive into some sort of JS framework. It looks like they are using prototype and maybe a minified version of jQuery but I didn't take a really close look. The ID of the division the slideshow takes place on the GAME site is "promo".

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Yeah.. if you want exactly what they are using try looking at the souce.
    True.

    But you are going to have to dive into some sort of JS framework
    My own fader: http://www.ArtsOfSnohomish.org/index_may2010.asp

    The fader is actually in an iframe, with code here: http://www.ArtsOfSnohomish.org/May10Fader.html
    but it doesn't look as good as it does in the <iframe>.

    There's no framework used or needed. And the code isn't that hard to follow. Some of the opacity code isn't needed with modern browsers, but it works even with pretty old browsers so I leave it alone.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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