<!-- Add jQuery and fancyBox -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.js"></script>
<script>
$(function () {
$(".gallery").fancybox({
option
});
});
</script>
<a href="image.jpg" class="gallery" data-fancybox data-caption="My caption">
<img src="thumbnail.jpg" alt="" />
</a>
Property | Type | Default | Description |
---|---|---|---|
loop | Boolean | false | Enable infinite gallery navigation |
margin | Array | [44, 0] | Space around image, ignored if zoomed-in or viewport width is smaller than 800px |
gutter | Number | 50 | Horizontal space between slides |
keyboard | Boolean | true | Enable keyboard navigation |
arrows | Boolean | true | Should display navigation arrows at the screen edges |
infobar | Boolean | true | Should display infobar (counter and arrows at the top) |
toolbar | Boolean | true | Should display toolbar (buttons at the top) |
buttons | Array | [ 'slideShow', 'fullScreen', 'thumbs', 'share', //'download', //'zoom', 'close' ] | What buttons should appear in the top right corner. Buttons will be created using templates from `btnTpl` option and they will be placed into toolbar (class="fancybox-toolbar"` element) |
idleTime | Number | 3 | Detect "idle" time in seconds |
smallBtn | String | 'auto' | Should display buttons at top right corner of the content If 'auto' - they will be created for content having type 'html', 'inline' or 'ajax' Use template from `btnTpl.smallBtn` for customization |
protect | Boolean | false | Disable right-click and use simple image protection for images |
modal | Boolean | false | Shortcut to make content "modal" - disable keyboard navigtion, hide buttons, etc |
image | |||
└preload | String | 'auto' | Wait for images to load before displaying Requires predefined image dimensions If 'auto' - will zoom in thumbnail if 'width' and 'height' attributes are found |
ajax | |||
└settings | Object containing settings for ajax request | ||
└data | This helps to indicate that request comes from the modal Feel free to change naming |
||
└fancybox | Boolean | true | |
iframe | |||
└tpl | String | '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen allowtransparency="true" src=""></iframe>' | Iframe template |
└preload | Boolean | true | Preload iframe before displaying it This allows to calculate iframe content width and height (note: Due to "Same Origin Policy", you can't get cross domain data). |
└css | CSS | {} | Custom CSS styling for iframe wrapping element You can use this to set custom iframe dimensions |
└attr | Iframe tag attributes | ||
└scrolling | String | 'auto' | |
defaultType | String | 'image' | Default content type if cannot be detected automatically |
animationEffect | String | 'zoom' | Open/close animation type false, 'zoom', 'fade', 'zoom-in-out' |
animationDuration | Number | 500 | Duration in ms for open/close animation |
zoomOpacity | String | 'auto' | Should image change opacity while zooming If opacity is "auto", then opacity will be changed if image and thumbnail have different aspect ratios |
transitionEffect | String | 'fade' | Transition effect between slides false, 'fade', 'slide', 'circular', 'tube', 'zoom-in-out', 'rotate' |
transitionDuration | Number | 366 | Duration in ms for transition animation |
slideClass | String | '' | Custom CSS class for slide element |
baseClass | String | '' | Custom CSS class for layout |
baseTpl | String | '<div class="fancybox-container" role="dialog" tabindex="-1">' + '<div class="fancybox-bg"></div>' + '<div class="fancybox-inner">' + '<div class="fancybox-infobar">' + '<span data-fancybox-index></span> / <span data-fancybox-count></span>' + '</div>' + '<div class="fancybox-toolbar">{{buttons}}</div>' + '<div class="fancybox-navigation">{{arrows}}</div>' + '<div class="fancybox-stage"></div>' + '<div class="fancybox-caption-wrap"><div class="fancybox-caption"></div></div>' + '</div>' + '</div>' | Base template for layout |
spinnerTpl | String | '<div class="fancybox-loading"></div>' | Loading indicator template |
errorTpl | String | '<div class="fancybox-error"><p>{{ERROR}}<p></div>' | Error message template |
btnTpl | |||
└download | String | '<a download data-fancybox-download class="fancybox-button fancybox-button--download" title="{{DOWNLOAD}}">' + '<svg viewBox="0 0 40 40">' + '<path d="M20,23 L20,8 L20,23 L13,16 L20,23 L27,16 L20,23 M26,28 L13,28 L27,28 L14,28" />' + '</svg>' + '</a>' | |
└zoom | String | '<button data-fancybox-zoom class="fancybox-button fancybox-button--zoom" title="{{ZOOM}}">' + '<svg viewBox="0 0 40 40">' + '<path d="M 18,17 m-8,0 a 8,8 0 1,0 16,0 a 8,8 0 1,0 -16,0 M25,23 L31,29 L25,23" />' + '</svg>' + '</button>' | |
└close | String | '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="{{CLOSE}}">' + '<svg viewBox="0 0 40 40">' + '<path d="M10,10 L30,30 M30,10 L10,30" />' + '</svg>' + '</button>' | |
└smallBtn | String | '<button data-fancybox-close class="fancybox-close-small" title="{{CLOSE}}"></button>' | This small close button will be appended to your html/inline/ajax content by default, if "smallBtn" option is not set to false |
└arrowLeft | String | '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="{{PREV}}">' + '<svg viewBox="0 0 40 40">' + '<path d="M10,20 L30,20 L10,20 L18,28 L10,20 L18,12 L10,20"></path>' + '</svg>' + '</button>' | Arrows |
└arrowRight | String | '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="{{NEXT}}">' + '<svg viewBox="0 0 40 40">' + '<path d="M30,20 L10,20 L30,20 L22,28 L30,20 L22,12 L30,20"></path>' + '</svg>' + '</button>' | |
parentEl | String | 'body' | Container is injected into this element |
autoFocus | Boolean | false | Try to focus on the first focusable element after opening |
backFocus | Boolean | true | Put focus back to active element after closing |
trapFocus | Boolean | true | Do not let user to focus on element outside modal content |
fullScreen | |||
└autoStart | Boolean | false | |
touch | Set 'touch: false' to disable dragging/swiping | ||
└vertical | Boolean | true | Allow to drag content vertically |
└momentum | Boolean | true | Continue movement after releasing mouse/touch when panning |
hash | String | null | Hash value when initializing manually, set `false` to disable hash change |
media | {} | Customize or add new media types Example: media : { youtube : { params : { autoplay : 0 } } } |
|
slideShow | |||
└autoStart | Boolean | false | |
└speed | Number | 4000 | |
thumbs | |||
└autoStart | Boolean | false | Display thumbnails on opening |
└hideOnClose | Boolean | true | Hide thumbnail grid when closing animation starts |
└parentEl | String | '.fancybox-container' | Container is injected into this element |
└axis | String | 'y' | Vertical (y) or horizontal (x) scrolling |
wheel | String | 'auto' | Use mousewheel to navigate gallery If 'auto' - enabled for images only |
onInit | function | $.noop | When instance has been initialized |
beforeLoad | function | $.noop | Before the content of a slide is being loaded |
afterLoad | function | $.noop | When the content of a slide is done loading |
beforeShow | function | $.noop | Before open animation starts |
afterShow | function | $.noop | When content is done loading and animating |
beforeClose | function | $.noop | Before the instance attempts to close. Return false to cancel the close. |
afterClose | function | $.noop | After instance has been closed |
onActivate | function | $.noop | When instance is brought to front |
onDeactivate | function | $.noop | When other instance has been activated |
mobile | |||
└idleTime | Boolean | false | |
└margin | Number | 0 | |
└clickContent | function | function( current, event ) { return current.type === 'image' ? 'toggleControls' : false; } | |
└clickSlide | function | function( current, event ) { return current.type === 'image' ? 'toggleControls' : 'close'; } | |
└dblclickContent | function | function( current, event ) { return current.type === 'image' ? 'zoom' : false; } | |
└dblclickSlide | function | function( current, event ) { return current.type === 'image' ? 'zoom' : false; } |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add jQuery and fancyBox -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.js"></script>
<title>fancyBox #1. basic image lightbox</title>
<style>
[class^='gallery-']{
text-decoration: none;
transition: .25s;
}
[class^='gallery-']:hover{
opacity: .7;
}
</style>
</head>
<body>
<header>
<h1 class="dlw-title">fancyBox <small>#1. basic image lightbox</small></h1>
<p class="dlw-description">fancyBox is jQuery lightbox plugin.<br>
Here, basic image lightbox setting of fancyBox are posted.</p>
</header>
<section>
<h2 class="dlw-subtitle">[1] Single Image</h2>
<p>Add data-fancybox in <tag><a></tag> tag and generate fancybox.</p>
<script>
$(function () {
$(".gallery-1").fancybox();
});
</script>
<a href="images/photo01.jpg" class="gallery-1" data-fancybox data-caption="Look at the keyboard placed on the desk from the side.">
<img src="images/photo01-t.jpg" />
</a>
<a href="images/photo02.jpg" class="gallery-1" data-fancybox data-caption="Dark coffee and notepad.">
<img src="images/photo02-t.jpg" />
</a>
<a href="images/photo03.jpg" class="gallery-1" data-fancybox data-caption="Around the desk unified with white.">
<img src="images/photo03-t.jpg" />
</a>
<a href="images/photo04.jpg" class="gallery-1" data-fancybox data-caption="Watch keyboard and mouse closely.">
<img src="images/photo04-t.jpg" />
</a>
<a href="images/photo05.jpg" class="gallery-1" data-fancybox data-caption="Focus on the mouse.">
<img src="images/photo05-t.jpg" />
</a>
<a href="images/photo06.jpg" class="gallery-1" data-fancybox data-caption="Work is completed with dual monitor.">
<img src="images/photo06-t.jpg" />
</a>
<a href="images/photo07.jpg" class="gallery-1" data-fancybox data-caption="Writing the manuscript based on the memo.">
<img src="images/photo07-t.jpg" />
</a>
<a href="images/photo08.jpg" class="gallery-1" data-fancybox data-caption="I am not working overtime.">
<img src="images/photo08-t.jpg" />
</a>
<a href="images/photo09.jpg" class="gallery-1" data-fancybox data-caption="Watch the desktop from directly above.">
<img src="images/photo09-t.jpg" />
</a>
<a href="images/photo10.jpg" class="gallery-1" data-fancybox data-caption="Always put coffee next to the computer.">
<img src="images/photo10-t.jpg" />
</a>
</section>
<section>
<h2 class="dlw-subtitle">[2] Group Image Gallery </h2>
<p>Add the group name in data-fancybox's value, multiple images are showed as a group.</p>
<script>
$(function () {
$(".gallery-2").fancybox();
});
</script>
<a href="images/photo01.jpg" class="gallery-2" data-fancybox="group-2" data-caption="Look at the keyboard placed on the desk from the side.">
<img src="images/photo01-t.jpg" />
</a>
<a href="images/photo02.jpg" class="gallery-2" data-fancybox="group-2" data-caption="Dark coffee and notepad.">
<img src="images/photo02-t.jpg" />
</a>
<a href="images/photo03.jpg" class="gallery-2" data-fancybox="group-2" data-caption="Around the desk unified with white.">
<img src="images/photo03-t.jpg" />
</a>
<a href="images/photo04.jpg" class="gallery-2" data-fancybox="group-2" data-caption="Watch keyboard and mouse closely.">
<img src="images/photo04-t.jpg" />
</a>
<a href="images/photo05.jpg" class="gallery-2" data-fancybox="group-2" data-caption="Focus on the mouse.">
<img src="images/photo05-t.jpg" />
</a>
<a href="images/photo06.jpg" class="gallery-2" data-fancybox="group-2" data-caption="Work is completed with dual monitor.">
<img src="images/photo06-t.jpg" />
</a>
<a href="images/photo07.jpg" class="gallery-2" data-fancybox="group-2" data-caption="Writing the manuscript based on the memo.">
<img src="images/photo07-t.jpg" />
</a>
<a href="images/photo08.jpg" class="gallery-2" data-fancybox="group-2" data-caption="I am not working overtime.">
<img src="images/photo08-t.jpg" />
</a>
<a href="images/photo09.jpg" class="gallery-2" data-fancybox="group-2" data-caption="Watch the desktop from directly above.">
<img src="images/photo09-t.jpg" />
</a>
<a href="images/photo10.jpg" class="gallery-2" data-fancybox="group-2" data-caption="Always put coffee next to the computer.">
<img src="images/photo10-t.jpg" />
</a>
</section>
<section>
<h2 class="dlw-subtitle">[3] Responsive Image </h2>
<p>It is possible to change the image to be displayed according to the screen size using the data-srcset attribute. (<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images" target="_blank">Reference</a>)</p>
<script>
$(function () {
$(".gallery-3").fancybox();
});
</script>
<!-- Add data-srcset="large-image-path large-image-size, medium-image-path medium-image-size, small-image-path small-image-size" -->
<a href="images/photo01.jpg" class="gallery-3" data-fancybox="group-3" data-srcset="images/photo01-l.jpg 1280w, images/photo01-m.jpg 640w, images/photo01-s.jpg 320w" data-caption="Look at the keyboard placed on the desk from the side.">
<img src="images/photo01-t.jpg" />
</a>
<a href="images/photo02.jpg" class="gallery-3" data-fancybox="group-3" data-srcset="images/photo02-l.jpg 1280w, images/photo02-m.jpg 640w, images/photo02-s.jpg 320w" data-caption="Dark coffee and notepad.">
<img src="images/photo02-t.jpg" />
</a>
<a href="images/photo03.jpg" class="gallery-3" data-fancybox="group-3" data-srcset="images/photo03-l.jpg 1280w, images/photo03-m.jpg 640w, images/photo03-s.jpg 320w" data-caption="Around the desk unified with white.">
<img src="images/photo03-t.jpg" />
</a>
<a href="images/photo04.jpg" class="gallery-3" data-fancybox="group-3" data-srcset="images/photo04-l.jpg 1280w, images/photo04-m.jpg 640w, images/photo04-s.jpg 320w" data-caption="Watch keyboard and mouse closely.">
<img src="images/photo04-t.jpg" />
</a>
<a href="images/photo05.jpg" class="gallery-3" data-fancybox="group-3" data-srcset="images/photo05-l.jpg 1280w, images/photo05-m.jpg 640w, images/photo05-s.jpg 320w" data-caption="Focus on the mouse.">
<img src="images/photo05-t.jpg" />
</a>
<a href="images/photo06.jpg" class="gallery-3" data-fancybox="group-3" data-srcset="images/photo06-l.jpg 1280w, images/photo06-m.jpg 640w, images/photo06-s.jpg 320w" data-caption="Work is completed with dual monitor.">
<img src="images/photo06-t.jpg" />
</a>
<a href="images/photo07.jpg" class="gallery-3" data-fancybox="group-3" data-srcset="images/photo07-l.jpg 1280w, images/photo07-m.jpg 640w, images/photo07-s.jpg 320w" data-caption="Writing the manuscript based on the memo.">
<img src="images/photo07-t.jpg" />
</a>
<a href="images/photo08.jpg" class="gallery-3" data-fancybox="group-3" data-srcset="images/photo08-l.jpg 1280w, images/photo08-m.jpg 640w, images/photo08-s.jpg 320w" data-caption="I am not working overtime.">
<img src="images/photo08-t.jpg" />
</a>
<a href="images/photo09.jpg" class="gallery-3" data-fancybox="group-3" data-srcset="images/photo09-l.jpg 1280w, images/photo09-m.jpg 640w, images/photo09-s.jpg 320w" data-caption="Watch the desktop from directly above.">
<img src="images/photo09-t.jpg" />
</a>
<a href="images/photo10.jpg" class="gallery-3" data-fancybox="group-3" data-srcset="images/photo10-l.jpg 1280w, images/photo10-m.jpg 640w, images/photo10-s.jpg 320w" data-caption="Always put coffee next to the computer.">
<img src="images/photo10-t.jpg" />
</a>
</section>
<section>
<h2 class="dlw-subtitle">[4] Button Option </h2>
<p>Setting of button in the lightbox.</p>
<script>
$(function () {
$(".gallery-4").fancybox({
buttons : [
// Default
'slideShow',
'fullScreen',
'thumbs',
'share',
'close',
// Activation
'download',
'zoom'
]
});
});
</script>
<a href="images/photo01.jpg" class="gallery-4" data-fancybox="group-4" data-caption="Look at the keyboard placed on the desk from the side.">
<img src="images/photo01-t.jpg" />
</a>
<a href="images/photo02.jpg" class="gallery-4" data-fancybox="group-4" data-caption="Dark coffee and notepad.">
<img src="images/photo02-t.jpg" />
</a>
<a href="images/photo03.jpg" class="gallery-4" data-fancybox="group-4" data-caption="Around the desk unified with white.">
<img src="images/photo03-t.jpg" />
</a>
<a href="images/photo04.jpg" class="gallery-4" data-fancybox="group-4" data-caption="Watch keyboard and mouse closely.">
<img src="images/photo04-t.jpg" />
</a>
<a href="images/photo05.jpg" class="gallery-4" data-fancybox="group-4" data-caption="Focus on the mouse.">
<img src="images/photo05-t.jpg" />
</a>
<a href="images/photo06.jpg" class="gallery-4" data-fancybox="group-4" data-caption="Work is completed with dual monitor.">
<img src="images/photo06-t.jpg" />
</a>
<a href="images/photo07.jpg" class="gallery-4" data-fancybox="group-4" data-caption="Writing the manuscript based on the memo.">
<img src="images/photo07-t.jpg" />
</a>
<a href="images/photo08.jpg" class="gallery-4" data-fancybox="group-4" data-caption="I am not working overtime.">
<img src="images/photo08-t.jpg" />
</a>
<a href="images/photo09.jpg" class="gallery-4" data-fancybox="group-4" data-caption="Watch the desktop from directly above.">
<img src="images/photo09-t.jpg" />
</a>
<a href="images/photo10.jpg" class="gallery-4" data-fancybox="group-4" data-caption="Always put coffee next to the computer.">
<img src="images/photo10-t.jpg" />
</a>
</section>
<section>
<h2 class="dlw-subtitle">[5] Image Protection </h2>
<p>Disable right-click and use simple image protection for images.</p>
<script>
$(function () {
$(".gallery-5").fancybox({
// Default: false
protect : true
});
});
</script>
<a href="images/photo01.jpg" class="gallery-5" data-fancybox="group-5" data-caption="Look at the keyboard placed on the desk from the side.">
<img src="images/photo01-t.jpg" />
</a>
<a href="images/photo02.jpg" class="gallery-5" data-fancybox="group-5" data-caption="Dark coffee and notepad.">
<img src="images/photo02-t.jpg" />
</a>
<a href="images/photo03.jpg" class="gallery-5" data-fancybox="group-5" data-caption="Around the desk unified with white.">
<img src="images/photo03-t.jpg" />
</a>
<a href="images/photo04.jpg" class="gallery-5" data-fancybox="group-5" data-caption="Watch keyboard and mouse closely.">
<img src="images/photo04-t.jpg" />
</a>
<a href="images/photo05.jpg" class="gallery-5" data-fancybox="group-5" data-caption="Focus on the mouse.">
<img src="images/photo05-t.jpg" />
</a>
<a href="images/photo06.jpg" class="gallery-5" data-fancybox="group-5" data-caption="Work is completed with dual monitor.">
<img src="images/photo06-t.jpg" />
</a>
<a href="images/photo07.jpg" class="gallery-5" data-fancybox="group-5" data-caption="Writing the manuscript based on the memo.">
<img src="images/photo07-t.jpg" />
</a>
<a href="images/photo08.jpg" class="gallery-5" data-fancybox="group-5" data-caption="I am not working overtime.">
<img src="images/photo08-t.jpg" />
</a>
<a href="images/photo09.jpg" class="gallery-5" data-fancybox="group-5" data-caption="Watch the desktop from directly above.">
<img src="images/photo09-t.jpg" />
</a>
<a href="images/photo10.jpg" class="gallery-5" data-fancybox="group-5" data-caption="Always put coffee next to the computer.">
<img src="images/photo10-t.jpg" />
</a>
</section>
<section>
<h2 class="dlw-subtitle">[6] Animation Type & Transition Effect </h2>
<p>Change thumbnail click animation and transition effect.</p>
<script>
$(function () {
$(".gallery-6").fancybox({
// Default » "zoom"
animationEffect: "zoom-in-out",
// Default » "fade"
transitionEffect: "tube"
});
});
</script>
<a href="images/photo01.jpg" class="gallery-6" data-fancybox="group-6" data-caption="Look at the keyboard placed on the desk from the side.">
<img src="images/photo01-t.jpg" />
</a>
<a href="images/photo02.jpg" class="gallery-6" data-fancybox="group-6" data-caption="Dark coffee and notepad.">
<img src="images/photo02-t.jpg" />
</a>
<a href="images/photo03.jpg" class="gallery-6" data-fancybox="group-6" data-caption="Around the desk unified with white.">
<img src="images/photo03-t.jpg" />
</a>
<a href="images/photo04.jpg" class="gallery-6" data-fancybox="group-6" data-caption="Watch keyboard and mouse closely.">
<img src="images/photo04-t.jpg" />
</a>
<a href="images/photo05.jpg" class="gallery-6" data-fancybox="group-6" data-caption="Focus on the mouse.">
<img src="images/photo05-t.jpg" />
</a>
<a href="images/photo06.jpg" class="gallery-6" data-fancybox="group-6" data-caption="Work is completed with dual monitor.">
<img src="images/photo06-t.jpg" />
</a>
<a href="images/photo07.jpg" class="gallery-6" data-fancybox="group-6" data-caption="Writing the manuscript based on the memo.">
<img src="images/photo07-t.jpg" />
</a>
<a href="images/photo08.jpg" class="gallery-6" data-fancybox="group-6" data-caption="I am not working overtime.">
<img src="images/photo08-t.jpg" />
</a>
<a href="images/photo09.jpg" class="gallery-6" data-fancybox="group-6" data-caption="Watch the desktop from directly above.">
<img src="images/photo09-t.jpg" />
</a>
<a href="images/photo10.jpg" class="gallery-6" data-fancybox="group-6" data-caption="Always put coffee next to the computer.">
<img src="images/photo10-t.jpg" />
</a>
</section>
</body>
</html>
Here, design samples of various effects to text are posted.
The headline is the text indicating the nature of the article below it.
Here, design samples of headline using style sheets are posted.
The HTML <ol> element represents an ordered list of items.
Here, design samples of ol using style sheets are posted.
The HTML <hr> element represents a thematic break between paragraph-level elements.
Here, design samples of hr using style sheets are posted.
The box-shadow CSS property is used to add shadow effects around an element's frame.
Here, design samples of box-shadow property using style sheets are posted.
Using
In this example, Picturefill is added for IE.
Grid is the value of the CSS display property.
Here, layout samples of grid property are posted.
Flex is the value of the CSS display property.
It is a standard button design of Bootstrap Framework.
Hover.css is a style-sheet collection of hover effects.
Button.css is collection of CSS3 button animations.
It is a standard Card design of Bootstrap Framework.
Arctext.js is a jQuery plugin that causes a string to curve along a specified circle radius.
Lettering.js is a jQuery plugin that encloses a specified character string with one character, one word, one column by <span> tag.
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.
FitText.js is jQuery plugin that fits the font size according to the width of the parent element.
FeedEk is a jQuery plugin that parses RSS and Atom feeds and displays them.
Introduction of various embedment methods of YouTube.
FitVids is a jQuery plug-in that converts YouTube videos embedded with iframe into responsive.
xZoom is a jQuery plug-in that shows a zoom preview of the image.
It is possible to customize the preview position and zoom.
Instagram.css is a stylesheet set that filters photos like instagram.
Moment.js is a javascript that processes and displays date and time.
Bootstrap Material DatePicker is jQuery data picker plugin using Moment.js.
Multifilter is jQuery Table Filtering Plugin.
Responsive table using "display: flex;".
Not supported for rowspan.
Responsive table using "display: grid;".
Not supported for rowspan.
It is a standard Table design of Bootstrap Framework.
jQuery Mask Plugin is jQuery plugin that make mask (validation) on form field.
Select2 is a jquery plugin that makes select form more advanced.
Here is the basic usage of Select2.
jQuery Searcher is jQuery search/filtering plugin that supports various markups.
It is a standard Carousel of Bootstrap Framework.
FlexSlider is responsive jQuery slider plugin.
Here, basic single slider setting of Flexslider are posted.
FlexSlider is responsive jQuery slider plugin.
Here, basic carousel slider setting of Flexslider are posted.
slick is responsive jQuery slider plugin.
Here, basic single slider setting of slick are posted.
slick is responsive jQuery slider plugin.
Here, carousel slider setting of slick are posted.
fancyBox is jQuery lightbox plugin.
Here, basic image lightbox setting of fancyBox are posted.
fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted.
Magnific Popup is jQuery lightbox plugin.
Here, basic image lightbox setting of Magnific Popup are posted.
Magnific Popup is jQuery lightbox plugin.
Here, YouTube, Vimeo, Google Maps, inline HTML lightbox setting of Magnific Popup are posted.
Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself.
Here we summarize the CSS3-based animation settings.
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.
GreedyNav is a responsive navigation menu using jQuery which switches over the items that protruded when the screen was scaled down to dropdown.
GridTab is a lightweight jQuery plugin to create grid based responsive tabs.
jQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.
metisMenu is a jQuery plugin that expands vertical and vertical menus.
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample where the left side off-canvas expands.
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample that expands multiple off-canvases.
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a basic sample without setting options.
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a sample of more advanced setting of Filterizr.
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.
Scrolla is jQuery scroll animation plugin.
Hover.css is a style-sheet collection of hover effects.
Animate.css is a style-sheet collection of animation effects.
jQuery Easing Plugin is a plugin to extend the easing (animation effect) of jQuery.
The easing of element is posted.
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..
jQuery.mb.YTPlayer is jQuery Background player plugin.
Hint.css is a style sheet set for tooltip.
You can display tooltip just by adding class name.
Protip is a jQuery plugin that generates tooltips.
Set the position, size, etc. of the tooltip only with data attribute.
It is a standard Carousel of Bootstrap Framework.
It is a standard Card design of Bootstrap Framework.
It is a standard button design of Bootstrap Framework.
It is a standard Table design of Bootstrap Framework.
HTML5 Cheat Sheet by Make A Website Hub
CSS3 Cheat Sheet by Smashing Magazine
This is the Visual Studio Code default keyboard shortcut list.
Cheese sheet of TweenMAX, TweenLite, TimelineLite, TimelineMax by GreenSock.
On this page you can search for codes collectively.
It is a news feed about design.