Reconfigure Theme - Automatic Timing of Features-Block

st_louis — Tue, 03 Nov 2009 17:22:45 +0000

Hi All,

I'm using the reconfigure theme with my site. Upon load, I would like my features-block (the slideshow) to automatically move to the next product after x amount of seconds and continously loop through the products.

For example, the page would display product 1, wait 7 seconds, move to product 2, wait 7 seconds, move to product 3, wait 7 seconds ... etc and back to product 1, wait 7 seconds.

I'm certain there is some javascript to make this happen, I'm just not sure where or how?

Thanks in advance to all.

St Louis.

Ss commented

Ss — Wed, 04 Nov 2009 17:17:34 +0000

Hello St Louis

Thanks to Chris over at

http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/

He created a little snippet just for this.

If you edit index.liquid and add this little snippet, it should work.

<script type="text/javascript">
		jQuery(window).bind("load", function() {
			jQuery("div#slider1").codaSlider()
		});



var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;

theInterval = function(cur){
	clearInterval(theInt);

	if( typeof cur != 'undefined' )
		curclicked = cur;

	$crosslink.removeClass("active-thumb");
	$navthumb.eq(curclicked).parent().addClass("active-thumb");
		$(".stripNav ul li a").eq(curclicked).trigger('click');

	theInt = setInterval(function(){
		$crosslink.removeClass("active-thumb");
		$navthumb.eq(curclicked).parent().addClass("active-thumb");
		$(".stripNav ul li a").eq(curclicked).trigger('click');
		curclicked++;
		if( 10 == curclicked )
			curclicked = 0;

	}, 3000);
};



$(function(){

	$("#main-photo-slider").codaSlider();

	$navthumb = $(".nav-thumb");
	$crosslink = $(".cross-link");

	$navthumb
	.click(function() {
		var $this = $(this);
		theInterval($this.parent().attr('href').slice(1) - 1);
		return false;
	});

	theInterval();
});

</script>

Note that the number 10 curclicked needs to match the number of featured items you have

If a code guru chimes in, you'll be well on your way!

Cheers and good luck.

Where's your shop btw?

st_louis commented

st_louis — Wed, 04 Nov 2009 22:19:10 +0000

Works like a charm! Thanks a million to both Ss and Chris at css-tricks!

Kristin commented

Kristin — Wed, 04 Nov 2009 23:05:49 +0000

Hrmm... I would like to do the same... but does that replace anything, or do you simply put the snippet before the </script>? I don't want to delete or replace anything just yet, since I am not a CSS guru - would definitely appreciate the clarification though!

thanks!

Kristin commented

Kristin — Wed, 04 Nov 2009 23:13:17 +0000

Ah... ya know what. I just plopped the code in and it worked.

For everyone else - copy the whole code snippet from above and replace the basic index.liquid section that looks like this.

Silly me. I thought there was more to it... Thanks Ss