Making a slideshow with different pages

[Aaron10]

I'm trying to make a set of pages that will act as a slideshow that will scroll to the bottom of a page, then change to another page (for example page1.html > page2.html > page3.html etc.)

Ultimately I want a page to have a 'Play Slideshow' link at the bottom, when clicked it'll take them to the top of the page, start scrolling down slowly, then when it hits the bottom change to the next page, and for that next page to remember whether or not the slideshow is playing (using a cookie?).

Currently, I'm using this:

Code Select Expand

<script>
setTimeout("window.location.replace('page2.html')" ,10000)
</script>

Which will change the current page to the next after 10 seconds, however its not what I want as it wont scroll but it kinda does what I want.

If you need more explanation please ask.

[EffinToast]

Easiest way to do it is jQuery.

Code Select Expand


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script  type="text/javascript">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script  type="text/javascript">
$(document).ready(function(){
//may need to play with these times
setTimeout('window.location = "demo1.php";', 5000);
$('html, body').animate({scrollTop: $('body').height()}, 10000);

/*
// The function should execute after being done with the 10 sec animation
// The animation seemed to take less time then stop and wait for the rest of the time.
/// Maybe youll have better luck.
$('html, body').animate({scrollTop: $('body').height()}, 10000, function(){
window.location = "demo1.php";
});
*/
});
</script>


That should give you a good start. I setup a quick demo. http://www.peerstudios.com/demo1.php

The demo is just a loop but add the code to each page and change accordingly.

Added some notes to the code aswell.

[Aaron10]

Yep thats exactly what I'm looking for cheers!

Just one thing, I add a Play/Stop button at the bottom but what javascript do I add to it? And will it remember the users play/pause session on the next page?

[EffinToast]

I would suggest downloading the jquery.cooke.js instead of hotlinking. (i just didnt feel like it)

js:

Code Select Expand


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/carhartl/jquery-cookie/raw/master/jquery.cookie.js"></script>
<script type="text/javascript">
//next page for the slide
var next_page = 'demo1.php';

//next page
function next(){
if($.cookie("slide_status") == "true"){
window.location = next_page;
}
}

//see if slide show is running
function check_slide(){
if($.cookie("slide_status")){
setTimeout('next();', 8000);
$('html, body').animate({scrollTop: $('body').height()}, 10000);
}
}

function toggle_slide(){
        //simple toggle script
if($.cookie("slide_status") == "true"){
$.cookie("slide_status", null);
}else{
$.cookie("slide_status", "true");
//just go to next page (no point in redoing the current page)
                next();
}
}

$(document).ready(function(){
//start it all if on last slide comment out check_slide() and uncomment toggle_slide()
check_slide();
//toggle_slide();
});
</script>


button:

Code Select Expand


<a href="javascript:toggle_slide();">toggle</a>


Hope that helps.

[Aaron10]

Its not working but I'm testing it offline does that make a difference? Its just staying on the same page even after clicking toggle

[EffinToast]

Are you hotlinking the jquery.cookie.js? If so maybe try downloading it.


http://www.peerstudios.com/demo1.php - Working demo


Did you change the next page var aswell?


edit: Not working offline for me either.

[Aaron10]

This is a code which does what I want but I cant implement it into my pages.

Code Select Expand

<script type="text/javascript">
// Slide show script

// load query string vars
var qs = window.location.search.substring(1);
var qsa = new Array();
var pairs = qs.split("&");
for (var i=0; i < pairs.length; i++) {
var pair = pairs[i].split("=");
qsa[pair[0]] = pair[1];
}

qsa.handle='---';
qsa.total=104;
qsa.limit = 40;

// window values
var winY, bodyY, scrY;


// keypress event
document.onkeydown =  keyPress;

// stop event
document.onstop = onStop;

// pause
var pause = false;

// autoscroll timer
var AStimer;

// delay in milliseconds
var delay = 6000;

// base URL
var baseURL = "---?slide=true&handle="+ qsa.handle +"&total="+ qsa.total +"&from_page="+ qsa.from_page +"&limit="+ qsa.limit+"&size=large";

