How to Image Slideshow?

fleewood

07-20-2010, 01:34 PM

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????

wildreason

07-20-2010, 02:40 PM

Here are ten options for you:

http://www.catswhocode.com/blog/top-10-javascript-slideshows-carousels-and-sliders

fleewood

07-20-2010, 02:54 PM

rettgoings

07-20-2010, 03:23 PM

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

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

fleewood

07-20-2010, 03:42 PM

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.

rettgoings

07-20-2010, 03:51 PM

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.

fleewood

07-20-2010, 03:56 PM

fadeslideshow.js is jquery, theres a ton of script which makes it difficult to edit and understand.

rettgoings

07-20-2010, 03:58 PM

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.

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

fleewood

07-20-2010, 04:36 PM

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.

rettgoings

07-20-2010, 04:55 PM

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.

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

vwphillips

07-20-2010, 05:09 PM

<!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>

fleewood

07-20-2010, 09:06 PM

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

fleewood

07-20-2010, 09:19 PM

also is there any way to make it so you can select a certain image?

wildreason

07-20-2010, 09:23 PM

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

Old Pedant

07-20-2010, 11:18 PM

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.

Magic Toolbox

07-21-2010, 01:43 AM

So you want to... fade between images; choose how many seconds each image appears for; pause on mouse hover; user can select any image; easy to edit; not using jQuery.

Magic Slideshow does all this.

http://www.magictoolbox.com/magicslideshow/

Click the examples page to see some of the customization options.

Old Pedant

07-21-2010, 01:49 AM

Pretty nice!

vwphillips

07-21-2010, 08:40 AM

<!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);" />
<input type="button" name="" value="Auto" onclick="S1.Auto();"/>
<input type="button" name="" value="Pause" onclick="S1.Pause();"/>
<input type="button" name="" value="GoTo 0" onclick="S1.GoTo(0);"/>
<input type="button" name="" value="GoTo 1" onclick="S1.GoTo(1);"/>
<input type="button" name="" value="GoTo 2" onclick="S1.GoTo(2);"/>
<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.hold=o.Hold||1000;
this.Next(0);
}

zxcSS.prototype={

GoTo:function(nu){
clearTimeout(this.to);
if (this.ary[nu]){
this.cnt=nu;
this.Next(0);
}
},

Next:function(ud){
clearTimeout(this.to);
this.lst.obj.style.zIndex='0';
this.lst.fade(this.lst.data[0],0,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);
},

Auto:function(){
clearTimeout(this.to);
var oop=this;
this.Next(1);
this.to=setTimeout(function(){ oop.Auto(); },this.hold+this.ms);
},

Pause:function(){
clearTimeout(this.to);
}

}

// 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 {
this.data[0]=this.data[2];
this.opacity(this.data[0]);
}
},

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,
Hold:2000
});

S1.Auto();

/*]]>*/
</script>
</body>

</html>

vwphillips

07-22-2010, 11:03 AM

comments as requested by email/PM

<!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%;

}

#tst1 {
position:relative;width:260px;height:200px;border:solid black 1px;
}
#tst1 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);" />
<input type="button" name="" value="Auto" onclick="S1.Auto();"/>
<input type="button" name="" value="Pause" onclick="S1.Pause();"/>
<input type="button" name="" value="GoTo 0" onclick="S1.GoTo(0);"/>
<input type="button" name="" value="GoTo 1" onclick="S1.GoTo(1);"/>
<input type="button" name="" value="GoTo 2" onclick="S1.GoTo(2);"/>
<div id="tst1">
<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>
<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
},

Pause:function(){
clearTimeout(this.to);
}

}

// 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;
}

}

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

// generatate a new instance of the script.
var S1=new zxcSS({
ID:'tst', // 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:2000 // (optional) the hold duration of automatic changing of images. (digits, default = Duration*2)
});

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

S2.Auto();

/*]]>*/
</script>
</body>

</html>