vinilios · December 7, 2009 21:17
diff --git a/jquery marquee gallery b/jquery marquee gallery
 (function($) {

 // marqGallery plugin $('ul_id').marqGallery({speed:2000})
 $.fn.marqGallery = function(params) {
 	
 	params = $.extend({speed:2000}, params);
 	 
 	// traverse all nodes
 	this.each(function() {
 		
 		var t = $(this);
 		var ul = $('ul',t)[0]
 		var elements = $('li',t);
 		var images = $('li img',t)
 		
 		var images_count = images.length 
 		var loaded_images = 0;
 		var images_loaded = false;
 		var images_sources = [];
 		
 		var margin = parseInt($(elements[0]).css('margin-right').replace('px','')) + parseInt($(elements[0]).css('margin-left').replace('px',''))
 		                      
 		$(images).each(function(i,img) {
 			src = $(img).attr('src');
 			if ($.inArray(src,images_sources) == -1)
 			{
 				images_sources[images_sources.length] = src
 			}
 		})
 		
 		images_count = images_sources.length
 		
 		function first_image_width()
 		{
 			return $($('li',$(ul))[0]).width()
 		}
 		
 		function first_image_wrapper()
 		{
 			return $('li',$(ul))[0]
 		}
 		
 		function animation_callback()
 		{
 			img = first_image_wrapper()
 			$(img).remove();
 			go_to = '-' + (first_image_width() + 40) + 'px';
 			$(ul).append(img);
 			$(ul).css('left','0px');
 			goNext()
 		}
 		
 		function init_gallery()
 		{
 			var ul_width = 0;
 			$(elements).each(function(index,img_wrapper)
 			{
 				ul_width = ul_width + $(img_wrapper).width() + margin;
 			});
 			
 			$(t).css('overflow','hidden');
 			$(ul).css('width',ul_width+"px");
 			$(ul).css('position','relative');
 			
 			goNext()
 			t[0].goNext = goNext
 		}
 		
 		function goNext()
 		{
 			go_to = '-' + (first_image_width() + margin) + 'px';
 			$(ul).animate({left:go_to},params.speed,"linear",animation_callback);
 		}
 		
 		function preload_images() {
 			loaded_images = loaded_images + 1;
 			if (loaded_images == images_count)
 			{
 				images_loaded = true;
 				init_gallery();
 			}
 		}
 		
 		$(images).each(function (index, image)
 		{
 			$(image).load(preload_images);
 		})
 	
 	});
 
 // allow jQuery chaining
 return this;
 };
 
 })(jQuery);


 /* EXAMPLE

 <!DOCTYPE html>
 <html dir="ltr" lang="en-US">
 <head>

 <link rel='stylesheet' href='styles.css' type='text/css' media='all' />

 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
 <script type='text/javascript' src='marqGallery.js'></script>

 <script type='text/javascript'>
 $(document).ready(function() {
 	$('#gallery').marqGallery({speed:5000})
 });
 </script>

 </head>
 <body>
 <div id="main">

 <div id="gallery">
 	<ul>
 	<li><img src="images/image1.jpg" /></li>
 	<li><img src="images/image2.jpg" /></li>
 	<li><img src="images/image3.jpg" /></li>
 	<li><img src="images/image1.jpg" /></li>
 	<li><img src="images/image2.jpg" /></li>
 	<li><img src="images/image3.jpg" /></li>
 	</ul>
 </div>

 </div>
 </body>

 */
	(function($) {

	// marqGallery plugin $('ul_id').marqGallery({speed:2000})
	$.fn.marqGallery = function(params) {

	params = $.extend({speed:2000}, params);

	// traverse all nodes
	this.each(function() {

	var t = $(this);
	var ul = $('ul',t)[0]
	var elements = $('li',t);
	var images = $('li img',t)

	var images_count = images.length
	var loaded_images = 0;
	var images_loaded = false;
	var images_sources = [];

	var margin = parseInt($(elements[0]).css('margin-right').replace('px','')) + parseInt($(elements[0]).css('margin-left').replace('px',''))

	$(images).each(function(i,img) {
	src = $(img).attr('src');
	if ($.inArray(src,images_sources) == -1)
	{
	images_sources[images_sources.length] = src
	}
	})

	images_count = images_sources.length

	function first_image_width()
	{
	return $($('li',$(ul))[0]).width()
	}

	function first_image_wrapper()
	{
	return $('li',$(ul))[0]
	}

	function animation_callback()
	{
	img = first_image_wrapper()
	$(img).remove();
	go_to = '-' + (first_image_width() + 40) + 'px';
	$(ul).append(img);
	$(ul).css('left','0px');
	goNext()
	}

	function init_gallery()
	{
	var ul_width = 0;
	$(elements).each(function(index,img_wrapper)
	{
	ul_width = ul_width + $(img_wrapper).width() + margin;
	});

	$(t).css('overflow','hidden');
	$(ul).css('width',ul_width+"px");
	$(ul).css('position','relative');

	goNext()
	t[0].goNext = goNext
	}

	function goNext()
	{
	go_to = '-' + (first_image_width() + margin) + 'px';
	$(ul).animate({left:go_to},params.speed,"linear",animation_callback);
	}

	function preload_images() {
	loaded_images = loaded_images + 1;
	if (loaded_images == images_count)
	{
	images_loaded = true;
	init_gallery();
	}
	}

	$(images).each(function (index, image)
	{
	$(image).load(preload_images);
	})

	});

	// allow jQuery chaining
	return this;
	};

	})(jQuery);


	/* EXAMPLE

	<!DOCTYPE html>
	<html dir="ltr" lang="en-US">
	<head>

	<link rel='stylesheet' href='styles.css' type='text/css' media='all' />

	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
	<script type='text/javascript' src='marqGallery.js'></script>

	<script type='text/javascript'>
	$(document).ready(function() {
	$('#gallery').marqGallery({speed:5000})
	});
	</script>

	</head>
	<body>
	<div id="main">

	<div id="gallery">
	<ul>
	<li><img src="images/image1.jpg" /></li>
	<li><img src="images/image2.jpg" /></li>
	<li><img src="images/image3.jpg" /></li>
	<li><img src="images/image1.jpg" /></li>
	<li><img src="images/image2.jpg" /></li>
	<li><img src="images/image3.jpg" /></li>
	</ul>
	</div>

	</div>
	</body>

	*/