Advanced Search

Results 1 to 4 of 4

Thread: Featured Content Glider with pagination

  1. #1
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Featured Content Glider with pagination

    1) Script Title:
    Featured Content Glider
    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...tentglider.htm
    3) Describe problem:
    Hello,

    How to add a pagination (page number of the current page relative to all available pages) from Virtual Pagination script v2.1 shown on Demo:#4 (ie: 1/6) into Featured Content Glider.

    Thanks.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,708
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Edit the featuredcontentglider.js file here (add the highlighted):

    Code:
    			config.$next.attr('loadpage', config.nextslideindex+"pg") //store slide index to go to when "next" link is clicked on
    			config.$prev.attr('loadpage', config.prevslideindex+'pg')
    			var startpoint=(isprev=="previous")? -config.startpoint : config.startpoint
    			$target.css(config.leftortop, startpoint).css("zIndex", this.csszindex++) //hide content so it's just out of view before animating it
    			var endpoint=(config.leftortop=="left")? {left:0} : {top:0} //animate it into view
    			$target.animate(endpoint, config.speed)
    			config.$toc.removeClass('selected')
    			$selectedlink.addClass('selected')
    			config.$togglerdiv.attr('lastselected', selected+'pg')
    		}
    		if(config.onglide){
    			config.onglide.call(config, selected);
    		}
    	},
    
    	getremotecontent:function($, config){
    		config.$glider.html(this.ajaxloadingmsg)
    		$.ajax({
    			url: config.remotecontent,
    			error:function(ajaxrequest){
    Then add this to your on page init (don't miss the added comma for the previous config property, autorotateconfig), ex:

    Code:
    featuredcontentglider.init({
    	gliderid: "canadaprovinces", //ID of main glider container
    	contentclass: "glidecontent", //Shared CSS class name of each glider content
    	togglerid: "p-select", //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: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
    	autorotate: true, //Auto rotate contents (true/false)?
    	autorotateconfig: [5000, 2], //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
    	onglide: function(selected){
    		this.$togglerdiv.find('.slideOf').html([++selected] + '/' + this.$contentdivs.length);
    	}
    })
    Add a span or other element to your togglerid division, and give it a class of 'slideOf':

    Code:
    <div id="p-select" class="glidecontenttoggler">
    <a href="#" class="prev">Prev</a> 
    <a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a>
    <a href="#" class="next">Next</a><br><span class="slideOf"></span>
    </div>
    Finally, if you wish to style this, add something like so to your stylesheet:

    Code:
    .slideOf {
    	font-weight: bold;
    }
    - John
    ________________________

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

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    aless (12-29-2009)

  4. #3
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    John,

    thanks a lot.

    Ales

  5. #4
    Join Date
    Oct 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Works Great

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
  •