Results 1 to 7 of 7

Thread: Featue Content Slider show / hide Next and Previous links

  1. #1
    Join Date
    May 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Featue Content Slider show / hide Next and Previous links

    1) Script Title:
    Featured Content Slider

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...tentslider.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 ?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    What do you mean by 'screen'?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Yes. There are a number of ways to do that, here's one (use this sort of thing instead of the usual onpage initialization):

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    May 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,
    Thanks for the help but I can't get that to work.

    here is my original code :
    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 :

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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    May 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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_d...&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/s...d.php?p=164911

    hope this helps some.
    Last edited by riprod; 10-26-2009 at 07:53 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •