PDA

View Full Version : Back button for Featured Content Slider



Aleksandra
10-30-2006, 04:05 PM
1) Script Title: Featured Content Slider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.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
10-31-2006, 05:47 AM
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.

618

tdblanchard
11-01-2006, 09:20 PM
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
11-02-2006, 08:46 AM
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:

628

ddadmin
11-02-2006, 10:35 AM
Very nice!

tdblanchard
11-02-2006, 02:31 PM
U rule john!
now i'm gonna spend the morning changing that text into images...
Golly, you're a life saver!
Kudos
Kudos

jscheuer1
11-02-2006, 06:11 PM
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
11-03-2006, 02:00 PM
i've been trying to make the button an image and keep battling with when to escape and when not to..

jscheuer1
11-03-2006, 06:19 PM
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
11-06-2006, 09:08 PM
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>

jscheuer1
11-06-2006, 10:19 PM
You could if you did it everywhere. However, making the span an image and swapping out the source is more efficient:


var pcontent='<img id="p'+sliderid+'" src="'+(slidernodes[sliderid].autorun? 'pause.gif' : 'play.gif')+'" onclick="if(this.src.indexOf(\'pause.gif\')>-1){clearTimeout(window.'+sliderid+'timer);this.src=\'play.gif\'}else {ContentSlider.autoturnpage(\''+sliderid+'\', '+(slidernodes[sliderid].autorun? slidernodes[sliderid].autorun : 3000)+');this.src=\'pause.gif\'}"> '

You will also need to change this line, a little farther down:


document.getElementById('p'+sliderid).innerHTML='Auto';

to:


document.getElementById('p'+sliderid).src='play.gif';

It would be a good idea to preload the pause and play images.

tdblanchard
11-08-2006, 02:29 PM
john
U RULE!!!!!!!
this is now absolutely perfecto!
~tim

meetmandeep
11-08-2006, 07:55 PM
Tim,
could you please share the final code with play/pause buttons (gifs too) :) Thanks

ronildo
04-27-2007, 02:25 AM
Hi friends, I use the Joomla (http://www.joomla.org) (cms).
And I use too a module (http://extensions.joomla.org/component/option,com_mtree/task,viewlink/link_id,1859/Itemid,35/) that use this script (Featured Content Slider). This is a demo (http://www.gavick.com/demo/index.php?option=com_content&task=view&id=2&Itemid=1).

But I want put in my Module a back button, is possible??
I want only the back button, no play and pause... ok??

The .zip atached is the .js used in the joomla.

*Sorry my English I'm Brazilian and I'm learning english. :o

Thanks...

roadsider
07-11-2007, 09:06 PM
This is great, but now the page won't display the graphic button I created to replace the "Next" text. All I did was install the new contentslider.js file. How do I fix that and install the graphic button for the "back" button?

Thanks!

roadsider
07-12-2007, 01:00 PM
U rule john!
now i'm gonna spend the morning changing that text into images...
Golly, you're a life saver!
Kudos
Kudos
Can anyone tell me how to replace the "back" and the "next" with graphic images. I've updated my site with a new contentslider.js, but the graphic buttons I made no longer appear!

sol07
07-31-2007, 10:40 AM
Yes, I would really like to do this too. jscheuer1's posts above do explain how to do it. I tried to incorporate his instructions, however, my script then doesn't work! (probably because the instructions are specific to tdblanchard's script).

In short, it appears that there is no solution to this, yet posted. Perhaps if we wish hard enough, jscheuer1 will show us again?

Over to you jscheuer1 !

PS: Completely different, but if you would like to know how to call external data for the script, I CAN tell you how to do this, courtesy of ddadmin (but beware, it's a different Jscript):

http://www.dynamicdrive.com/forums/showthread.php?t=22959


Cheers
Sol

bd0
09-04-2007, 12:51 AM
hello, :confused:

i like to use contentslider too. the updated version with back-button an play pause ist perfect for me! but the functionality of using

var linktext=["horses", "scenery", "ocean", "sushi"]
var nexttext="Forward"
ContentSlider("slider1", 5000, linktext, nexttext) //Auto rotate slider with custom pagination and "Next" links text

seems not to work in the updated versions. i need the ability of using the linktext-array. how can i use this function in the newer versions. i would be sad if i had to use the original version without backbutton. backbutton is the most important feature for me. auto/play would be nice!
can anyone give me some help with it?

thanks in advance!

mjjanusa2
01-12-2008, 07:26 PM
I have a question similar to the previous poster, Is there a way to use the fade effect with the play pause button? I have looked through the script and it seems to have been removed, but I don't know enough to fix it myself. Anyone have some hints?
Thanks

amyschiff
04-29-2008, 08:16 PM
It has been a while since there was activity on this thread but I thought it might be helpful to someone. I compared the script posted on DD to the one in this thread and got the fade working again.

I also re-included the scripting needed for the custom linktext array.

This version uses images for the play, pause, next, and back buttons. There already has been discussion of how to implement the play/pause. I included the next button image by replacing:


pcontent+='<a href="#" style="font-weight: bold;" onClick=\"ContentSlider.turnpage(\''+sliderid+'\', parseInt(this.getAttribute(\'rel\'))); return false\">Next</a>'

with


pcontent+='<a href="#" style="font-weight: bold;" onClick=\"ContentSlider.turnpage(\''+sliderid+'\', parseInt(this.getAttribute(\'rel\'))); return false\"><img src="next.gif" alt="Next" /></a>'

Pretty much same would go for the Back button.

This script is awesome and this thread has really been a lifesaver, thanks to everyone!

Ehren
04-30-2008, 06:24 PM
This is awesome! Just wondering how to set it so that it auto plays when it loads, versus having to hit the play button to make it work. I'd like to reverse it. Have it auto play and have the pause option.

Thanks!

ddadmin
05-01-2008, 02:14 AM
Well, the stock version of the script already supports auto play when the page loads, by populating the 2nd variable with an integer:


ContentSlider("slider1", 5000, linktext, nexttext)

I gather you're referring to one of the modified versions discussed in this thread?

Ehren
05-01-2008, 01:41 PM
Correct. The last version supported an auto/stop feature, but you had to click the Auto button to trigger the slide show. I'd like the slideshow auto play when it loads, but still be able to stop it.

So basically just the opposite of how it's currently set up.

Thanks!

ddadmin
05-01-2008, 06:48 PM
Sure. However, since a new version of Featured Content Slider is coming up in the next couple of days, I'd prefer to work on any custom requests on that version from now on. Stay tuned for the new version first and then ask how you wish it to be different.

Ehren
05-01-2008, 07:15 PM
Great! Looking forward to the new version.

lenaju
05-08-2008, 02:51 PM
Hi

Can anybody help? I do not be managing to enable the option of fade-in. When active var enabletransition=1 does not exhibit the news. What should do?

ddadmin
05-09-2008, 09:20 AM
Hi

Can anybody help? I do not be managing to enable the option of fade-in. When active var enabletransition=1 does not exhibit the news. What should do?

Lenaju, in the future, please start a new thread when asking your own question. Regarding the above, please elaborate. Are you saying enabling the fade transition breaks the script for you? If so,
please post a link to the page on your site that contains the problematic script so we can check it out.

lenaju
05-09-2008, 11:56 AM
Apologies by mistake.

My project this outside the line, I use Joomla with the module mod_gk_fcs, I filed load posted on the page 2, but do not manage to do work the transition effect.

It would like a suggestion about this.

Thanks!

lenaju
05-12-2008, 11:29 AM
This is js that I am using