Step Carousel with jquery cycle script

[Badgio]

1) Script Title: Step Carousel v1.8

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

3) Describe problem:

After ddadmin's sterling efforts to help resolve my earlier thread here http://www.dynamicdrive.com/forums/s...ad.php?t=53399 my client/girlfriend has now requested a fade transition instead of a glide!

I had a dig around the scripts here and really liked the Ultimate Fade-in Slide Show for its fade effect but decided not to use it in conjunction with the Step Carousel (I was concerned about its use of an image array as opposed to a div) and instead went for the JQuery cycle script.

I'm having problems combining the two, 'Cycle' works fine on it own see here http://www.make-up.lt/cycle but when I add it to my existing template there is a javascript error when executing. http://www.make-up.lt/covers

If somebody could check the code I would be most grateful.

Many thanks,

Badgio

[jscheuer1]

Remove this:

jQuery.noConflict()

from near the beginning of the stepcarousel.js file.

[Badgio]

Great that works!

On another matter, as per the earlier thread that I linked above, ddadmin suggested this addition to the 'step carousel' setup code that would trigger the 'glider' transition.

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('idx'))
	 }
	}
})

Now that I am using 'cycle' instead, I guess I just need to replace this with a call to the appropriate 'cycle' function?

Cheers!

[jscheuer1]

Yes. Give it a shot.

[Badgio]

OK I've had a go, but I am a bit stuck.

First off, I declared the 'cycle' function.

<script type="text/javascript">
function imagechange() {
	$('#test').cycle({
		fx:  'fade',
		timeout: 0,        
		speed:  200
	});
}

imagechange();
</script>

The example code given to manually trigger the 'cycle' is as follows, although this is tied to a button. This being the img index value

$('#button1').click(function() { 
    $('#test').cycle(0); 
    return false; 
});

What I cant workout is how to bind this 'trigger' function to the onpanelclick:function of the 'Step Carousel' and pass the 'idx' variable from ddadmin's earlier example?

Any help would be greatly appreciated.

Badgio

[jscheuer1]

I'd try something straightforward like:

	onpanelclick:function(target){
	 if (target.tagName=="IMG"){
			$('#test').cycle(target.getAttribute('idx'));
	 }
	}

Give that a shot. If there are problems try:

	onpanelclick:function(target){
	 if (target.tagName=="IMG"){
			$('#test').cycle(target.getAttribute('idx') - 0);
	 }
	}

Still problems? Post a link to the page.

[Badgio]

No joy...

I have republished the page here http://www.make-up.lt/covers

I had a look in firebug to see if there were any obvious errors, and the only thing that got returned was this [cycle] terminating; zero elements found by selector (DOM not ready)

[jscheuer1]

I'm not getting that or any error. Looking at the cycle script, I don't think it can do that.

You might want to look at:

http://home.comcast.net/~jscheuer1/side/vfs/jsjq_2.htm

I think it can be adapted to do what you want. But I'll have to get back to you on how.

[Badgio]

Thanks for the time you spent looking into this.

I checked out your slideshow and yes, if adapted that would work.

The truth is...I'm just after any fade transition that can be called/bound to the carousel onpanelclick:function.

[jscheuer1]

I've got a mock up:

http://home.comcast.net/~jscheuer1/s...carousel_h.htm

If you need help implementing it, let me know. Please download and use your own copy of:

http://home.comcast.net/~jscheuer1/s...lideshow_2b.js

Once you do that, you can get rid of:

<base href="http://www.make-up.lt/covers/" />

Also, notice that I've removed all traces of the cycle script, and all that was added before for this that's no longer needed (like idx), and rearranged things a bit to make them more valid (your page had two heads!). The onpanelclick is no longer required, the jsjqslideshow_2b script uses classes to define its own controls and these are now in the carousel's panels. Use your browser's 'view source' to get the code from the page. Quite a bit a tweaking can be done if desired/required (much through css alone), though of course not every possible thing that can be imagined can be done.