10 Responsive jQuery Slider Plugins

슬라이드 플러그인

http://designreflect.com/responsive-jquery-slider-plugins/

Sliders are common on blogs for a long time. But now sliders can be seen on any type of website. With the trend of responsive web design, you also need to make slider of your website or blog responsive so that it also adapts itself according to the resolution of the screen.

Its not that much difficult to make a website responsive but its always better to make use of scripts written by other developers to save your time. To help you out with responsive sliders, I have hand picked 10 best responsive jQuery slider plugins available on internet.

10 Responsive jQuery Slider Plugins

Flexslider

Flexslider is the most widely used and fully responsive jQuery slider. Flexslider is easy to use and is supported in all major browsers.

Flexslider

WOW Slider

WOW Slider is a responsive jQuery image slider with stunning visual effects and tons of professionally made templates.

WOW Slider

ResponsiveSlides.js – Responsive jQuery Slider

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using list items inside <ul>. It works with wide range of browsers including all IE versions from IE6 and up.

ResponsiveSlides.js

wmuSlider – A jQuery responsive slider

wmuSlider

CSS3 Slideshow with Parallax Effect

CSS3 Slideshow with Parallax Effect

Blueberry

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

Blueberry

Camera Slideshow

Camera Slideshow

Elastic Image Slideshow

Elastic image slideshow is a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and you can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.

Elastic Image Slideshow

Fullscreen Slit Slider

Fullscreen Slit Slider

UnoSlider

UnoSlider is an advanced image and content slider which is built with responsive design and mobile devices in mind.

UnoSlider

6 jQuery Plugins for Book Like Page Flip Effect

책 같은 페이지 전환효과 플러그인

http://designreflect.com/jquery-plugins-for-book-like-page-flip-effect/

jQuery when combined with modern web technologies can do wonders. It can be used to achieve most of the realistic effects. At most of the times, web developers develop the effects that are inspired by the real world examples. One of such effects is book like page flip effect. Page flip is very much popular among web developers.

Book like page flip effect can make your web layout look like a book with turning pages like real books. You don’t need to dive into the jQuery to write your own code to achieve this effect. You can choose from any of the following jQuery plugins to add a book like page flip effect on your web layout.

Here are 6 Page Flip jQuery Plugins for book like effect.

Turn.js

turn.js makes your content look like a real book or magazine using all the advantages of HTML5. The plugin works on most of the devices including Android, iPad, iPod and iPhone.

Turn.js

Booklet

Booklet is a jQuery powered plugin for a flipbook style layout. The plugin provides many options to customize it as per your needs. You can change the speed, starting page, shadows, reading direction and more.

The plugin has the option to turn pages using keyboard’s previous-next buttons or manually. Keyboard navigation makes it really easy to use this plugin.

Booklet

BookBlock

BookBlock is a jQuery plugin that is used to create book like layout with a page-flip navigation. The plugin can be used to flip any type of content like text or images.

BookBlock

jFlip

jFlip plugin builds an image gallery made as a book. You can flip the book pages to view the next or previous image clicking or dragging the animated corners shown when hovering on the gallery area.

jFlip

Notebook Page Flip

Notebook Page Flip is a customized version of the Booklet jQuery plugin. This plugin shows latest blog posts in a book style layout with a page flip navigation.

Notebook Page Flip

imBookFlip

The imBookFlip plugin can load a book in an iframe or directly on the page. The book’s pages can be set to turn when manually clicked only, begin auto flip as soon as the page loads or begin auto flip when first page (front cover is clicked).

imBookFlip

Isotope: An exquisite jQuery plugin for magical layouts

매직컬한 레이아웃을 위한 정교한 jQuery.

Demos

• Basic
• Elements Complete
• Elements Partial
• Layout modes
• Filtering
• Sorting
• reLayout
• Adding items
• Infinite Scroll
• Images
• Combination filters
• Hash history
• Fluid / responsive
• Removing

Custom layout modes

• Centered Masonry
• Category rows
• Masonry corner stamp
• Masonry gutters
• Spine align
• BIG Graph
• Masonry Column Shift

Tests

jQuery 의 동적레이아웃 플러그인.

A dynamic layout plugin for jQuery
The flip-side of CSS floats.

Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Demos

• Basic single-column
• Basic multi-column
• Images
• Tumblelog example
• Animating with jQuery
• Animating with CSS Transitions
• Animating with Modernizr
• Adding items
• Infinite Scroll
• Gutters
• Right-to-left
• Centered
• Fluid
• Corner stamp

CSS, JS 모음 사이트  -  http://codevisually.com/

핀트레스트 같은 효과?!  욱마트 wookmark.com

http://www.wookmark.com/jquery-plugin

10개의 신선하고 유용한 jQuery 플러그인

http://webdesignledger.com/freebies/10-fresh-and-useful-jquery-plugins-2

There are many reasons why you can say jQuery has enormous popularity. Some might say it’s because of its excellent cross browser compatibility, while others will argue that the small footprint is responsible for jQuery’s widespread adoption. While these are valid points, no one can deny that all of the great plugins built by a very passionate community is a big reason as well. So for this post we’ve gathered some of the latest jQuery plugins to be released. In this list you will find some very useful ones that will help you with things like layout, typography, and more.

Jquery Transit

Super-smooth CSS3 transformations and transitions for jQuery — v0.1.3

Pageslide

A jQuery plugin which slides a webpage over to reveal an additional interaction pane.

stellar.js

Parallax has never been easier.

Get turn.js

Is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5.

jQuery Scroll Path

Glisse.js

Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3.

The Wookmark jQuery plugin

The Wookmark plugin detects the size of the window and automatically organizes the boxes into columns. Resize your browser to see the layout adjust. Note how the columns are approximately of equal height.

SlabText

A jquery plugin for producing big, bold and responsive headlines.

Morris.js

Making good-looking graphs shouldn’t be hard. Morris.js is a lightweight library that uses jQuery and Raphaël to make drawing time-series graphs easy.

HiddenPosition

Position any element to any element, even if they are hidden

Related Posts

Here's some other articles that you will definitely find useful.

12 Fresh and Free UI PSDs

11 Free Online Books for Web Designers

10 Excellent New Free Fonts

8 Beautiful New Free Fonts

15 High Quality PSD’s that You’ll Actually Use

<iframe id="PayIFrame"></iframe>


1. src 바꾸기.
$("#PayIFrame").attr("src", "http://www.shop-wiz.com");

2. iframe  내의 문서 객체 접근
iframe 속의 문서에 <div id="target"></div>

$("#PayIFrame").contents().find("#target").html();


3. 부모문서에 접근
$("#parent_id", parent.document)


4. 부모문서의 다른 iframe 접근
$("#parent_id", parent.frames["frame_id"].document)




자동 iframe 길이 체크하기

function setSize(){
    $("#myIframe").height(500);
}

아래가 실제 코드입니다.
var resizeIframe = function (){
    $("#myIframe").load(function(){
        $(this).height($(this).contents().find('body')[0].scrollHeight);
    });
}
$(function(){
    resizeIframe();
});


<iframe src="" width="1000" height="500" frameborder="0" name="myIframe" id="myIframe" scrolling="no"></iframe>    

setSize는 실제 iframe 크기를 초기화 시키는 작업을 합니다.
iframe 내의 문서에서 parent.setSize()를 호출합니다.

만약 서브 도메인인경우는
parent와 child 에 각각 document.domain = 'domain.com'; 을 정의해서 사용하시면 됩니다.