Image Preloading

[Bricktop]

Hello all,

 

Not sure if any of you have ever used a jQuery gallery system named Galleria before, but it's a great script.  It loads a series of thumbnails and once the page has loaded, begins to extract the full size image that the thumbnail references and loads it in the background, this means when you click on a thumbnail the image appears instantly.  This is great, but for one of my sites I need to stop this preloading feature due to bandwidth issues - I'm a total newbie to Javascript/JQuery etc etc but *think* I have narrowed it down to this code:

$$ = $.fn.galleria = function($options) {

// check for basic CSS support
if (!$$.hasCSS()) { return false; }

// init the modified history object
$.historyInit($$.onPageLoad);

// set default options
var $defaults = {
	insert      : '.galleria_container',
	history     : true,
	clickNext   : true,
	onImage     : function(image,caption,thumb) {},
	onThumb     : function(thumb) {}
};


// extend the options
var $opts = $.extend($defaults, $options);

// bring the options to the galleria object
for (var i in $opts) {
	$.galleria[i]  = $opts[i];
}

// if no insert selector, create a new division and insert it before the ul
var _insert = ( $($opts.insert).is($opts.insert) ) ? 
	$($opts.insert) : 
	jQuery(document.createElement('div')).insertBefore(this);

// create a wrapping div for the image
var _div = $(document.createElement('div')).addClass('galleria_wrapper');

// create a caption span
var _span = $(document.createElement('span')).addClass('caption');

// inject the wrapper in in the insert selector
_insert.addClass('galleria_container').append(_div).append(_span);

//-------------

return this.each(function(){

	// add the Galleria class
	$(this).addClass('galleria');

	// loop through list
	$(this).children('li').each(function(i) {

		// bring the scope
		var _container = $(this);
		                
		// build element specific options
		var _o = $.meta ? $.extend({}, $opts, _container.data()) : $opts;

		// remove the clickNext if image is only child
		_o.clickNext = $(this).is(':only-child') ? false : _o.clickNext;

		// try to fetch an anchor
		var _a = $(this).find('a').is('a') ? $(this).find('a') : false;

		// reference the original image as a variable and hide it
		var _img = $(this).children('img').css('display','none');

		// extract the original source
		var _src = _a ? _a.attr('href') : _img.attr('src');

		// find a title
		var _title = _a ? i + ":" + _a.attr('title') : i + ":" + _img.attr('title');

		// create loader image            
		var _loader = new Image();

		// check url and activate container if match
		if (_o.history && (window.location.hash && window.location.hash.replace(/\#/,'') == _src)) {
			_container.siblings('.active').removeClass('active');
			_container.addClass('active');
		}

		// begin loader
		$(_loader).load(function () {

			// try to bring the alt
			$(this).attr('alt',_img.attr('alt'));

			//-----------------------------------------------------------------
			// the image is loaded, let's create the thumbnail

			var _thumb = _a ? 
				_a.find('img').addClass('thumb noscale').css('display','none') :
				_img.clone(true).addClass('thumb').css('display','none');

			if (_a) { _a.replaceWith(_thumb); }

			if (!_thumb.hasClass('noscale')) { // scaled tumbnails!
				var w = Math.ceil( _img.width() / _img.height() * _container.height() );
				var h = Math.ceil( _img.height() / _img.width() * _container.width() );
				if (w < h) {
					_thumb.css({ height: 'auto', width: _container.width(), marginTop: -(h-_container.height())/2 });
				} else {
					_thumb.css({ width: 'auto', height: _container.height(), marginLeft: -(w-_container.width())/2 });
				}
			} else { // Center thumbnails.
				// a tiny timer fixed the width/height
				window.setTimeout(function() {
					_thumb.css({
						marginLeft: -( _thumb.width() - _container.width() )/2, 
						marginTop:  -( _thumb.height() - _container.height() )/2
					});
				}, 1);
			}

			// add the rel attribute
			_thumb.attr('rel',_src);

			// add the title attribute
			_thumb.attr('title',_title);

			// add the click functionality to the _thumb
			_thumb.click(function() {
				$.galleria.activate(_src);
			});

			// hover classes for IE6
			_thumb.hover(
				function() { $(this).addClass('hover'); },
				function() { $(this).removeClass('hover'); }
			);
			_container.hover(
				function() { _container.addClass('hover'); },
				function() { _container.removeClass('hover'); }
			);

			// prepend the thumbnail in the container
			_container.prepend(_thumb);

			// show the thumbnail
			_thumb.css('display','block');

			// call the onThumb function
			_o.onThumb(jQuery(_thumb));

			// check active class and activate image if match
			if (_container.hasClass('active')) {
				$.galleria.activate(_src);
				//_span.text(_title);
			}

			//-----------------------------------------------------------------

			// finally delete the original image
			_img.remove();

		}).error(function () {

			// Error handling
		    _container.html('<span class="error" style="color:red">Error loading image: '+_src+'</span>');

		}).attr('src', _src);
	});
});
};

Anyone able to tell me whether I have pasted the right code, and which line I need to edit/remove to stop the preloading and just make the image load when the thumbnail is clicked?

 

Any help greatly appreciated.

 

Thanks