(function($) { $.fn.multiGal = function(settings) { settings = jQuery.extend({ imageBtnPrev: 'http://www.desolationue.com/wp-content/plugins/multi-gallery/images/slide.bg.left.png', imageBtnNext: 'http://www.desolationue.com/wp-content/plugins/multi-gallery/images/slide.bg.right.png', imageBtnPrevBlank: 'http://www.desolationue.com/wp-content/plugins/multi-gallery/images/slide.bg.left.blank.png', imageBtnNextBlank: 'http://www.desolationue.com/wp-content/plugins/multi-gallery/images/slide.bg.right.blank.png', containerResizeSpeed: 400, imageArray: [], activeImage: 0 },settings); _start(); // This, in this context, refer to object (link) which the user have clicked function _start() { // Unset total images in imageArray settings.imageArray.length = 0; // Check if this is the first image if(window.location.hash) { settings.activeImage = Number(window.location.hash.substr(1)); } else { settings.activeImage = 0; } // We have an image set? Or just an image? Let´s see it. if(typeof(imageArray) != 'undefined') { // Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references for(var i = 0; i < imageArray.length; i++) { settings.imageArray.push(new Array(imageArray[i][0],imageArray[i][1],imageArray[i][2],imageArray[i][3])); } // Call the function that prepares image exibition _set_image_to_view(); } } /** * Prepares image exibition; doing a image´s preloader to calculate it´s size */ function _set_image_to_view() { // Show the loading $('#mg-loader').show(); $('#mg-img').hide(); // Image preload process var objImagePreloader = new Image(); objImagePreloader.onload = function() { if(objImagePreloader.width > objImagePreloader.height) { $('#mg-img').attr('src', 'http://www.desolationue.com/wp-content/plugins/multi-gallery/php/timthumb.php?src=http://www.desolationue.com/' + settings.imageArray[settings.activeImage][1] + '/' + settings.imageArray[settings.activeImage][2] + '&w=535&zc=0'); } else { $('#mg-img').attr('src', 'http://www.desolationue.com/wp-content/plugins/multi-gallery/php/timthumb.php?src=http://www.desolationue.com/' + settings.imageArray[settings.activeImage][1] + '/' + settings.imageArray[settings.activeImage][2] + '&h=440&zc=0'); } $('.zoom').attr('href', 'http://www.desolationue.com/' + settings.imageArray[settings.activeImage][1] + '/' + settings.imageArray[settings.activeImage][2]); // Add change comments on display $('#notebook h2').text(settings.imageArray[settings.activeImage][3]); // Perfomance an effect in the image container resizing it _resize_container_image_box(objImagePreloader.width,objImagePreloader.height); // clear onLoad, IE behaves irratically with animated gifs otherwise objImagePreloader.onload=function(){}; }; objImagePreloader.src = 'http://www.desolationue.com/wp-content/plugins/multi-gallery/php/timthumb.php?src=http://www.desolationue.com/' + settings.imageArray[settings.activeImage][1] + '/' + settings.imageArray[settings.activeImage][2] + '&w=535&zc=0'; }; /** * Perfomance an effect in the image container resizing it * * @param integer intImageWidth The image's width that will be showed * @param integer intImageHeight The image's height that will be showed */ function _resize_container_image_box(intImageWidth,intImageHeight) { // Get current width and height var intCurrentWidth = $('#mg-img-container').width(); var intCurrentHeight = $('#mg-img-container').height(); // If it's a vertical image, shrink the box if(intImageHeight > intImageWidth) { intImageWidth /= (intImageHeight / 440); intImageHeight = 440; } // Get the width and height of the selected image plus the padding var intWidth = intImageWidth; var intHeight = intImageHeight; // Diferences var intDiffW = intCurrentWidth - intWidth; var intDiffH = intCurrentHeight - intHeight; // Set margins var margTop = (intHeight / 2) * -1; var margLeft = (intWidth / 2) * -1; // Perfomance the effect $('#gallery-image').animate({ marginTop: margTop, marginLeft: margLeft }, settings.containerResizeSpeed, function() { }); $('#frame-top').animate({ width: intWidth + 38 }, settings.containerResizeSpeed, function() {}); $('#mg-img-container').animate({ width: intWidth, height: intHeight }, settings.containerResizeSpeed, function() { _show_image(); }); if((intDiffW == 0) && (intDiffH == 0)) { if($.browser.msie) { ___pause(250); } else { ___pause(100); } } }; /** * Show the prepared image */ function _show_image() { $('#mg-loader').hide(); $('#mg-img').fadeIn(function() { _set_navigation(); }); _preload_neighbor_images(); }; /** * Display the button navigations */ function _set_navigation() { // Show the prev button, if not the first image in set if(settings.activeImage != 0) { $('.arrow-prev').css({'background':'url(' + settings.imageBtnPrev + ') no-repeat center center', 'cursor':'pointer'}) .unbind() .bind('click',function() { window.location.hash = settings.activeImage - 1; settings.activeImage = settings.activeImage - 1; _set_image_to_view(); return false; }); } else { $('.arrow-prev').css({'background':'url(' + settings.imageBtnPrevBlank + ') no-repeat center center', 'cursor':'default'}).unbind(); } // Show the next button, if not the last image in set if(settings.activeImage != (settings.imageArray.length -1)) { $('.arrow-next').css({'background':'url(' + settings.imageBtnNext + ') no-repeat center center', 'cursor':'pointer'}) .unbind() .bind('click',function() { window.location.hash = settings.activeImage + 1; settings.activeImage = settings.activeImage + 1; _set_image_to_view(); return false; }); } else { $('.arrow-next').css({'background':'url(' + settings.imageBtnNextBlank + ') no-repeat center center', 'cursor':'default'}).unbind(); } } /** * Preload prev and next images being showed */ function _preload_neighbor_images() { if((settings.imageArray.length -1) > settings.activeImage) { objNext = new Image(); objNext.src = settings.imageArray[settings.activeImage + 1][0]; } if(settings.activeImage > 0) { objPrev = new Image(); objPrev.src = settings.imageArray[settings.activeImage -1][0]; } } }; })(jQuery); // Call and execute the function immediately passing the jQuery object