PDA

View Full Version : Resolved Integrating Step Carousel with Featured Content Glider



Badgio
03-21-2010, 07:52 PM
1) Script Title: Step Carousel v1.8 and Featured Content Glider (Dec. 09)

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

Your help is much appreciated.

Badgio

ddadmin
03-22-2010, 08:16 AM
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
03-22-2010, 08:50 AM
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
03-23-2010, 12:07 AM
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
03-24-2010, 02:56 PM
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