PDA

View Full Version : Stop slideshow from starting over



Ponder
05-24-2012, 12:20 AM
1) Script Title: Conveyor Belt slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm

3) Describe problem: Working great. We have a link for each image. When clicking an image and going to that link, when you go back to the page with the slideshow, the slideshow starts again from the beginning slide.

Is there a way to have the slideshow start where is was when the image and link was clicked, and not start again from the beginning.?

Many thanks...Ponder

vwphillips
05-24-2012, 10:45 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>
</head>

<body>
<script type="text/javascript">

/***********************************************
* Conveyor belt slideshow script- 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 full source code
***********************************************/

var cookiename="fred"; // the cookie name
var days=1; // the number of days to restore the last position


//Specify the slider's width (in pixels)
var sliderwidth="300px";
//Specify the slider's height
var sliderheight="150px";
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3;
//configure background color:
slidebgcolor="#EAEAEA";

//Specify the slider's images
var finalslide=''
var leftrightslide=[
'<a href="http://"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" border=1 width=100></a>',
'<a href="http://"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" border=1 width=100></a>',
'<a href="http://"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" border=1 width=100></a>',
'<a href="http://"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" border=1 width=100></a>',
'<a href="http://"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" border=1 width=100></a>' // no commer
];
//Specify gap between each image (use HTML):
var imagegap=" ";

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5;


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed;
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>';
;document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>');
var actualwidth='';
var cross_slide, ns_slide;

function fillup(){
var lft=typeof(days)=='number'&&cookie(cookiename)?parseInt(cookie(cookiename)):0;
cross_slide=document.getElementById("test2");
cross_slide2=document.getElementById("test3");
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide;
actualwidth=document.getElementById("temp").offsetWidth;
cross_slide.style.left=lft+"px";
cross_slide2.style.left=lft+(actualwidth+slideshowgap)*(copyspeed>0?1:-1)+"px";
lefttime=setInterval("slideleft()",30);
}

window.onload=fillup;

function slideleft(){
var lft=parseInt(cross_slide.style.left)-copyspeed,sz=actualwidth+slideshowgap;
if ((copyspeed>0&&lft<-sz)||(copyspeed<0&&lft>sz)){
lft+=sz*(copyspeed>0?1:-1);
}
cross_slide.style.left=lft+"px";
cross_slide2.style.left=lft+sz*(copyspeed>0?1:-1)+"px";
if (typeof(days)=='number'){
document.cookie=cookiename+'='+lft+';expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path=/';
}
}


function cookie(nme){
var re=new RegExp(nme+'[^;]+','i');
if (document.cookie.match(re)){
return document.cookie.match(re)[0].split("=")[1];
}
return null
}



with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
document.write('</td></table>')
}
</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
</body>

</html>

Ponder
05-24-2012, 10:30 PM
Hi vwphillips....Many thanks for responding......

I placed the code just where you show it to be but did not change it at all...and it did not do anything to restart the conveyor where it stopped.....

There was no change..

Should I be doing something with the code in addition to placing it where you show it??

Thanks for helping me....Ponder

jscheuer1
05-25-2012, 04:44 AM
He means for you to use the entire script from his post. He has made many modifications.

The red part is simply to indicate where you can configure the cookie's behavior.

The name (cookiename) can be any quoted string with no spaces containing only letters, numbers, dashes and underscores and must begin with a letter or underscore. It should be unique. Like if you have different conveyors on different pages, use a different name on each page. If you have the same conveyor on different pages and you want them all to remember where the others were, use the same name for all of them.

The days is the number (unquoted) of days that the cookie will persist for. The way the code is written, that has to be at least 1. Well it could be a decimal fraction. 1 is reasonable. A session only cookie might be more appropriate but that's not an option in the current code provided.

vwphillips
05-25-2012, 09:37 AM
session only cookie might be more appropriate but that's not an option in the current code provided.


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

<body>
<script type="text/javascript">

/***********************************************
* Conveyor belt slideshow script- 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 full source code
***********************************************/

var cookiename="fred"; //(optional) the cookie name. (string, default = no cookie)
var days=1; //(optional) number = the number of days to restore the last position. (default = session only)


//Specify the slider's width (in pixels)
var sliderwidth="300px";
//Specify the slider's height
var sliderheight="150px";
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3;
//configure background color:
slidebgcolor="#EAEAEA";

//Specify the slider's images
var finalslide=''
var leftrightslide=[
'<a href="http://"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" border=1 width=100></a>',
'<a href="http://"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" border=1 width=100></a>',
'<a href="http://"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" border=1 width=100></a>',
'<a href="http://"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" border=1 width=100></a>',
'<a href="http://"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" border=1 width=100></a>' // no commer
];
//Specify gap between each image (use HTML):
var imagegap=" ";

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5;


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed;
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>';
;document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>');
var actualwidth='';
var cross_slide, ns_slide;

function fillup(){
var lft=typeof(window['cookiename'])=='string'&&cookie(cookiename)?parseInt(cookie(cookiename)):0;
cross_slide=document.getElementById("test2");
cross_slide2=document.getElementById("test3");
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide;
actualwidth=document.getElementById("temp").offsetWidth;
cross_slide.style.left=lft+"px";
cross_slide2.style.left=(actualwidth+slideshowgap)+"px";
cross_slide.appendChild(cross_slide2);
lefttime=setInterval("slideleft()",30);
}

window.onload=fillup;

function slideleft(){
var lft=parseInt(cross_slide.style.left)-copyspeed,sz=actualwidth+slideshowgap;
if ((copyspeed>0&&lft<-sz)||(copyspeed<0&&lft>0)){
lft+=sz*(copyspeed>0?1:-1);
}
cross_slide.style.left=lft+"px";
if (typeof(window['cookiename'])=='string'){
document.cookie=cookiename+'='+lft+(typeof(window['days'])=='number'?';expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path=/':'');
}
}


function cookie(nme){
var re=new RegExp(nme+'[^;]+','i');
if (document.cookie.match(re)){
return document.cookie.match(re)[0].split("=")[1];
}
return null
}



with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
document.write('</td></table>')
}
</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
</body>

</html>

Ponder
05-26-2012, 03:23 PM
Hi John....OK...got it..

Thanks very much for such great detail and help...

Ponder