vinilios/jquery marquee gallery

## 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>

	*/