www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

‫راه حل ساده برای عکس‌هایی که از کادر بیرون می‌زنند


نویسنده: وحید نصیری
تاریخ: ۱۳۹۰/۰۸/۲۸ ۲۱:۱۴:۰۰
آدرس: www.dntips.ir

ارسال تصویر در سایت‌ها، انجمن‌ها و امثال آن همیشه مشکل زا است؛ خصوصا نمایش تصاویری در قطع یک تابلوی دیواری در یک کادر کوچک.
راه ساده و دم دستی زیر، منهای استفاده از اسکریپت‌هایی که اندازه تصاویر را تشخیص داده و بر این اساس خودشان آن‌ها را بند انگشتی نمایش می‌دهند، هم برای حل این مشکل وجود دارد:
فرض کنید مطلبی که قرار است ارسال شود در یک DIV نمایش داده می‌شود و کلاس آن مثلا post-body است.
اولین کاری که می‌شود انجام داد این است:
در CSS سایت قسمت مرتبط با post-body تعریف زیر را اضافه می‌کنیم تا اضافات عکس که از کادر بیرون زده، خودبخود توسط مرورگر نمایش داده نشود:

overflow: hidden;

سپس در همین DIV که کلاس آن post-body است، با استفاده از jQuery به دنبال تصاویر گشته و موارد یافت شده را داخل یک لینک پویا قرار می‌دهیم (استفاده از متد wrap برای این محصور سازی). این لینک هم همان آدرس اصلی تصویر است. به این ترتیب کاربر با کلیک بر روی آن تصویر می‌تواند نتیجه را در صفحه‌ای دیگر مشاهده کند:

$(document).ready(function(){  
 $('.post-body img').each(function(){
    var $img = $(this);
    var src = $img.attr("src");
    $img.attr({border:"0"}).wrap('<a target="_blank" alt="Click here to enlarge (opens new window)" title="Click here to enlarge (opens new window)" href="'+src+'" />');
 }); 
});

مطالب مشابه