Help with Reel Slideshow

**gtokarsk** · 09-20-2010, 12:39 AM

1) Script Title: Reel Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lslideshow.htm

3) Describe problem:
Stops auto slideshow once I use the beck or forth links.
The only workaround I found is to use "persist: true", but i dislike this one as it often starts displaying not from the first picture...
The pauseonmouseover works fine, but only before I use back/forth link.

Any ideas anyone?

Only things I changed is obviously the array content (usually between 100-200 objects) and the time between pics (doubled).
The original demo script, I believe, acts the same way. At least in mozilla, opera and chrome, IE8. All on winXP. Server is solaris with apache, but I do not think it should matter. This is client side, not server side script (right?).

Maybe I am only assuming auto will continue?

Thx!

Greg T

**jscheuer1** · 09-20-2010, 01:26 AM

Originally Posted by gtokarsk

Maybe I am only assuming auto will continue?

Yes. We can create either:

a resume button
a function to automatically resume after x seconds once a navigation button has been clicked

Or both, but I'm thinking you probably only want one or the other.

**gtokarsk** · 09-20-2010, 01:43 AM

Oooooo! An auto resume after either the same delay as the standard slideshow, or another value, or say 2 to 4 times the slideshow delay, would be very cool!
The advantage of using same variable would be cool to me as I assume the .js file will change, but not my 400+ html files.
That would be a very cool addition.
While talking about addition, if somewhere the filename being displayed would show-up, that would allow people to know which file is currently displayed - but that one is just if you really want to add multiple improvements.
For me the 1st one would make this little script actually totally worth few bucks

GT

**jscheuer1** · 09-20-2010, 02:19 AM

I had already worked the below out while you were responding, I'll look into this filename business later.

There's no need to edit the script. And I see no need to use the existing pause variable, but it could be. One can just set the resume delay to an arbitrary amount. Since it would be best to have it longer than the pause value anyway, why not just make up your own?

Here's a demo using auto resume (addition highlighted):

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<style type="text/css">

#myreel{ /*sample CSS for demo*/
border:15px solid black;
}

.paginate{
width: 330px;
margin-top:5px;
font:bold 14px Arial;
text-align:center;
}

</style>

<script src="reelslideshow.js" type="text/javascript">

