





<!-- 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=284" />
</div>

<!-- root element for scrollable -->
<div class="scrollable">	
	
	<!-- root element for the items -->
	<div class="items">
	
		<!-- 1-5 -->
		<img alt="RecyclePak-Lamp-Recycling-1" src="/resource.php?rid=284" /> 
		<img alt="RecyclePak-Lamp-Recycling-2" src="/resource.php?rid=286" /> 
		<img alt="RecyclePak-Lamp-Recycling-3" src="/resource.php?rid=288" /> 
		<img alt="RecyclePak-Lamp-Recycling-4" src="/resource.php?rid=292" /> 
		<img alt="RecyclePak-Lamp-Recycling-5" src="/resource.php?rid=290" /> 
		<!-- 5-10 -->
		<img alt="RecyclePak-Lamp-Recycling-6" src="/resource.php?rid=302" /> 
		<img alt="RecyclePak-Lamp-Recycling-7" src="/resource.php?rid=304" /> 
		<img alt="RecyclePak-Lamp-Recycling-8" src="/resource.php?rid=306" /> 
		<img alt="RecyclePak-Lamp-Recycling-9" src="/resource.php?rid=308" /> 
		<img alt="RecyclePak-Lamp-Recycling-10" src="/resource.php?rid=310" /> 
		<!-- 10-15 -->
		<img alt="RecyclePak-Lamp-Recycling-11" src="/resource.php?rid=312" /> 
		<img alt="RecyclePak-Lamp-Recycling-12" src="/resource.php?rid=314" /> 
		<img alt="RecyclePak-Lamp-Recycling-13" src="/resource.php?rid=316" /> 
		<img alt="RecyclePak-Lamp-Recycling-14" src="/resource.php?rid=318" /> 
		<img alt="RecyclePak-Lamp-Recycling-15" src="/resource.php?rid=320" />
		

	</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>
