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

ดาวน์โหลด Auto Resize Picture - jQuery Picture
เข้าชมทั้งหมด : 708 ครั้ง | ดาวน์โหลด : 161 ครั้ง | หมวด : Image Effects


Auto Resize Picture - jQuery Picture

Overview

jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. Lets hope that happens soon but in the meantime this plugin will be kept up to date with latest developments.

 

Usage

You have a choice of two ways to use the plugin, with <figure> tags or with the newly proposed <picture> and <source> tags. Bear in mind that the picture and source tags have only recently been proposed and are not yet valid HTML code.

Initialise the plugin

To initialise it you just add .picture() to the element you want to apply it to. It only works on figure and picture tags for now:

$(function(){
    $('figure.responsive').picture();
});

Usage with Figures

To use the plugin with your figure tags you need to add data attributes to them for each size of the image you want to use. It's a good idea to add a class to the tag too so it doesn't select every figure on the page. Heres a code example:

<figure class="responsive" data-media="assets/images/small.png" data-media440="assets/images/medium.png" data-media600="assets/images/large.png" title="A Half Brained Idea">
    <noscript>
        <img src="assets/images/large.png" alt="A Half Brained Idea">
    </noscript>
</figure>

You can see that there are data attributes added to the figure tag that hold the url of the different size images. In this example the attribute with no number is for the 0-400 area. Each one also specifies the break point that image is to be used at. If javascript is turned off it defaults to the image specified in the noscript tag. You initialise the plugin like this:

$(function(){
    $('figure.responsive').picture();
});

Usage with Pictures

Using the plugin with the new picture tag works in a similar way. Instead of the images being declared in data attributes they're declared using <source> tags:

ข้อมูลการดาวน์โหลด Auto Resize Picture - jQuery Picture

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

: 708 ครั้ง


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

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

: 161 ครั้ง

ประเภท

: Freeware

ขนาดไฟล์

: 29.7 kb

หมวดหมู่

: 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…
เข้าชมทั้งหมด : 758 ครั้ง | ดาวน์โหลด : 154 ครั้ง | หมวด : 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…
เข้าชมทั้งหมด : 749 ครั้ง | ดาวน์โหลด : 200 ครั้ง | หมวด : 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…
เข้าชมทั้งหมด : 843 ครั้ง | ดาวน์โหลด : 181 ครั้ง | หมวด : 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…
เข้าชมทั้งหมด : 712 ครั้ง | ดาวน์โหลด : 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",…
เข้าชมทั้งหมด : 633 ครั้ง | ดาวน์โหลด : 173 ครั้ง | หมวด : 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