Results 1 to 5 of 5

Thread: Featured content glider 'slideshow' effect problem

  1. #1
    Join Date
    Nov 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Featured content glider 'slideshow' effect problem

    1) Script Title: Featured content glider

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentglider.htm

    3) Describe problem: I've installed the script but I'm unable to find a way of creating the 'slideshow' effect where it cycles through the 'frames' untill the user clicks on one of the frames? Mine stops after the initial glide between frame image 1 and 2.

    I've replaced the standard js glider effect with a fade in version as found on this thread:
    http://www.dynamicdrive.com/forums/blog.php?b=7

    Please can someone tell me where I've gone wrong and I'm new at this.

    Here's the page code I've used, js and css are also being used as described :

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    
    <! ------- Content glider -------- >
    
    <link href="featuredcontentglider.css" rel="stylesheet" type="text/css" />
    <link href="cssbuttonstoggler.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="featuredcontentglider.css" />
    
    <script type="text/javascript" src="featuredcontentglider.js">
    
    /***********************************************
    * Featured Content Glider script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    
    </script>
    
    <! ----- content glider head stop -------->
    </head>
    
    <body>
    
    <! ----- Content glider table start ---------->
    <table width="595" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>
        <script type="text/javascript">
    
    featuredcontentglider.init({
    	gliderid: "onestream_banner", //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: "leftright", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
    	autorotate: true, //Auto rotate contents (true/false)?
    	autorotateconfig: [3000, 0] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
    })
    
    </script>
    
    <div id="onestream_banner" class="glidecontentwrapper">
    
    <div class="glidecontent">
    <img src="images/flashtest1.jpg" style="float: left; padding: 0px" />
    </div>
    
    <div class="glidecontent">
    <img src="images/flashtest2.jpg" style="float: right; padding: 0px"/>
    </div>
    
    <div class="glidecontent">
    <img src="images/flashtest3.jpg" style="float: left; padding: 0px"/>
    </div>
    </div>
    
    <div id="p-select" class="cssbuttonstoggler">
    <a href="#" class="toc"><span>1</span></a> <a href="#" class="toc"><span>2</span></a> <a href="#" class="toc"><span>3</span></a>
    <a href="#" class="prev"><span>Back</span></a> <a href="#" class="next"><span>Foward</span></a>
    </div>
    </td>
      </tr>
    </table>
    <! ----- Content glider table end ---------->
    </body>
    </html>
    Last edited by jscheuer1; 11-05-2009 at 12:31 PM. Reason: format code

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There could be other problems, but the glider script in the main Dynamic Drive library:

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

    was updated after the blog entry you are working from for the fade version.

    If you were starting with the script from the library, it may no longer be compatible with the fade version.

    One thing I noticed for the glider script in the main Dynamic Drive library:

    Updated to work in jQuery 1.3.x
    So you may need to change (on your page):

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    to:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
    But that's just a guess. If you want more help:

    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

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

    Default

    Hi John,

    Thank you very much! your suggestion worked

    Kind regards

    Paul

  4. #4
    Join Date
    Mar 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Rotation has stopped and don't know why.

    Hi,

    I did the same thing you suggested but I can't figure out why the rotation stopped working.
    http://stager.aaa.com/aaa/097/homepage/index2.html

    Thanks.
    David.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by dpierri View Post
    Hi,

    I did the same thing you suggested but I can't figure out why the rotation stopped working.
    http://stager.aaa.com/aaa/097/homepage/index2.html

    Thanks.
    David.
    You are mixing apples and oranges. The glider script and jQuery have both been updated since this thread started. So it would have been better to start a new thread for this question. But here we are. So, use this for your jQuery tie in:

    HTML Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    And use this version of the featuredcontentglider.js script:

    Code:
    //Featured Content Glider: By http://www.dynamicdrive.com
    //Created: Dec 22nd, 07'
    //Updated (Jan 29th, 08): Added four possible slide directions: "updown", "downup", "leftright", or "rightleft"
    //Updated (Feb 1st, 08): Changed glide behavior to reverse direction when previous button is clicked
    //Updated (Feb 12th, 08): Added ability to retrieve gliding contents from an external file using Ajax ("remotecontent" variable added to configuration)
    //Updated (July 21st, 09): Updated to work in jQuery 1.3.x
    //Updated (Dec 13th, 09): Added keyboard navigation, so left/ right arrow keys now move glider. Fixed bug with auto rotation when "next" link isn't defined.
    //Modified (March 12th, 10): for fade transition
    
    jQuery.noConflict()
    
    var featuredcontentglider={
    	leftrightkeys: [37, 39], //keycodes to move glider back and forth 1 slide, respectively. Enter [] to disable feature.
    	csszindex: 100,
    	ajaxloadingmsg: '<b>Fetching Content. Please wait...</b>',
    
    	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.css(endpoint).css({opacity:0}).animate({opacity:1}, config.speed, function(){jQuery(this.style).attr('filter', '');}) //custom code
    			config.$toc.removeClass('selected')
    			$selectedlink.addClass('selected')
    			config.$togglerdiv.attr('lastselected', selected+'pg')
    		}
    	},
    
    	getremotecontent:function($, config){
    		config.$glider.html(this.ajaxloadingmsg)
    		$.ajax({
    			url: config.remotecontent,
    			error:function(ajaxrequest){
    				config.$glider.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
    			},
    			success:function(content){
    				config.$glider.html(content)
    				featuredcontentglider.setuptoggler($, config)
    			}
    		})
    	},
    
    	aligncontents:function($, config){
    		config.$contentdivs=$("#"+config.gliderid+" ."+config.contentclass)
    		config.$contentdivs.css(config.leftortop, config.startpoint).css({height: config.$glider.height(), visibility: 'visible'}) //position content divs so they're out of view:
    	},
    
    	setuptoggler:function($, config){
    		this.aligncontents($, config)
    		config.$togglerdiv.hide()
    		config.$toc.each(function(index){
    				$(this).attr('pagenumber', index+'pg')
    				if (index > (config.$contentdivs.length-1))
    					$(this).css({display: 'none'}) //hide redundant "toc" links
    		})
    		var $nextandprev=$("#"+config.togglerid+" .next, #"+config.togglerid+" .prev")
    		$nextandprev.click(function(event){ //Assign click behavior to 'next' and 'prev' links
    			featuredcontentglider.glide(config, this.getAttribute('loadpage'), this.getAttribute('buttontype'))
    			event.preventDefault() //cancel default link action
    		})
    		config.$toc.click(function(event){ //Assign click behavior to 'toc' links
    			featuredcontentglider.glide(config, this.getAttribute('pagenumber'))
    			event.preventDefault()
    		})
    		config.$togglerdiv.fadeIn(1000, function(){
    			featuredcontentglider.glide(config, config.selected)
    			if (config.autorotate==true){ //auto rotate contents?
    				config.stepcount=0 //set steps taken
    				config.totalsteps=config.$contentdivs.length*config.autorotateconfig[1] //Total steps limit: num of contents x num of user specified cycles)
    				featuredcontentglider.autorotate(config)
    			}
    		})
    		config.$togglerdiv.click(function(){
    			featuredcontentglider.cancelautorotate(config.togglerid)
    		})
    		if (this.leftrightkeys.length==2){
    			$(document).bind('keydown', function(e){
    				featuredcontentglider.keyboardnav(config, e.keyCode)
    			})
    		}
    	},
    
    	autorotate:function(config){
    		var rotatespeed=config.speed+config.autorotateconfig[0]
    		window[config.togglerid+"timer"]=setInterval(function(){
    			if (config.totalsteps>0 && config.stepcount>=config.totalsteps){
    				clearInterval(window[config.togglerid+"timer"])
    			}
    			else{
    				featuredcontentglider.glide(config, config.nextslideindex, "next")
    				config.stepcount++
    			}
    		}, rotatespeed)
    	},
    
    	cancelautorotate:function(togglerid){
    		if (window[togglerid+"timer"])
    			clearInterval(window[togglerid+"timer"])
    	},
    
    	keyboardnav:function(config, keycode){
    		if (keycode==this.leftrightkeys[0])
    			featuredcontentglider.glide(config, config.prevslideindex, "previous")
    		else if (keycode==this.leftrightkeys[1])
    			featuredcontentglider.glide(config, config.nextslideindex, "next")
    		if (keycode==this.leftrightkeys[0] || keycode==this.leftrightkeys[1])
    			featuredcontentglider.cancelautorotate(config.togglerid)
    	},
    
    	getCookie:function(Name){ 
    		var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair
    		if (document.cookie.match(re)) //if cookie found
    			return document.cookie.match(re)[0].split("=")[1] //return its value
    		return null
    	},
    
    	setCookie:function(name, value){
    		document.cookie = name+"="+value
    	},
    
    	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)
    			$(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
    				
    			})
    		})
    	}
    }
    
    </script>
    
    </head>
    <!-- <body onload="javascript:runTQS6Survey(); doCookieTest();"> comment out to stop serving surveys-->
    <body>
    <!-- Begining of slider code -->
    <script type="text/javascript">
    
    featuredcontentglider.init({
    	gliderid: "homepageglider", //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]
    })
    Last edited by jscheuer1; 03-13-2010 at 05:58 AM. Reason: add fix for IE cleartype/filter bug
    - John
    ________________________

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

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
  •