Integrating Step Carousel with Featured Content Glider

[Badgio]

1) Script Title: Step Carousel v1.8 and Featured Content Glider (Dec. 09)

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

3) Describe problem:

The image based website I am trying to create requires a clickable thumbnail scroller used to change the main image located elsewhere on the page.

I have used the 'Step Carousel' script for the thumbnail scroller and wanted to use it's onpanelclick:function to toggle the featured content glider which is placed above it. The featured content glider will display a larger version of the selected image.

The scripts load and initialise fine, it's just a matter of tweaking the code.

Could someone point me in the right direction?
(Don't worry I know where the door is )

Your help is much appreciated.

Badgio

[ddadmin]

Do you have a URL to what you have so far, assuming you've already made some changes/ attempts to get the two scripts to work the way you want? If so what's the URL?

[Badgio]

Hi,

This is a link to a sample page http://www.make-up.lt/covers/

Basically, I will do away with the 'featured content glider' (FCG) pagination buttons with control being exercised through the 'step carousel' (CAR) by way of clicking a panel to trigger the FCG.

As I am not a coder, I don't really have a clue how to go about this, and haven't attempted any code changes.

Having said that, would changing

config.$toc.click(function(event)

in featuredcontentglider.js so that it looks for/uses the

onpanelclick()

event handler used by 'step carousel' be a solution?

Thanks.

[ddadmin]

Ok try this. Firstly for the configuration code for your FCG, modify it so the settings are stored inside a variable, for example:

var gliderconfig={
	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]
}

featuredcontentglider.init(gliderconfig)

Notice the arbitrary variable "gliderconfig" used here.

Secondly, inside each image within your carousel viewer, give it a "data-index" attribute that points to the index of the slide you want it to trigger when clicked on (starting from 0), for example:

<div class="panel">
<a href="#" class="toc"><img src="http://i30.tinypic.com/531q3n.jpg" data-index="0" /></a>
</div>

<div class="panel">
<a href="#" class="toc"><img src="http://i29.tinypic.com/xp3hns.jpg" data-index="1" /></a>
</div>
"
"

Then finally inside your Carousel's configuration code, use the onpanelclick() event handler like so to bind it all together:

stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:true, moveby:1, pause:3000},
	panelbehavior: {speed:500, wraparound:false, persist:true},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'], //content setting ['inline'] or ['ajax', 'path_to_external_file'],
	onpanelclick:function(target){
	 if (target.tagName=="IMG"){
			featuredcontentglider.cancelautorotate(gliderconfig.togglerid)
			featuredcontentglider.glide(gliderconfig, target.getAttribute('data-index'))
	 }
	}
})

[Badgio]

Great, that all worked, other than I missed a comma when pasting the onpanelclick:function code.

Many thanks, very much appreciated. This site is invaluable!

Now time to tackle your php examples for delivering dynamic content into Step Carousel.

Badgio