Log in

View Full Version : Featured content glider 'slideshow' effect problem


transmute73
11-05-2009, 09:24 AM
1) Script Title: Featured content glider

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



<!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>
jscheuer1
11-05-2009, 12:33 PM
There could be other problems, but the glider script in the main Dynamic Drive library:

http://www.dynamicdrive.com/dynamicindex17/featuredcontentglider.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):


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

to:


<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.
transmute73
11-05-2009, 02:55 PM
Hi John,

Thank you very much! your suggestion worked :)

Kind regards

Paul
dpierri
03-12-2010, 08:42 PM
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.
jscheuer1
03-13-2010, 04:37 AM
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:


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


//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]
})