/**
* jQuery ImagePreloader plugin
* This jQuery plugin was inspired by the Lightbox plugin by Leandro Vieira Pinho (http://leandrovieira.com/projects/jquery/lightbox/)
* for the preloading system. Big thanks to him.
* Licensed under the MIT license:
* @see LICENSE.txt
* @name jquery-jImagePreloader-0.2.js
* @author Heudiard Eric
* @version 0.3
* @date July 28, 2009
* @category jQuery plugin
* @copyright (c) 2009 Eric Heudiard (heudiard.net)
* @example Visit http://dev.heudiard.net/jImagePreloader/ for more informations about this jQuery plugin
*
* I apologize for my english, .... I'm a poor french guy ;)
*/
// Please do not modify these variables.
var imageCount = 0, errorCount = 0, succeedCount = 0, splash = false;
;(function($) {
/**
* $ is an alias to jQuery object
*
*/
$.fn.jImagePreloader = function(settings) {
// Settings to configure the jQuery ImagePreloader plugin how you like
settings = jQuery.extend(true, {
defaultWidth : 100, // (int) Default width if no width was set in attributes or CSS.
defaultHeight : 100, // (int) Default height if no height was set in attributes or CSS.
defaultTimer : 1000, // (int) Default timer for the end fade in.
imageClass : null, // (string) If set, will select only the images with this class.
pluginPath : '/assets/Uploads', // (string) Path to this plugin.
imageLoading : 'loader.gif', // (string) Name of the loading icon (32x32) which is into 'img' folder in the plugin path.
imageError : 'error.gif', // (string) Name of the error icon (32x32) which is into 'img' folder in the plugin path.
textError : 'Seems this link is broken!', // (string)
splashScreen : { // (array) Default configuration of the splashscreen
show : false, // (boolean) When true, show a splashscreen
type : 'basic', // (string) Type of the splashscreen (default, advanced, custom)
customID : null, // (string or null) ID of a custom DIV which will be shown as the splashscreen
onError : null, // (function or null) Custom function that will be fired when image loads errored. Only for custom splashscreen.
onSuccess : null, // (function or null) Custom function that will be fired when image loads successfully. Only for custom splashscreen.
title : 'Images are loading, please be patient...', // (string) Title of the splashscreen
textOf : ' out of ', // (string) \
textSucceeded : ' succeeded, ', // (string) |=> Text shown in the splashcreen of type advanced
textErrored : ' errored.', // (string) /
image : 'loadingAnimation.gif' // (string) Name of the loading animation image
}
},settings);
// Caching the jQuery object with all elements matched
var jQueryMatchedObj = null, imgSplash = null, imgLoading = null, imgError = null;
if(settings.imageClass) jQueryMatchedObj = $(this).find('img.'+settings.imageClass);
else jQueryMatchedObj = $(this).find('img');
//Add this image count to the pool
imageCount += jQueryMatchedObj.length;
//And the race begin, go go go
_start();
/**
* Start the jQuery ImagePreloader plugin
*
*/
function _start() {
// Tag each image with its source attribute
jQueryMatchedObj.each(function(){
$(this).data('src', $(this).attr('src'));
});
// Call the function to create the markup structure; style some elements.
_set_interface();
}
/**
* Create the jQuery imagePreloader plugin interface
*
* The HTML markup will be like that:
*
*/
function _set_interface() {
//Show the splashscreen if set
if(settings.splashScreen.show == true){
if(splash == false){
splash = true;
imgSplash = new Image;
imgSplash.onload = function(){
_show_splashScreen();
imgSplash.onload = function(){};
};
imgSplash.src = settings.pluginPath+'/img/'+settings.splashScreen.image;
}
}
// We hide all matched images then we do some modifications to each of them
jQueryMatchedObj.hide().each(function(){
// Wrap the HTML markup around each img tag in our selector
$(this).wrap('');
$(this).parent().append('
');
//Get image CSS configuration and apply it to the wrapping DIV
var cssImg = __getCssFromImage($(this));
var newCss = __clearCssFromImage($(this));
//Clear image CSS configuration
$(this).css(newCss).removeAttr("src");
$(this).next('.image-preloader-loading').css(newCss);
$(this).next('.image-preloader-error').css(newCss);
//Give parent's image its CSS configuration
$(this).parent().css(cssImg);
});
//Preload the image preloader.
imgLoading = new Image;
imgLoading.onload = function(){
// Call the function that prepares image exibition
_set_images_to_view();
imgLoading.onload = function(){};
};
imgLoading.src = settings.pluginPath+"/img/"+settings.imageLoading;
//Preload the image error
imgError = new Image;
imgError.src = settings.pluginPath+"/img/"+settings.imageError;
}
/**
* Show the loading and preload the images in the background.
*
*/
function _set_images_to_view() {
// Show the loading for each image
$('.image-preloader-loading').show();
// Images preload process
jQueryMatchedObj.each(function(){
var imgObj = $(this);
var objImagePreloader = new Image();
//Fired when the image is entirely preloaded
objImagePreloader.onload = function() {
//We reassign the source to the image
imgObj.attr('src', imgObj.data('src'));
//And we show it
_show_image(imgObj);
//Clear onLoad, IE behaves irratically with animated gifs otherwise
objImagePreloader.onload=function(){};
};
//Fired if an error occured while the image is preloading, like a broken link
objImagePreloader.onerror = function(){
//We show the error DIV
_show_error(imgObj);
};
objImagePreloader.src = imgObj.data('src');
});
};
/**
* Show the loaded image
*
*/
function _show_image(imgObj) {
setTimeout(function(){
//We hide and remove the preload DIV
imgObj.parent().find('.image-preloader-loading').hide().remove();
//And we fade to the preloaded image
imgObj.fadeIn(settings.defaultTimer,
function(){
succeedCount++;
if(splash == true){
if(settings.splashScreen.type == 'advanced') _update_splashScreen();
if(errorCount + succeedCount == imageCount) _finish();
}
});
}, 1000);
};
/**
* Show the error DIV
*
*/
function _show_error(imgObj){
setTimeout(function(){
//We hide and remove the preload DIV
imgObj.parent().find('.image-preloader-loading').hide().remove();
//We add the error DIV to the DOM
imgObj.parent().append('
'+settings.textError+'
'+imgObj.data('src')+'
');
imgObj.parent().find('.image-preloader-error').css(__clearCssFromImage(imgObj));
//And we fade to it
imgObj.parent().find('.image-preloader-error').fadeIn(settings.defaultTimer,
function(){
errorCount++;
if(splash == true){
if(settings.splashScreen.type == 'advanced') _update_splashScreen();
if(errorCount + succeedCount == imageCount) _finish();
}
});
}, 1000);
}
/**
* Show a splashScreen while images are uploading.
*
*/
function _show_splashScreen(){
var options = settings.splashScreen, html = '';
switch(options.type){
case 'advanced':
html = '
