Advanced Image Scaling & Preloading - Jquery

Hi All, this is my second jQuery plugin I have written, and again want to contribute to the world. Feel free to use in any fashion you like, but please leave my name, link to blog, and email in the source code.

This plugin is called "imgResizer" and it is for pre-loading and scaling images.

You can configure it with the following options:
height : integer               (defaults to 300)
width  : integer              (defaults to 300)
loadingImage : string     (defaults to "images/loading.gif")
failImage: string             (defaults to "images/fail.png")
autoCenterImage: string (defaults to "true")

**note the autoCenterImage uses relative & absolute position. If it is set to true, the image will always sit within a box with the height and width as specified. If it is set to false, the image will just be scaled to the dimensions and pre-loaded.

***you will need to create or find a loading image and fail image, and place them in your images folder.


(function($){
$.fn.imgResize = function(options) 
{
//function by Brendon Irwin | 2011 | http://bren1818.blogspot.com/ | bren1818@gmail.com
//Last update: May 24th 2011

//set defaults
var defaults = {
  height: "300",
  width: "300",
  loadingImage: "images/loading.gif",
  failImage: "images/fail.png",
  autoCenterImage: "true"
};
 
var options = $.extend(defaults, options);
//If there are one or more elements, return them  
return this.each(function() {
$(this).wrap('<div class="loader" style="height: ' + options.height + '; width: ' + options.width +'; overflow: hidden; position: relative; background-image: url(' + options.loadingImage + '); background-position: center; background-repeat: no-repeat; "/>');
$(this).css({'display':'none'});
//load the image
$(this).load(function(){
$(this).css({'display':'none'});
$(this).css({'background-image' : 'url(' + options.loadingImage + ')', 'background-position' : 'center', 'background-repeat' : 'no-repeat'});
},function(){
//load complete, begin scaling
var maxWidth = options.width; // Max width for the image 
var maxHeight = options.height;     // Max height for the image
var ratio = 0;   // Used for aspect ratio
var width = $(this).width();     // Current image width
var height = $(this).height();   // Current image height

// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width;   // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio);   // Scale height based on ratio
height = height * ratio;     // Reset height to match scaled image
width = width * ratio;     // Reset width to match scaled image
}

// Check if current height is larger than max
if(height > maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight);   // Set new height
$(this).css("width", width * ratio);     // Scale width based on ratio
width = width * ratio;     // Reset width to match scaled image
}

if(height == maxHeight)
{
$(this).css("top", "0px");
}

if(options.autoCenterImage == "true")
{
$(this).css('position', 'absolute');
//center left
if( width  <= options.width){
var lef= ( (options.width- parseInt(width) ) / 2 ) + 'px'; 
$(this).css('left', lef);
}else{
$(this).css('left', '0px');
}

//center top
if( height < options.height) {
var top = ( (options.height - parseInt(height) ) / 2 ) + 'px';  
$(this).css('top', top );
}

if(height == options.height){
$(this).css('top', '0px' );
}
}else{ //No Auto-Centering
var w, h;
h = $(this).height() + 'px';
w = $(this).width() + 'px';
$(this).parent().css('height' , h );//, $(this).width() + 'px' });
$(this).parent().css('width' , w );
}

//Fade image in
$(this).fadeIn(5000, function() { 
$(this).css({'display':'block'});
$(this).parent().css({'background-image' : 'url(none)'});
});//end fadeIn function

});// end load function


$(this).error(function() {
$(this).attr('src' , options.failImage);
$(this).load(function(){ $(this).css({'display':'none'}); },function(){
//fade image in
$(this).fadeIn(5000, function() {
$(this).css({'display':'block'});
$(this).css({'background-image' : 'url(none)'});
});//end fadeIn
});//end load
});//end error


});// endeach function
 
};//end function resize
})(jQuery);//end function deceleration

Simple Slider jQuery component

Hi All, I am sure if you're a web developer, you have used jQuery, or a jQuery plugin. I sure know I have, but now, I want to contribute one.

I have written a jQuery plugin which I call the "Sliderizer".

To use it, simply create an un-ordered list like such:

<ul class="someList">
   <li>Slide 1</li>
   <li>Slide 2</li>
   <li>Slide 3</li>
   <li>Slide 4</li>
</ul>

then select it, and call the Sliderizer like so:

$('.someList').sliderize({ height: 200, width: 200, direction : "vertical" });
$('#toSliderize').sliderize({ height: 200, width: 200, direction : "horizontal", speed: "2000" });

You can configure it with the following options:
height : integer     (defaults to 300)
width  : integer     (defaults to 300)
speed : integer     (defaults to 1000) -This is milliseconds for animation, 1000 = 1 second
direction : string   (default to horizontal)  -This can be horizontal or vertical