// return URL
function buildURL (adv, ss)
{
var num;
if (adv) {
num = Number(qsa.number) + 1;
} else {
num = Number(qsa.number);
}
return baseURL +"&number="+ num + ((ss) ? '&slideshow=1' : '');
}

// set a cookie
function setCookie(name, value, expires, path, domain, secure)
{
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
document.cookie = curCookie;
}

// get a cookie
function getCookie(c_name)
{
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start!=-1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return null;
}

// key controller
function keyPress(e)
{
e = (!e) ? window.event : e ;
var keycode = e.keyCode;
if (keycode == 13) {
slideshow_pause();
}
}

// stop controller (IE only)
function onStop()
{
slideshow_pause();
}

function slideshow_vals()
{
// determine window width/height
if (self.innerHeight) {
// all except Explorer
winY = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight) {
// Explorer 6 Strict Mode
winY = document.documentElement.clientHeight;
}
else if (document.body) {
// other Explorers
winY = document.body.clientHeight;
}

// determine body height/width
if (document.body.scrollHeight > document.body.offsetHeight) {
// all but Explorer Mac
bodyY = document.body.scrollHeight;
} else {
// Explorer Mac and also Explorer 6 Strict, Mozilla and Safari
bodyY = document.body.offsetHeight;
}

// determine pixels scrolled
if (self.pageYOffset) {
// all except Explorer
scrY = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
// Explorer 6 Strict
scrY = document.documentElement.scrollTop;
} else if (document.body) {
// all other Explorers
scrY = document.body.scrollTop;
}
}

// pause it
function slideshow_pause()
{
if (qsa.slideshow > 0) {

pause = (pause == true) ? false : true;

clearTimeout(AStimer);

if (document.all) {
document.all('ss_1').innerHTML = (pause == true) ? 'Paused' : 'Running';
document.all('ss_2').innerHTML = (pause == true) ? 'Resume' : 'Pause';
}
else if (document.getElementById) {
document.getElementById('ss_1').innerHTML = (pause == true) ? 'Paused' : 'Running';
document.getElementById('ss_2').innerHTML = (pause == true) ? 'Resume' : 'Pause';
}

if (pause == false) {
slideshow_scroll();
}

}

}

// function to go to next page
function slideshow_next()
{
newURL = buildURL(true, true);
if (Number(qsa.number) < Number(qsa.total)) {
setTimeout("window.location = newURL", delay * .2);
}
}

// function to autoscroll the page
function slideshow_scroll()
{
slideshow_vals();

if (winY + scrY < bodyY - 50) {
var jump;
if (delay <= 4000) {
jump = 3;
} else if (delay > 4000 && delay <= 7500) {
jump = 2;
} else {
jump = 1;
}
window.scrollBy(0,jump);
var sdelay = delay / (bodyY - winY - 50);
AStimer = setTimeout('slideshow_scroll()', sdelay * jump);
} else if (pause == false) {
slideshow_next();
}

}

// slideshow toggler
function slideshow_toggle()
{
var toggle = ((Number(qsa.slideshow) > 0) ? false : true)
window.location = buildURL(false, toggle);
}

// custom user slideshow delay (in milliseconds)
function slideshow_delay (millis)
{
var userdelay = Number(getCookie('slideshow_delay'));

if (millis > 0) {
delay = millis;
} else if (userdelay > 0) {
delay = userdelay;
document.getElementById("speed").value = delay;
}

setCookie('slideshow_delay', delay);

}

// function to auto start slide show onload
function slideshow()
{
if (qsa.slideshow > 0) {
slideshow_delay(0);
setTimeout("slideshow_scroll()", delay * .2);
}
}

</script>

The

Code Select Expand

qsa.handle='---';

and

Code Select Expand

var baseURL = "---?slide=true&handle="

are the URLs I've tried to change but doesnt work.

This code has it so that when you press "toggle", it'll shoot to the top of the current page, start scrolling down then onto the next etc. but it also stops the slideshow whenever you press enter or click a link that takes you to the next slide which is how I want it. The cookie that remembers whether or not you were playing the slide expires when you close the browser too. Any way I can get this working?

[Aaron10]

bump