반응형
반응형

20+ Must See Fresh and Useful jQuery Plugins from 2011

jQuery gives developers the chance to enrich websites with amazing elements without the need to write dozens of lines of code. This post presents advanced and cutting-edge jQuery plugins that will enhance your web designs tremendously.

Supersized 3.2 – Fullscreen Slideshow jQuery Plugin

Supersized 3.2 – Fullscreen Slideshow jQuery Plugin
Full screen background slideshow plugin for jQuery.

Expanding Fullscreen Grid Portfolio

Expanding Fullscreen Grid Portfolio
The main idea is to have a grid layout created with jQuery Masonry. View more expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image.

Quovolver

Quovolver
Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.

jQuery Spin Button Plugin: Smart Spin

jQuery Spin Button Plugin: Smart Spin
Smart spin is a jQuery spin button plugin that mimics the very common windows spin button control. Smart spin allows you to select a value between minimum and maximum values using either mouse or keyboard. You can also enter a value via keyboard.

FitText

FitText
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

DropKick

DropKick
Creating custom dropdowns is usually a tedious process that requires a ton of extra setup time. Oftentimes lacking conveniences that native dropdowns have such as keyboard navigation. DropKick removes the tedium and lets you focus on making menu looks good.

HTML5 jQuery Music Player

HTML5 Music Player
Remember that awesome music player psd created by Orman Clark? Well here is the matching jQuery plugin.

Circular Content Carousel with jQuery

Circular Content Carousel with jQuery
A simple jQuery circular content carousel.

jQuery Image Gallery

jQuery Image Gallery Demo
Image Gallery with Lightbox effect and slideshow functionality for jQuery UI.

Overscroll

Overscroll
Overscroll is a jQuery plug-in that mimics the iphone/ipad scrolling experience in a browser.

jBar

jBar
jbar is a jQuery plugin that transforms an unordered list <ul> into a toolbar with dropdown menus.

leanModal

leanModal
Super simple modal window plugin that works with your CSS. Perfect for hidden page content. Flexible width & height, image free, supports multiple instances on one page. Great for login, sign up & alert panels, etc.

ImageLens – A jQuery plug-in for Lens Effect Image Zooming

ImageLens – A jQuery plug-in for Lens Effect Image Zooming
Use this jQuery plug-in to add lens style zooming effect to an image.

My QR Code

My QR Code
Generate QR code for mobile devices using Google Chart Api with jquery. By default, the plugin will generate the QR code for the URL of the page. You can also specify the text, encoding and size of the QR code.

Simple Overlay

Simple Overlay
A jQuery Plugin for easily adding lightweight, flexible overlays to your projects.

MobilyMap

MobilyMap
MobilyMap is a jQuery plugin (7KB) that can create a Google Maps-like, draggable interface from any image.

Snippet

Snippet
Snippet is a jQuery syntax highlighting plugin built on top of the SHJS script found on SourceForge. Snippet provides a quick and easy way of highlighting source code passages in HTML documents.

NETEYE Activity Indicator

NETEYE Activity Indicator
A jQuery plugin that renders a translucent activity indicator (spinner) using SVG or VML.

jLinkPreview

jLinkPreview
jLinkPreview is a plug-in for jQuery Library which simply allows you to see link’s preview image before you visit them by just hovering on it. Link Preview will appear by your cursor when you hover.

jRumble

jRumble
jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It’s great to use as a hover effect or a way to direct attention to an element.

Grid Navigation Effects with jQuery

Grid Navigation Effects with jQuery
jQuery plugin for achieving some neat grid navigation effects.
반응형
반응형

5 Awesome Responsive jQuery Sliders and Image Galleries

In responsive design all design components need to be able to adapt to the environment in which they are displayed and have to interact with. We create tables, navigation menus, videos and other design elements responsive including the image sliders.
In this post we present you 5 super awesome Responsive jQuery Sliders and Image Galleries which you can use in your next project.

FlexSlider

FlexSlider

FlexSlider was built to serve up the best responsive jQuery slider around. The plugin includes fade and slide animations, customizable options as well as all the navigation options you would expect in such a plugin — touch gestures inclusive!

Blueberry

Blueberry

Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

Photo Swipe

Photo Swipe

PhotoSwipe is a free HTML/CSS/JavaScript based image gallery specifically targeting mobile devices. iPhone, iPad, Android, Blackberry 6 and Desktop all supported.

Responsive jQuery Slideshow

Responsive jQuery Slideshow

This example makes it possible to have fluid jQuery slideshow which scales responsively.

Dynamic-Carousel

Dynamic-Carousel

A carousel plugin built for responsive layouts.

If need some guidance for MB2-631 exams then get the latest 70-673 compiled by our certified experts to help you pass MB5-856 exam in first attempt of testking mcitp.

반응형
반응형
http://mooki83.tistory.com/2656510

http://cafe.naver.com/webappdev/12105
영문사이트 볼 때 유용할 수도 있는 네이버 영어사전 북마클릿입니다. - linkuco님

linkuco님의 스크립트를 보고
'앗, 이거다!' 힌트를 얻어서 급 만들게 된 스크립트.

크롬에서만 테스트 해봤지만 잘 돌아가는 것을 확인하였다.

추가하는 방법은 $2해주면 된다.

320 - MobileView(340/480)
480 - MobileView(500/320)
786 - MobileView(806/1024)
1024 - MobileView(1044/768)
Custom - MobileView

총 5가지 버전이며
스크롤바를 고려해서 써있는 넓이보다 + 20px씩 더 들어가있다.

다음에는 .. .뭐를 만들어보지?

덧.
user-agent는 고려되어 있지 않기 때문에 모바일로 특화된 페이지는...
user-agent 변경하는 것을 사용해야한다.
(흠.. 관련 자료도 포스팅해야지)
반응형
반응형
크롬으로 jSon 데이터 볼때 사용하자.
https://chrome.google.com/webstore/detail/ahdjpgllmllekelefacdedbjnjaplfjn?hl=ko
반응형

'프로그래밍 > Web' 카테고리의 다른 글

REST , RESTful  (0) 2011.12.09
[크롬] 모바일 사이즈로 확인해보기  (0) 2011.12.07
[WEB] Sencha Touch Touch Charts Mobile HTML5 Charts  (0) 2011.08.30
[HTML5] HTML5 API의 기능  (0) 2011.08.21
[HTML5] Web Worker  (0) 2011.08.21
반응형
http://visualjquery.com/ - 기본적인 jQuery 내용
반응형
반응형
@ CSS Sprites 생성도구 : http://ko.spritegen.website-performance.org/
  : 이미지 압축파일 올려주면 자동으로 만들어준다. 고마운 도구이군.

Image Sprites : http://www.w3schools.com/css/css_image_sprites.asp

An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates multiple server requests.
Using image sprites will reduce the number of server requests and save bandwidth
- 무슨 말이냐고? 하나의 이미지를 사용하는 이미지 모음을 얘기하는데,
  이를 사용하는 이점은 서버로의 호출을 줄이고 대역폭을 확보하는데 있다.
  이미지 모음을 CSS로 잘라서 사용하라는 말입니다.

예제 1 : http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_img
예제 2 : http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav
예제 3 : http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav

반응형

+ Recent posts