PDA

View Full Version : 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/dynamicindex14/reelslideshow.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
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):


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


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


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


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:



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


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

jscheuer1
09-21-2010, 01:01 AM
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).

The way that works is it's an either or. Having it both places might cause problems in some browsers.

The advantage of having it in the script is that, for multiple pages using the same script, you don't need to put it on each page.

But, as I said and show at the top of post #8 in this thread, all Reel Slideshows that use the script must be declared with the firstreel variable in order to take advantage of the resume code.

gtokarsk
09-21-2010, 02:05 AM
Well, it works as is, with it in 2 places. And it has proven that regenerating the slide.html for +500 directories is really not a problem, as for a change in shell scripting I know what I am doing.. while in Java I do not :) So overall either way works just fine. I may try to remove it from the .js see what happens. I think eventually I may understand what needs to be declared where ;) But for now it's working so there. I can thank you for your help ;)
Thank you.

I think if I ever get time and look at more scripts from this page I may actually get some idea on how to code in java ;) After all I did know C and Pascal years ago... I broke my teeth on C++ and objects, so that may be a bit of a challenge ;)

GT

mrkapoor
09-21-2010, 06:42 AM
Hi I am using this script, In Mozilla Firefox it is working fine but in IE its showing few errors.

my site url is

www.abcholidayz.com
Please try opening in IE6 or 7 you will find the error on page

Like
"0 is null or not an object"

Line 23 char 3
URLwww.abcholidayz.com/reelslideshow.js


Thank You

jscheuer1
09-21-2010, 09:38 AM
Remove the extra comma:


<script type="text/javascript">

var firstreel=new reelslideshow({
wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
dimensions: [860, 320], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["01.jpg"], //["image_path", "optional_link", "optional_target"]
["02.jpg"],
["03.jpg"],
["04.jpg"],
["05.jpg"],
["06.jpg"],
["07.jpg"],
["08.jpg"],
["09.jpg"],
["10.jpg"],
["11.jpg"],
["12.jpg"],
["13.jpg"],
["14.jpg"],
["15.jpg"],
],
displaymode: {type:'auto', pause:2000, cycles:2, 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)
})

</script>

whoamare
01-21-2011, 04:06 PM
Can this Slideshow be run as vertical rather than horizontal? Help. Thanks!

jscheuer1
01-21-2011, 05:34 PM
Can this Slideshow be run as vertical rather than horizontal? Help. Thanks!

In the future, please start a new thread for a new question.

Yes, see the demo page:

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

Look at the second demo on the page.