CHUVASH.eu

CHunky Universe of Vigouros Astonishing SHarepoint :)

Resize image with jQuery to fit the div

There are many interesting jQuery plugins for resizing and cropping of images. Among them are jrac and image scale. I have tested the latter: It works very fine

$(window).load(function() {
    var $imgContainer = $("#layout-news-image");
    var $newsImg = $("#layout-news-image img[rel!='sp_DialogLinkIgnore']");
    $imgContainer.css("width", $imgContainer.parent().width());
    if ($newsImg.length > 0) {
	    if ($newsImg.width() < $imgContainer.width()) {
		    $imgContainer.width($newsImg.width());
	    }
	    if ($newsImg.height() < $imgContainer.height()) {
		    $imgContainer.height($newsImg.height());
	    }
	    $newsImg.imgscale({ 
		    parent : '#layout-news-image', 
		    center: "true",
		    scale: "fill"
	    });
    }
});

This script checks if the original image is lesser than container div and doesn’t resize if it is so. #layout-news-image img[rel!=’sp_DialogLinkIgnore’] means that do not resize if there is a hidden image with rel=”sp_DialogLinkIgnore”. See the jQuery selectors for more info. This script can be improved by adding window resize event in javascript.

I use $(window).load instead of the usual $(document).ready because ready-function in jQuery runs when DOM is loaded, if the page is not cached it happens before the image is loaded. $(document).ready doesn’t work.

About these ads

3 responses to “Resize image with jQuery to fit the div

  1. sdfsdf 2012-06-28 at 19:28

    doesn’t work: it’s just squeeze the picture. No examples included == no possibility to check.

    • Anatoly Mironov 2012-11-05 at 10:06

      Thank you Alejandro for the awesome js lib and sharing it. I will absolutely recommend it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Discovering SharePoint

And having fun doing it

Bram de Jager's SharePoint blog

My view and thoughts on SharePoint.

My programming life

and everything in between

SharePoint Development Lab by @avishnyakov

It is a good place to share some SharePoint stories and development practices.

SharePoint Dragons

Nikander & Margriet on SharePoint

The Zuul Cat Idea Brewery

Where ideas on software development and entrepreneurship brew.

Paul J. Swider

Inspire! Teach! Awe!

Mai Omar Desouki - Avid SharePointer

Egyptian & Vodafoner - Senior SharePoint Consultant

Alexander Ahrens

MCPD | SharePoint | Web Development | JavaScript | .NET

Cameron Dwyer | SharePoint, Outlook, OnePlaceMail

OnePlaceMail, SharePoint, Outlook & Life's Other Little Wonders

.:paul.tavares:.

Me and My doings!

Share SharePoint Points

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

SPJoel

SharePoint for everyone

SharePointRyan.com

Ryan Dennis is a SharePoint Solutions Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode, ya mama

Treacle tarts for great justice

Follow

Get every new post delivered to your Inbox.

Join 243 other followers

%d bloggers like this: