pulse.loadItem thumbstrip

pulse_loadItem_thumbstrip

<div id="pulse_strip">
  <!-- Ideally you will want to use a loop here to create the ID's so they are dynamic and not hardcoded -->
  <a href="" data-id="1"><span>1</span></a>
	<a href="" data-id="2"><span>2</span></a>
	<a href="" data-id="3"><span>3</span></a>
</div>

<p>
	<koken:pulse jsvar="pulse" autostart="false" fallbacktext="No featured content found. Please assign some in the Library." />
</p>

<style>
	#pulse_strip a { display: block; float: left; padding: 40px; background: #000; text-decoration: none; position: relative; font-family: Tahoma; overflow: hidden; border-right: 1px solid #fff; }
	#pulse_strip a span { display: block; font-size: 120px; position: absolute; top: -55px; left: -10px; color: #eee; }
	#pulse_strip a:hover { background: #eee; }
	#pulse_strip a:hover span { color:#000; }
</style>

<script>
$(function() {
	$(document).on('click', '#pulse_strip a', function() {
		pulse.loadItem($(this).data('id'));
		return false;
	});
});
</script>