/***********************************************
* Continuous Reel Slideshow- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<script type="text/javascript">

var firstreel=new reelslideshow({
	wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
	dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://i26.tinypic.com/11l7ls0.jpg"], //["image_path", "optional_link", "optional_target"]
		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"],
		["http://i30.tinypic.com/531q3n.jpg"],
		["http://i31.tinypic.com/119w28m.jpg"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2000, cycles:0, pauseonmouseover:true},
	orientation: "h", //Valid values: "h" or "v"
	persist: true, //remember last viewed slide and recall within same session?
	slideduration: 300 //transition duration (milliseconds)
})
jQuery(function($){
	$('.paginate a').click(function(){
		setTimeout(function(){firstreel.rotate.call(firstreel);}, 5000);
	});
});
</script>
</head>
<body>
<div id="myreel"></div>

<div class="paginate">
= <a href="javascript:firstreel.navigate('back')" style="margin-right:200px;">back</a>  <a href="javascript:firstreel.navigate('forth')">forth</a> =
</div>
</body>
</html>

Notes: See the red 0 for cycles? This means that it will cycle continuously. Without that, even with this auto resume addition, it will stop at some point and be unable to start again.

If you want help adapting this to your Reel Slideshow:

Please post a link to the page on your site where you are trying this.

**gtokarsk** · 09-20-2010, 03:13 AM

Nice. U r fast

Thx.
So this needs to be added to the html page, not to the .js file, right?

I just added this to every set of images I got on my kid's photo page - here's a link to one set that I ma using for testing: http://gregt.larimer.org/a/slide.html. This way I can work out the changes and then I have a script that pushes it through all my other links... Would suck to have to do by hand

I will try to add your mods tomorrow from work (shhhh!

).

GT

GT

**jscheuer1** · 09-20-2010, 03:23 AM

You do need to set the cycles to 0 on the page if thay aren't already.

But the highlighted code can be added at the end of the reelslideshow.js file, provided all of the Reel Slideshows are declared as firstreel.

I see in your demo you have:

Code:

<a href="javascript:firstreel.navigate('back')" style="margin-right:200px;"><=back</a>  <a href="javascript:firstreel.navigate('forth')" style="margin-right:200px;">forth =></a>          <a href=.><<==back to thumbnails</a>
<div id="myreel"></div>

<div class="paginate">
</div>

It needs to be more like it is in the demo:

Code:

<div class="paginate"><a href="javascript:firstreel.navigate('back')" style="margin-right:200px;"><=back</a>  <a href="javascript:firstreel.navigate('forth')" style="margin-right:200px;">forth =></a>          <a href=.><<==back to thumbnails</a>
</div>
<div id="myreel"></div>

If that doesn't line up the way you want it to, you can change the styles.

I do have something worked out for the filename. But that will require each page to be edited because you need an element on each page to show the name.

**gtokarsk** · 09-20-2010, 03:38 AM

Added the code, no dice. What you mean about declaration? Meaning I have not changed the function name, or the "div"? No, it's exactly as it was on the demo page. I have that value at 0. Does not seem to auto-resume so far. But I tried opera only so far. Need to put kids to bed and cleanup for the night...

Thx John!

**jscheuer1** · 09-20-2010, 03:43 AM

See my previous message, I updated it.

The declaration is:

Code:

var firstreel=new reelslideshow({
	wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
	dimensions: [800, 600], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
['images/image001.jpg'],
['images/image002.jpg'],
['images/image003.jpg'],
['images/image004.jpg'],
['images/image0 . . .

To do this:

Originally Posted by jscheuer1

Code:

jQuery(function($){
	$('.paginate a').click(function(){
		setTimeout(function(){firstreel.rotate.call(firstreel);}, 5000);
	});
});

from the reelslideshow.js file, all pages that use it must declare as firstreel.

Oh, and it has to be (regardless of where you put it):

Code:

jQuery(function($){
	$('.paginate a').click(function(){
		clearTimeout(firstreel.resumetimer);
		firstreel.resumetimer = setTimeout(function(){clearTimeout(firstreel.rotatetimer); firstreel.rotate.call(firstreel);}, 5000);
	});
});

Otherwise repeated clicking of back or fourth will create multiple resumes, leading to an unstable display.

**gtokarsk** · 09-20-2010, 04:03 PM

Hi.
I think I got the "unstable display" after putting in these changes; although it does autoresume now...

I searched the .js file for firstreel and it does not have it, I think majority is reelslideshow.
The format of the back/forth/index did get screwed up as well.
The js file is at /.reel/reelslideshow.js
I wonder if I need to redownload.. maybe I goofed somewhere while changing things.

Update -
Got the style-sheet fixed, so I guess only the "stability" is the issue now, when say "forth" is pressed few times. And that probably has to do with that "firstreel" - I am looking at it more to understand your replies better (=

As for the image name, I figured based on the filename in the array already, no need for another entry in the array.

GT

**gtokarsk** · 09-20-2010, 04:18 PM

Got it! I think!
Seems to work fine now. I've tested both back and forth buttons. Adjusted the timing and have seen no issue yet.

Did I need to add anything to the .js file or not? I got a bit lost on that one and added the function you showed to both .js and the html... just in case (at the end of .js, so I figure if it's unnecessary I may never see an issue).

Anyhow, works well so far. I wish some paid support for things I support worked as well the support you provided

Thread: Help with Reel Slideshow

Thread Tools

Search Thread

Help with Reel Slideshow

Bookmarks

Bookmarks

Posting Permissions