





<!-- wrapper element for the large image -->
<div id="image_wrap">

	<!-- Initially the image is a simple 1x1 pixel transparent GIF -->
	<img width="660" height="441" alt="" src="/resource.php?rid=3343" />
</div>

<!-- root element for scrollable -->
<div class="scrollable">	
	
	<!-- root element for the items -->
	<div class="items">
	<!-- 1-5 -->
	<img alt="CFL-Recycling-At-Home-1" src="/resource.php?rid=3343" />
	<img alt="CFL-Recycling-At-Home-2" src="/resource.php?rid=3344" />
	<img alt="CFL-Recycling-At-Home-3" src="/resource.php?rid=3345" />
	<img alt="CFL-Recycling-At-Home-4" src="/resource.php?rid=3346" />
	<img alt="CFL-Recycling-At-Home-5" src="/resource.php?rid=3347" />
	<!-- 6-10 -->
	<img alt="CFL-Recycling-At-Home-6" src="/resource.php?rid=3348" />

	
	</div>
	
</div>
<!-- javascript coding -->


<script>
// execute your scripts when the DOM is ready. this is a good habit
$(function() {

	// initialize scrollable
	$("div.scrollable").scrollable();

});
</script>




<script>
$(function() {

	$(".items img").click(function() {

		// calclulate large image's URL based on the thumbnail URL (flickr specific)
		var url = $(this).attr("src").replace("_t", "");

		// get handle to element that wraps the image and make it semitransparent
		var wrap = $("#image_wrap").fadeTo("medium", 0.5);

		// the large image from flickr
		var img = new Image();

		// call this function after it's loaded
		img.onload = function() {

			// make wrapper fully visible
			wrap.fadeTo("fast", 1);

			// change the image
			wrap.find("img").attr("src", url);

		};

		// begin loading the image from flickr
		img.src = url;

	// when page loads simulate a "click" on the first image
	});
});
</script>
