ดาวน์โหลดฟรี

ดาวน์โหลด Responsive Image Sizes At Different Resolutions
เข้าชมทั้งหมด : 744 ครั้ง | ดาวน์โหลด : 150 ครั้ง | หมวด : Image Effects


Responsive Image Sizes At Different Resolutions

An Experiment with Mobile-First Images that Scale Responsively & Responsibly

What is this?

The goal of this technique is to deliver optimized, contextual image sizes in responsive layouts that utilize dramatically different image sizes at different resolutions. Ideally, this could enable developers to start with mobile-optimized images in their HTML and specify a larger size to be used for users with larger screen resolutions -- without requesting both image sizes, and without UA sniffing.

Instructions

* Note: you'll need an apache web server for this to work.
  1. Add the ".htaccess"" file* to your web server public rootfile's head (OR if you already have an .htaccess file, you can paste its contents into your existing file)

  2. Grab "responsiveimgs.min.js" and reference it from your HTML in the HEAD of your document:

  3. For any img elements that offer a larger desktop-friendly size, reference the larger image's src via a ?full= query string on the image url. Note that the path after ?full= should be written so it works directly as the src attribute as well (in other words, include the same path info you need for the small version)

    <img src="small.jpg?full=large.jpg" >

How's it work?

As soon as rwd-images.js loads, it tests the screen width, and if it's large, it inserts a BASE element into the head of your page, directing all subsequent image, script, and stylesheet requests through a fictitious directory called "/rwd-router/". As these requests reach the server, the .htaccess file determines whether the request is a responsive image or not (does it have a ?full query parameter?). It redirects responsive image requests immediately to their full size, while all non-responsive-image requests go to their proper destination through a URL rewrite that ignores the "/rwd-router/" segment.

Supported Browsers

Safari (desktop, iPhone, iPad), Chrome, Internet Explorer (8+), Opera. Firefox 4

Support Caveats:

Firefox 3.6-, IE 6/7, etc

Note:

Unsupported browsers still receive responsive images; the drawback is that both image sizes are requested, so there's additional overhead on the initial request on the desktop. That aside, subsequent page visits can make use of a cookie that is set in all browsers to serve the appropriate size from the start.

Non-Javascript Browsers

Non-javascript enabled/supporting browsers/devices will receive the initial image referenced in the image src attribute (the mobile version)

Optional Configuration and Optimizations:

1 option is available for external configuration: widthBreakPoint. You can set it within a global "rwd_images" object that must be defined before rwd-images.js is loaded.

1 <script>
2     //configure options here:
3     var rwd_images = {};
4 </script>

Setting a different width breakpoint

If you'd like to use a different width breakpoint than the 480px default:

1 <script>
2     //configure options here:
3     var rwd_images = {
4         //set the width breakpoint to 600px instead of 480px
5         widthBreakPoint: 600
6     };
7 </script>

ข้อมูลการดาวน์โหลด Responsive Image Sizes At Different Resolutions

เข้าชมทั้งหมด

: 744 ครั้ง


ตัวอย่างการทำงาน

ดาวน์โหลดไปแล้ว

: 150 ครั้ง

ประเภท

: Freeware

ขนาดไฟล์

: 202.3 kb

หมวดหมู่

: Image Effects

แนะนำโปรแกรมที่เกี่ยวข้อง


CSS3 animation, shadows image hover effect


A sleek image gallery that takes advantage of CSS3 animation, shadows, and the “transform” property to instantly add a smooth hover effect to its images, whereby the image enlarges and moves…
เข้าชมทั้งหมด : 728 ครั้ง | ดาวน์โหลด : 197 ครั้ง | หมวด : Image Effects

jQuery 3D Parallax Background Effect


The HTML Our page will consist of 6 sections: header, footer and 4 articles. On the right, we’ll place an unordered list that links between the articles and remains fixed on the page so it doesn’t…
เข้าชมทั้งหมด : 822 ครั้ง | ดาวน์โหลด : 178 ครั้ง | หมวด : Image Effects

Rotating hover Image with JQuery


Creating a jquery plugin is easier than it sound, first time I heard about creating 3rd party plugin sounds scary, maybe need more deeper understanding about the platform, but not in jquery. Well I just…
เข้าชมทั้งหมด : 698 ครั้ง | ดาวน์โหลด : 176 ครั้ง | หมวด : Image Effects

Cool jQuery Nautilus plugin


jQuery plug-in based on Google's Doodle honoring Jules Verne (it was released on February 8, 2011). The letters of Google looked like hatches that allowed to see "under the sea",…
เข้าชมทั้งหมด : 621 ครั้ง | ดาวน์โหลด : 171 ครั้ง | หมวด : Image Effects

jQuery Custom Change background effect


jQuery can be extremely useful for you if you want to beautify your web app. jQuery provide a number of simple ways to dynamically change the design of your web page. Here is a simple script that shows…
เข้าชมทั้งหมด : 630 ครั้ง | ดาวน์โหลด : 150 ครั้ง | หมวด : Image Effects

หมวดหมู่โปรแกรม

 เกมส์
 ไดร์ฟเวอร์
 โปรแกรมด้านความปลอดภัย
 บราวเซอร์และปลั๊กอิน
 โปรแกรมด้านธุรกิจ
 โปรแกรมการติดต่อสื่อสาร
 เครื่องมือ สำหรับนักพัฒนา
 โปรแกรมสำหรับจัดการภาพ
 โปรแกรมเพื่อการศึกษา
 โปแกรมการออกแบบกราฟฟิก
 โปรแกรมด้านอินเตอร์เน็ต
 โปรแกรมสำหรับ iTunes & iPod
 โปรแกรมสำหรับ MP3 & Audio
 โปรแกรมด้านเครือข่าย
 โปรแกรมทั่วไป & OS
 โปรแกรมจัดการวีดีโอ&ภาพยนต์
 เว็บไซต์สำเร็จรูป (CMS)

Free Templates

 Joomla Template
 WordPress Template
 Free Templates

jQuery Script

 Menu & Navigation
 Slideshow & Scroller
 Image Effects
 HTML5
 Form