Results 1 to 3 of 3

Thread: Featured Content Glider - Can it be set up to start with content loaded

  1. #1
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Featured Content Glider - Can it be set up to start with content loaded

    1) Featured Content Glider

    2) http://www.dynamicdrive.com/dynamici...tentglider.htm

    3) Is there a way to ave the glider start with the first piece of content loaded and then start gliding in the rest

    I want the initial content to include images & text (as per the other divs that glide in), I've managed to have a background image in place, but I would like more than that.

    Thanks
    Alex

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,799
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    modify (in red)

    Code:
    	glide:function(config, showpage, isprev){
    		var selected=parseInt(showpage)
    		if (selected>=config.$contentdivs.length){ //if no content exists at this index position
    			alert("No content exists at page "+(selected+1)+"! Loading 1st page instead.")
    			selected=0
    		}
    		var $target=config.$contentdivs.eq(selected)
    		//Test for toggler not being initialized yet, or user clicks on the currently selected page):
    		if (config.$togglerdiv.attr('lastselected')==null || parseInt(config.$togglerdiv.attr('lastselected'))!=selected){
    			var $selectedlink=config.$toc.eq(selected)
    			config.nextslideindex=(selected<config.$contentdivs.length-1)? selected+1 : 0
    			config.prevslideindex=(selected==0)? config.$contentdivs.length-1 : selected-1
    			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.showfirst==false?config.speed:1)
                config.showfirst=false;
    			config.$toc.removeClass('selected')
    			$selectedlink.addClass('selected')
    			config.$togglerdiv.attr('lastselected', selected+'pg')
    		}
    	},

    Code:
    	init:function(config){
    		jQuery(document).ready(function($){
    			config.$glider=$("#"+config.gliderid)
    			config.$togglerdiv=$("#"+config.togglerid)
    			config.$toc=config.$togglerdiv.find('.toc')
    			config.$next=config.$togglerdiv.find('.next')
    			config.$prev=config.$togglerdiv.find('.prev')
    			config.$prev.attr('buttontype', 'previous')
    			var selected=(config.persiststate)? featuredcontentglider.getCookie(config.gliderid) : config.selected
    			config.selected=(isNaN(parseInt(selected))) ? config.selected : selected //test for cookie value containing null (1st page load) or "undefined" string
    			config.leftortop=(/up/i.test(config.direction))? "top" : "left" //set which CSS property to manipulate based on "direction"
    			config.heightorwidth=(/up/i.test(config.direction))? config.$glider.height() : config.$glider.width() //Get glider height or width based on "direction"
    			config.startpoint=(/^(left|up)/i.test(config.direction))? -config.heightorwidth : config.heightorwidth //set initial position of contents based on "direction"
    			if (typeof config.remotecontent!="undefined" && config.remotecontent.length>0)
    				featuredcontentglider.getremotecontent($, config)
    			else
    				featuredcontentglider.setuptoggler($, config);
                if (config.showfirst){
     	        	 var fst=$("#"+config.gliderid+" ."+config.contentclass)[0];
                     fst.style.left='0px';
                     fst.style.top='0px';
    			}
                else {
                 config.showfirst=false;
                }
                $(window).bind('unload', function(){ //clean up and persist
    				config.$togglerdiv.unbind('click')
    				config.$toc.unbind('click')
    				config.$next.unbind('click')
    				config.$prev.unbind('click')
    				if (config.persiststate)
    					featuredcontentglider.setCookie(config.gliderid, config.$togglerdiv.attr('lastselected'))
    				config=null
    
    			})
    		})
    	}
    }

    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: [3000, 2], //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
        showfirst:true
    })
    Code:
    <div class="glidecontent" style="visibility:visible;">
    <img src="http://i11.tinypic.com/8efzmmf.jpg" style="float: left; padding: 5px" />
    British Columbia is the westernmost of Canada's provinces and is famed for its natural beauty. It's capital is Victoria, located at the southeastern tip of Vancouver Island. BC's most populous city is Vancouver, located in southwest corner of the BC mainland called the Lower Mainland.
    </div>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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

    AlexPetrie (02-07-2012)

  4. #3
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    WOW, thanks for the swift response, just what I needed!!

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
  •