Below is some code I have written. Feel free to copy and paste it into a js file and use in a project. Please leave my name and link to my blog. Cross Browser friendly, just needs some CSS. If you have any questions or reccommendations, please feel free to email me. Enjoy!



(function($){  
$.fn.sliderize = function(options) 
{
//function by Brendon Irwin | 2011 | http://bren1818.blogspot.com/ | bren1818@gmail.com
//Last update: May 28th 2011

//Helper function for animating
function slideTheSlide(slider, direction, distance, speed){
var theDistance = 0;
speed = parseInt(speed);
var theId = '#' + slider;
if( direction == "left" || direction == "up" ){
theDistance = (distance * -1);
}else if( direction == "right" || direction == "down" ){ //right or up
theDistance = distance;
}


if( direction == "left" || direction == "right"){
$(theId + ' li').each(function(){
var thisPos = $(this).position();
$(this).animate({
left: (thisPos.left + theDistance) + 'px'
}, speed, function() {
// Animation complete.
//Re-enable buttons
var first = $(theId + ' li').first().position();
var last = $(theId + ' li').last().position();

if( first.left == 0){
$(theId + '_sliderized_controls .prevClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .prevClick').attr("disabled", false);
}

if( last.left == 0){
$(theId + '_sliderized_controls .nextClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .nextClick').attr("disabled", false);
}
});
});
}

if( direction == "up" || direction == "down"){
$(theId + ' li').each(function(){
var thisPos = $(this).position();
$(this).animate({
top: (thisPos.top + theDistance) + 'px'
}, speed, function() {
// Animation complete.
//Re-enable buttons
var first = $(theId + ' li').first().position();
var last = $(theId + ' li').last().position();

if( first.top == 0){
$(theId + '_sliderized_controls .prevClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .prevClick').attr("disabled", false);
}

if( last.top == 0){
$(theId + '_sliderized_controls .nextClick').attr("disabled", true);
}else{
$(theId + '_sliderized_controls .nextClick').attr("disabled", false);
}
});
});
}
}//end slideTheSlide

//set defaults
var defaults = {
  height: "300",
  width: "300",
  speed: "1000",
  direction: "horizontal"
};
 
var options = $.extend(defaults, options);
//If there are one or more elements, return them  
return this.each(function(index) {
//check if item has an id, if not give it one
var thisId = "";
var listID ="";


if ($(this).attr('id')) {
thisId = $(this).attr('id') +  '_sliderized';
listID = $(this).attr('id');
} else {
thisId = "sliderList_" + index + '_sliderized';
listID = "sliderList_" + index;
$(this).attr('id', listID );
}

$(this).wrap('<div id="' + thisId + '" class="sliderized" />');
$(this).wrap('<div class="sliderizedContainer"/>');

$('#' + thisId + ' .sliderizedContainer').css({'position' : 'relative','height' : options.height + 'px', 'width' : options.width + 'px', 'overflow' : 'hidden'});

$(this).find('li').each(function(index){
$(this).css({'position' : 'absolute','float' : 'left', 'height' : options.height + 'px', 'width' : options.width + 'px', 'display' : 'block'});
if( options.direction == "horizontal"){
$(this).css({'left' : (index * options.width) + 'px'});
}else{
$(this).css({'top' : (-1 * (index * options.height)) + 'px'});
}
$(this).wrapInner('<div class="sliderizedSlide"/>');  
});

$('#' + listID + ' .sliderizedSlide').css({'position' : 'relative','height' : options.height + 'px', 'width' : options.width + 'px'}); //size the slide


$('#' + thisId).css({'height' : options.height + 'px', 'width' : options.width + 'px'});
$('#' + thisId).append('<div class="sliderized_controls" id="' + thisId + '_controls"/>');


$('#' + thisId + '_controls').append('<button class="prevClick">Previous</button>');

$('#' + thisId + '_controls .prevClick').click(function(){
$(this).attr("disabled", true);
if( options.direction == "horizontal"){
slideTheSlide(listID.toString(), "right",  options.width, options.speed );
}else{
slideTheSlide(listID.toString(), "up",  options.width, options.speed );
}
});

$('#' + thisId + '_controls').append('<button class="nextClick">Next</button>');
$('#' + thisId + '_controls .nextClick').click(function(){
$(this).attr("disabled", true);
if( options.direction == "horizontal"){
slideTheSlide(listID.toString(), "left",  options.width, options.speed );
}else{
slideTheSlide(listID.toString(), "down",  options.width, options.speed );
}
});

$('#' + thisId + '_controls .prevClick').attr("disabled", true); //disable previous at start

});// endeach function
 
};//end function sliderize
})(jQuery);//end function decleration