PDA

View Full Version : Featue Content Slider show / hide Next and Previous links



riprod
10-23-2009, 05:15 PM
1) Script Title:
Featured Content Slider

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

3) Describe problem:
Is it possible to show the back / previous button, only on the 2nd screen. Also don't show the forward 'next' button on the last screen ?

jscheuer1
10-23-2009, 05:22 PM
What do you mean by 'screen'?

riprod
10-23-2009, 06:10 PM
In the slider, there are multiple 'screens' or 'panels', that slide in from right to left. When you click the "next" button, it shows the next 'screen'.

I only want to show the "last" button, when on the second panel. I don't want it to be there if there is no content before it.

Hopefully that clears it up. Thanks

jscheuer1
10-24-2009, 04:55 PM
Yes. There are a number of ways to do that, here's one (use this sort of thing instead of the usual onpage initialization):


<script type="text/javascript">
var myslider = {
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [false, 3000], //[true/false, pausetime]
enablepersist: false, //true/false - defaults to false
random: false, //true/false - defaults to false (requires autorotate be set to true with a pausetime)
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
this.nav.prev.style.visibility = curindex === 1? 'hidden' : '';
this.nav.next.style.visibility = curindex === this.contentdivs.length? 'hidden' : '';
}
};
featuredcontentslider.init(myslider);

(function(s){
var nav = {}, pdiv = document.getElementById('paginate-' + s.id).getElementsByTagName('a');
for(var i = 0; i < pdiv.length; ++i){
if(/prev/.test(pdiv[i].className))
nav.prev = pdiv[i];
else if(/next/.test(pdiv[i].className))
nav.next = pdiv[i];
}
s.nav = nav;
})(myslider);

</script>

riprod
10-26-2009, 02:47 PM
Hi John,
Thanks for the help but I can't get that to work.

here is my original code :

featuredcontentglider.init({
gliderid: "products", //ID of main glider container
contentclass: "glidecontent", //Shared CSS class name of each glider content
togglerids: ["p-select", "p-select2", "p-select3"], //ID of toggler container
remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
selected: 0, //Default selected content index (0=1st)
persiststate: false, //Remember last content shown within browser session (true/false)?
speed: 500, //Glide animation duration (in milliseconds)
direction: "rightleft", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
autorotate: false, //Auto rotate contents (true/false)?
autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})

Tried this :



var myslider = {
id: "products", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [false, 3000], //[true/false, pausetime]
enablepersist: false, //true/false - defaults to false
random: false, //true/false - defaults to false (requires autorotate be set to true with a pausetime)
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
this.nav.prev.style.visibility = curindex === 1? 'hidden' : '';
this.nav.next.style.visibility = curindex === this.contentdivs.length? 'hidden' : '';
}
};
featuredcontentslider.init(myslider);

(function(s){
var nav = {}, pdiv = document.getElementById('paginate-' + s.id).getElementsByTagName('a');
for(var i = 0; i < pdiv.length; ++i){
if(/prev/.test(pdiv[i].className))
nav.prev = pdiv[i];
else if(/next/.test(pdiv[i].className))
nav.next = pdiv[i];
}
s.nav = nav;
})(myslider);


No Dice.
Am I missing something ? Do I need to do something in the HTML too ?
Slider just doesn't work at all with this.

jscheuer1
10-26-2009, 03:05 PM
Your original code from your previous post indicates that you are not using the script linked to in your first post. You are using a glider, not a slider. And it doesn't even look quite like the current version of the glider, but may be.

After a fair amount work, it is discouraging for me to see that. The adaptation can be made to work with what you are using, but not exactly as written.

Let's prevent any further problems of this type by first having a link to your page, so I can see which script you are actually using and what version of it:

Please post a link to the page on your site that contains the problematic code so we can check it out.

riprod
10-26-2009, 05:13 PM
Whoa! You are correct. I didn't even know there were 2 different scripts.
I'm sorry for the confusion.

The page is
http://winston.mpadusa.com/product_detail.aspx?ColID=14927&TypeID=243&ProdID=105177

I did download the new Glider script and just tried adding it but cannot get anything to work at all then! From what I can tell, the new .js has "jQuery.noConflict()" added to the beginning.

I am also trying to get lightbox to work with it, with no joy.

EDIT

I've figured out where some of my conflicts are coming from.

I used the following script and advice, in order to add multiple 'p-select' options. So that I can have the "next" and "prev" in different places on the page.
http://www.dynamicdrive.com/forums/showthread.php?p=164911

hope this helps some.