Back button for Featured Content Slider

[Aleksandra]

1) Script Title: Featured Content Slider

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

3) Describe problem:
How do I insert "back" button at the front of the pagination numbers?
I want to be able to click on the "back" button and go "back"...
The same way as "next" works.
Thank you for this amazing website, codes and advice.
Aleksandra

[jscheuer1]

This requires a little addition of code to and quite a bit of math juggling in the contentslider.js file. So, rather than go through all the details one by one and hope that you can accurately reproduce my modifications (assuming I can remember them all and explain them clearly), I'll just attach a .zip file with the updated contentslider.js file in it.

Attachment 618

[tdblanchard]

i'm trying to use this as well.
the back button is a supeer-dooper help!~
would a "pause/play" button be as easy?
also. is there anyway to incorporate prototype effect.fade/appear in that bad-boy???
that would be truly awesome.
~tim

[jscheuer1]

i'm trying to use this as well.
the back button is a supeer-dooper help!~
would a "pause/play" button be as easy?
also. is there anyway to incorporate prototype effect.fade/appear in that bad-boy???
that would be truly awesome.
~tim

I'm not all that familiar with Prototype library if that's what you are referring to. The other part I've worked out. You need to update the contentslider.css here:

.pagination a, .pagination span {
padding: 0 5px;
text-decoration: none; 
color: #2e6ab1;
background-color: white;
cursor:pointer;
}

.pagination a:hover, .pagination a.selected, .pagination span.over {
color: #000;
background-color: #FEE496;
}

and use the updated contentslider.js from this archive:

Attachment 628

[ddadmin]

Very nice!

[tdblanchard]

U rule john!
now i'm gonna spend the morning changing that text into images...
Golly, you're a life saver!
Kudos
Kudos

[jscheuer1]

Very nice!

U rule john!
now i'm gonna spend the morning changing that text into images...
Golly, you're a life saver!
Kudos
Kudos

Thanks to both of you. I just looked over the code and I omitted one thing that probably should be present. When the stop/auto 'button' is generated, the timeout interval is 3000 regardless of what the original one was, if there was one. This can be rectified by replacing:

3000

with:

'+(slidernodes[sliderid].autorun? slidernodes[sliderid].autorun : 3000)+'

In this segment of the rather long line (by far the longest line in the script):

else {ContentSlider.autoturnpage(\''+sliderid+'\', 3000);this.innerHTML=\'Stop\'}

That way, if an interval was specified, it will be preserved, otherwise it will default to 3 seconds.

[tdblanchard]

i've been trying to make the button an image and keep battling with when to escape and when not to..

[jscheuer1]

i've been trying to make the button an image and keep battling with when to escape and when not to..

The script's code as originally written looks as though it used a bit more escaping than is required but, I may be wrong about that. Generally, when you have a string variable:

var blah='this string\'s got an escaped delimiter in it';

You only need to escape a quote or an apostrophe in the string value if it is used to delimit the string and is not meant to be a delimiter in the value. Because of this fact something like so is usually unnecessary:

var blah='Jeremy was referred to as \"The King\" quite often':

but will do no harm and, in certain situations it can be required, depending upon where and how blah gets used elsewhere in the code. However, as long as any character isn't meant to be a delimiter and isn't a reserved character like the \n for 'newline', it can be safely escaped with no bad consequences.

You cannot escape a delimiter if it is meant to be a delimiter, as in:

var blah_2='I heard that '+blah+', so I guess we can call him that';

[tdblanchard]

OMG.
i really just wanted to make a pause button appear when it's playing and a play button appear when it's paused...
this thing is soooooooooo close!

pcontent+='<span id="p'+sliderid+'" style="font-weight:bold;" onclick="if(this.innerHTML==\'Pause\'){clearTimeout(window.'+sliderid+'timer);this.innerHTML=\'Play\'}else {ContentSlider.autoturnpage(\''+sliderid+'\', 3000);this.innerHTML=\'Pause\'}"">'+(slidernodes[sliderid].autorun? 'Pause' : 'Auto')+'</span>'

i can't just replace "play" with

<img src=images/play.gif>

and "Pause" with

<img src=images/pause.gif>