Documents
- Title
- fancyBox #2. media lightbox
- Description
- fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted.
- Category
- Lightbox
- Include Files
<!-- 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>
- Basic markup
<script> $(function () { $(".gallery").fancybox({ option }); }); </script> <a href="image.jpg" data-fancybox data-caption="My caption"> <img src="thumbnail.jpg" alt="" /> </a>
- Attachment Table
fancyBox Options
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 customizationprotect 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 foundajax └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 ratiostransitionEffect 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 onlyonInit 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;
}
- Related
Source Code
<!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 #2. media lightbox</title>
<style>
.gallery{
transition: .25s;
text-decoration: none;
}
.gallery:hover{
opacity: .7;
}
/* [5] Inline HTML Content */
#inline-content{
display: none;
width: 75vw;
height: 75vh;
padding: 20px 50px;
color: #fff;
background: #1392e1;
}
</style>
</head>
<body>
<header>
<h1 class="dlw-title">fancyBox <small>#2. media lightbox</small></h1>
<p class="dlw-description">fancyBox is jQuery lightbox plugin.<br>
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted.</p>
</header>
<section>
<h2 class="dlw-subtitle">[1] YouTube</h2>
<p>Get thumbnails using YouTube API.</p>
<script>
$(function () {
$(".youtube").fancybox();
});
</script>
<a href="https://www.youtube.com/watch?v=PQWeWmKB_II" class="youtube gallery" data-fancybox="youtube" data-caption="Webb Space Telescope Update on This Week @NASA – January 12, 2018">
<img src="http://i.ytimg.com/vi/PQWeWmKB_II/mqdefault.jpg" />
</a>
<a href="https://www.youtube.com/watch?v=ZdJYKRg99Pw" class="youtube gallery" data-fancybox="youtube" data-caption="Exclusive: Deep-Sea Sharks and More Spotted by New Camera | National Geographic">
<img src="http://i.ytimg.com/vi/ZdJYKRg99Pw/mqdefault.jpg" />
</a>
<a href="https://www.youtube.com/watch?v=9bQNRVyI4I0" class="youtube gallery" data-fancybox="youtube" data-caption="Life on the African Savanna">
<img src="http://i.ytimg.com/vi/9bQNRVyI4I0/mqdefault.jpg" />
</a>
<a href="https://www.youtube.com/watch?v=zqE-ultsWt0" class="youtube gallery" data-fancybox="youtube" data-caption="BFR | Earth to Earth">
<img src="http://i.ytimg.com/vi/zqE-ultsWt0/mqdefault.jpg" />
</a>
</section>
<section>
<h2 class="dlw-subtitle">[2] Vimeo</h2>
<p>Get thumbnails using Vimeo API. (» <a href="https://deponewd.github.io/video/" target="_blank">Get Thumbnail of a Video</a>)</p>
<script>
$(function () {
$(".vimeo").fancybox();
});
</script>
<a href="https://vimeo.com/146746746" class="vimeo gallery" data-fancybox="vimeo" data-caption="I did some tests that finally led me to this video :)">
<img src="https://i.vimeocdn.com/video/545221302_200x150.jpg" />
</a>
<a href="https://vimeo.com/39945517" class="vimeo gallery" data-fancybox="vimeo" data-caption="Short movie directed in my 4th year at Supinfocom during 6 months.">
<img src="https://i.vimeocdn.com/video/275804862_200x150.jpg" />
</a>
<a href="https://vimeo.com/97428427" class="vimeo gallery" data-fancybox="vimeo" data-caption="A giant blue man driven by headless chickens through the path of life. Un géant bleu conduit par des poulets sans tête sur le chemin de la vie.">
<img src="https://i.vimeocdn.com/video/477875418_200x150.jpg" />
</a>
<a href="https://vimeo.com/80547152" class="vimeo gallery" data-fancybox="vimeo" data-caption="The first time a platypus ever went to space !">
<img src="https://i.vimeocdn.com/video/456500119_200x150.jpg" />
</a>
</section>
<section>
<h2 class="dlw-subtitle">[3] Instagram</h2>
<p>Get thumbnails using Instagram API.</p>
<script>
$(function () {
$(".instagram").fancybox();
});
</script>
<a href="https://www.instagram.com/p/BdN_zZCHWkC" class="instagram gallery" data-fancybox="instagram" data-caption="What did the astronauts on the International Space Station (@ISS) see when they looked upon the Earth from orbit in 2017? Swipe to see some of the top Earth observations from the year, as chosen by our Earth Science and Remote Sensing Unit at the Johnson Space Center (@NASAJohnson) in Houston.">
<img src="https://www.instagram.com/p/BdN_zZCHWkC/media/?size=t" />
</a>
<a href="https://www.instagram.com/p/BdX-92cncJh" class="instagram gallery" data-fancybox="instagram" data-caption="Happy New Year’s Eve! A lunar event will greet us all in the New Year. Tomorrow, January 1, the full Moon will be at or near its closest point in its orbit around Earth, making it a supermoon. ">
<img src="https://www.instagram.com/p/BdX-92cncJh/media/?size=t" />
</a>
<a href="https://www.instagram.com/p/BaWiTv5HGpa" class="instagram gallery" data-fancybox="instagram" data-caption="I’ve got sunshine….on a spacewalking day! During this month’s second of three spacewalks, NASA astronauts Randy Bresnik (@AstroKomrade) and Mark Vande Hei were welcomed with a beautiful sunrise. Bresnik posted this image to his social accounts saying, “A glorious sunrise greeted [astronaut Mark Vande Hei] and I at the start of our 2nd #spacewalk.">
<img src="https://www.instagram.com/p/BaWiTv5HGpa/media/?size=t" />
</a>
<a href="https://www.instagram.com/p/BYGoqoHBnEK" class="instagram gallery" data-fancybox="instagram" data-caption="Total(lit)y awesome! This beautiful image depicts a total solar eclipse that was seen on Monday, August 21, 2017 above Madras, Oregon.">
<img src="https://www.instagram.com/p/BYGoqoHBnEK/media/?size=t" />
</a>
</section>
<section>
<h2 class="dlw-subtitle">[4] Google Map</h2>
<script>
$(function () {
$(".googlemap").fancybox();
});
</script>
<a href="https://www.google.com/maps/place/Washington,+DC,+USA/@38.8935754,-77.0847872,12z/data=!3m1!4b1!4m5!3m4!1s0x89b7c6de5af6e45b:0xc2524522d4885d2a!8m2!3d38.9071923!4d-77.0368707" class="googlemap" data-fancybox data-caption="Washington District of Columbia, USA">
Washington District of Columbia, USA
</a>
</section>
<section>
<h2 class="dlw-subtitle">[5] Inline HTML Content</h2>
<p>Need to add "display: none;" for this content.</p>
<script>
$(function () {
$(".inline").fancybox();
});
</script>
<a href="javascript:;" data-src="#inline-content" class="inline" data-fancybox>
Inline HTML Content
</a>
<div id="inline-content" class="box">
<h1>fancyBox is jQuery lightbox plugin</h1>
<p>Need to add "display: none;" for this content.</p>
</div>
</section>
<section>
<h2 class="dlw-subtitle">[6] iframe</h2>
<script>
$(function () {
$(".iframe").fancybox({
iframe:{
css:{
// Default » width: 80%, height: 80%
width: '640px',
height: '480px'
}
}
});
});
</script>
<a href="javascript:;" data-type="iframe" data-src="https://fancyapps.com/fancybox/3/" class="iframe" data-fancybox>
iframe
</a>
</section>
;
</body>
</html>Comment
Search
- Style Design
- Text Style DesignCSS
Here, design samples of various effects to text are posted.
- Headline (Heading) Style DesignCSS
The headline is the text indicating the nature of the article below it.
Here, design samples of headline using style sheets are posted. - OL (Ordered List) Style DesignCSS
The HTML <ol> element represents an ordered list of items.
Here, design samples of ol using style sheets are posted. - HR (Separator Line) Style DesignCSS
The HTML <hr> element represents a thematic break between paragraph-level elements.
Here, design samples of hr using style sheets are posted. - Box Shadow Style DesignCSS
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.
- Layout
- How to specify a breakpoint and switch imagesJS
Using
<picture> andsrcset , it is a method of switching images according to screen size. It also corresponds to retina.
In this example, Picturefill is added for IE. - Grid LayoutCSS
Grid is the value of the CSS display property.
Here, layout samples of grid property are posted. - FlexCSS
Flex is the value of the CSS display property.
- Link & Button
- Bootstrap ButtonCSS
It is a standard button design of Bootstrap Framework.
- Hover.cssCSS
Hover.css is a style-sheet collection of hover effects.
- Button.cssCSS
Button.css is collection of CSS3 button animations.
- Card
- Bootstrap CardCSS
It is a standard Card design of Bootstrap Framework.
- Text
- Arctext.jsjQuery
Arctext.js is a jQuery plugin that causes a string to curve along a specified circle radius.
- Lettering.jsjQuery
Lettering.js is a jQuery plugin that encloses a specified character string with one character, one word, one column by <span> tag.
- Textillate.jsjQuery
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.
- FitText.jsjQuery
FitText.js is jQuery plugin that fits the font size according to the width of the parent element.
- Media
- FeedEkjQuery
FeedEk is a jQuery plugin that parses RSS and Atom feeds and displays them.
- YouTube Embed
Introduction of various embedment methods of YouTube.
- FitVids.jsjQuery
FitVids is a jQuery plug-in that converts YouTube videos embedded with iframe into responsive.
- xZoomjQuery
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.cssCSS
Instagram.css is a stylesheet set that filters photos like instagram.
- Date
- Moment.jsJS
Moment.js is a javascript that processes and displays date and time.
- Bootstrap Material DatePickerjQuery
Bootstrap Material DatePicker is jQuery data picker plugin using Moment.js.
- Table
- MultifilterjQuery
Multifilter is jQuery Table Filtering Plugin.
- Flex TableCSS
Responsive table using "display: flex;".
Not supported for rowspan. - Grid TableCSS
Responsive table using "display: grid;".
Not supported for rowspan. - Bootstrap TableCSS
It is a standard Table design of Bootstrap Framework.
- Form
- jQuery Mask PluginjQuery
jQuery Mask Plugin is jQuery plugin that make mask (validation) on form field.
- Select2 #1. Basic SettingjQuery
Select2 is a jquery plugin that makes select form more advanced.
Here is the basic usage of Select2. - jQuery SearcherjQuery
jQuery Searcher is jQuery search/filtering plugin that supports various markups.
- Slider
- Bootstrap CarouseljQuery
It is a standard Carousel of Bootstrap Framework.
- FlexSlider #1. Single SliderjQuery
FlexSlider is responsive jQuery slider plugin.
Here, basic single slider setting of Flexslider are posted. - FlexSlider #2. Carousel SliderjQuery
FlexSlider is responsive jQuery slider plugin.
Here, basic carousel slider setting of Flexslider are posted. - slick #1. Single SliderjQuery
slick is responsive jQuery slider plugin.
Here, basic single slider setting of slick are posted. - slick #2. Carousel SliderjQuery
slick is responsive jQuery slider plugin.
Here, carousel slider setting of slick are posted.
- Lightbox
- fancyBox #1. basic image lightboxjQuery
fancyBox is jQuery lightbox plugin.
Here, basic image lightbox setting of fancyBox are posted. - fancyBox #2. media lightboxjQuery
fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted. - Magnific Popup #1. basic image lightboxjQuery
Magnific Popup is jQuery lightbox plugin.
Here, basic image lightbox setting of Magnific Popup are posted. - Magnific Popup #2. media lightboxjQuery
Magnific Popup is jQuery lightbox plugin.
Here, YouTube, Vimeo, Google Maps, inline HTML lightbox setting of Magnific Popup are posted. - Magnific Popup #3. CSS3-based animation effectsjQuery
Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself.
Here we summarize the CSS3-based animation settings.
- Navigation
- animsitionjQuery
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.
- GreedyNavjQuery
GreedyNav is a responsive navigation menu using jQuery which switches over the items that protruded when the screen was scaled down to dropdown.
- GridTabjQuery
GridTab is a lightweight jQuery plugin to create grid based responsive tabs.
- jQuery.NiceScrolljQuery
jQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.
- metisMenujQuery
metisMenu is a jQuery plugin that expands vertical and vertical menus.
- fullPage.js #1. basic fullscreen scrollingjQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted. - fullPage.js #2. fullscreen scrolling with menujQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed.. - Offside.js #1. Basic Off-canvasJS
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample where the left side off-canvas expands. - Offside.js #2. Multiple Off-canvasJS
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample that expands multiple off-canvases. - Filterizr #1. Basic FilteringjQuery
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a basic sample without setting options. - Filterizr #2. Advanced FilteringjQuery
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.
- Animation
- animsitionjQuery
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.
- Textillate.jsjQuery
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.
- ScrollajQuery
Scrolla is jQuery scroll animation plugin.
- Hover.cssCSS
Hover.css is a style-sheet collection of hover effects.
- Animate.cssCSS
Animate.css is a style-sheet collection of animation effects.
- jQuery Easing PluginjQuery
jQuery Easing Plugin is a plugin to extend the easing (animation effect) of jQuery.
The easing of element is posted.
- Background
- fullPage.js #1. basic fullscreen scrollingjQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted. - fullPage.js #2. fullscreen scrolling with menujQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed.. - jquery.mb.YTPlayerjQuery
jQuery.mb.YTPlayer is jQuery Background player plugin.
- Modal / Tooltip
- Hint.cssCSS
Hint.css is a style sheet set for tooltip.
You can display tooltip just by adding class name. - ProtipjQuery
Protip is a jQuery plugin that generates tooltips.
Set the position, size, etc. of the tooltip only with data attribute.
- Social
- Framework
- Bootstrap CarouseljQuery
It is a standard Carousel of Bootstrap Framework.
- Bootstrap CardCSS
It is a standard Card design of Bootstrap Framework.
- Bootstrap ButtonCSS
It is a standard button design of Bootstrap Framework.
- Bootstrap TableCSS
It is a standard Table design of Bootstrap Framework.
- Cheat Sheet
- HTML5 Cheat Sheet
HTML5 Cheat Sheet by Make A Website Hub
- CSS3 Cheat Sheet
CSS3 Cheat Sheet by Smashing Magazine
- Visual Studio Code Keyboard Shortcuts
This is the Visual Studio Code default keyboard shortcut list.
- GreenSock Cheat Sheet
Cheese sheet of TweenMAX, TweenLite, TimelineLite, TimelineMax by GreenSock.
- Other
- Google Search
On this page you can search for codes collectively.
- Design News
It is a news feed about design.