تغییر سایز ( resize ) عکس به کمک jQuery

در اکثر پروژه ها نیاز به تغییر سایز تصاویر می باشد که برای این کار راهکارهای متفاوتی وجود دارد مثل استفاده از زبان های سمت سرور و تغییر سایز تصاویر و سپس ارسال آن به سمت کاربر که این روش پیچیدگی های خاص خودش را دارد و البته برای این روش کتابخانه های قوی وجود دارد که می توان به phpthumb برای زبان php اشاره کرد.

حال در این آموزش می خواهیم این کار را با استفاده از زبان سمت کاربر javascript و با بهره گیری از فریم ورک قدرتمند این زبان یعنی jQuery انجام دهیم.

HTML

برای شروع کار ابتدا در ادیتور خود یک فایل HTML به نام index.html ایجاد نمایید. در قسمت body محتوای زیر را قرار دهید

<div style="margin: 0 auto; display: block; width: 200px; height: 200px;" class="box"><img src="http://www.hiwebdesign.ir/dl/jquery-resize/test.jpg" /></div>

کد بالا یک تگ div با کلاس box و خصوصیات css مورد نیاز ایجاد می کند البته فقط قسمت height و width این کد css برای ما مهم می باشد. در داخل تگ div یک تگ img قرار دارد که تصویر مورد نظر ما را در صفحه قرار میدهد البته این تصویر بزرگ می باشد و ما می خواهیم آن را resize کنیم.

JavaScript

در قسمت head فایل html ابتدا jQuery را فراخوانی می کنیم

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

سپس یک تک script ایجاد میکنیم و تابع مورد نیاز خود را به ترتیب زیر در آن وارد می کنیم

<script type="text/javascript">
			function resizeImages(el) {
				$(el).each(function() {
					var maxWidth = $(this).parent().width();
					var imgWidth = $(this).width();
					var imgHeight = $(this).height();
					var newWidth = maxWidth;
					var ratio = imgWidth / maxWidth;
					var newHeight = imgHeight / ratio;
					$(this).css({
						height : newHeight,
						width : newWidth,
					});
				});
			}
			$(document).ready(function() 
				resizeImages('.box img');
			});
		</script>

در کد بالا ما یک تابع به نام resizeImages ایجاد کرده ایم که el را به عنوان آرگومان دریافت می کند سپس در سطر بعد با استفاده از .each تابع را برای هر کدام از آرگمان های ارسالی انجام می دهیم مثلا در زمان انتخاب و فراخوانی تابع ما 4 عکس را انتخاب می کنیم و به تابع به عنوان آرگومان ارسال می کنیم حال تابع each تابع را برای تک تک عکس ها انجام میدهد.

نکته: در کد بالا هر جا از کلمه کلیدی this استفاده شده منظور تصویر یا همان img انتخاب شده ما می باشد.

حال میرسیم به کدهای داخل تابع ، ما در سطر اول یک متغییر به نام maxWidth ایجاد کرده و با اشاره به والد عکس مورد نظر یعنی تگ div مقدار width یا همان عرض آن را در متغییر میریزیم لازم به ذکر است که این مقدار همان مقداری است که ما با تعریف css به div دادیم. در دو سطر بعد ما با تعریف متغیرهای imgWidth و imgHeight مقدار عرض و ارتفاع عکس را در آن ها قرار دادیم. سپس maxWidth را در newWidth ریختیم ، در سطر بعد با تقسیم imgWidth به maxWidth  نسبت بین این دو را در متغیر ratio قرار دادیم و بعد متغیر newHeight را با تقسیم imgHeight به ratio مقدار دهی کردیم. در سطر بعد با کمک تابع جی کوئری .css مقدار hieght و width عکس را به مقادیر جدید تغییر دادیم به این ترتیب تابعی نوشتیم که یک عکس را به عنوان آرگومان دریافت میکند با در نظر گرفتن مقدار width والد عکس که باید به آن سایز درآید مقدار width و hieght عکس را محاسبه و تغییر میدهد.

حال باید هر جا که نیاز می باشد تایع resizeImages را فراخوانی و تصویر مورد نظر را به آن ارسال کنیم که ما در کد بالا در قسمت زیر این کار را انجام دادیم.

$(document).ready(function() {
     resizeImages('.box img');
});

دمو