').appendTo(o.$grid)),e.each(a.group,function(e,n){t=n.thumb,t||"image"!==n.type||(t=n.src),s.push('
")}),o.$list[0].innerHTML=s.join(""),"x"===o.opts.axis&&o.$list.width(parseInt(o.$grid.css("padding-right"),10)+a.group.length*o.$list.children().eq(0).outerWidth(!0))},focus:function(t){var e,n,a=this,i=a.$list,s=a.$grid;a.instance.current&&(e=i.children().removeClass(o).filter('[data-index="'+a.instance.current.index+'"]').addClass(o),n=e.position(),"y"===a.opts.axis&&(n.top<0||n.top>i.height()-e.outerHeight())?i.stop().animate({scrollTop:i.scrollTop()+n.top},t):"x"===a.opts.axis&&(n.left
s.scrollLeft()+(s.width()-e.outerWidth()))&&i.parent().stop().animate({scrollLeft:n.left},t))},update:function(){var t=this;t.instance.$refs.container.toggleClass("fancybox-show-thumbs",this.isVisible),t.isVisible?(t.$grid||t.create(),t.instance.trigger("onThumbsShow"),t.focus(0)):t.$grid&&t.instance.trigger("onThumbsHide"),t.instance.update()},hide:function(){this.isVisible=!1,this.update()},show:function(){this.isVisible=!0,this.update()},toggle:function(){this.isVisible=!this.isVisible,this.update()}}),e(t).on({"onInit.fb":function(t,e){var n;e&&!e.Thumbs&&(n=new a(e),n.isActive&&n.opts.autoStart===!0&&n.show())},"beforeShow.fb":function(t,e,n,o){var a=e&&e.Thumbs;a&&a.isVisible&&a.focus(o?0:250)},"afterKeydown.fb":function(t,e,n,o,a){var i=e&&e.Thumbs;i&&i.isActive&&71===a&&(o.preventDefault(),i.toggle())},"beforeClose.fb":function(t,e){var n=e&&e.Thumbs;n&&n.isVisible&&n.opts.hideOnClose!==!1&&n.$grid.hide()}})}(document,jQuery),function(t,e){"use strict";function n(t){var e={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="};return String(t).replace(/[&<>"'`=\/]/g,function(t){return e[t]})}e.extend(!0,e.fancybox.defaults,{btnTpl:{share:''},share:{url:function(t,e){return!t.currentHash&&"inline"!==e.type&&"html"!==e.type&&(e.origSrc||e.src)||window.location},tpl:''}}),e(t).on("click","[data-fancybox-share]",function(){var t,o,a=e.fancybox.getInstance(),i=a.current||null;i&&("function"===e.type(i.opts.share.url)&&(t=i.opts.share.url.apply(i,[a,i])),
+o=i.opts.share.tpl.replace(/\{\{media\}\}/g,"image"===i.type?encodeURIComponent(i.src):"").replace(/\{\{url\}\}/g,encodeURIComponent(t)).replace(/\{\{url_raw\}\}/g,n(t)).replace(/\{\{descr\}\}/g,a.$caption?encodeURIComponent(a.$caption.text()):""),e.fancybox.open({src:a.translate(a,o),type:"html",opts:{touch:!1,animationEffect:!1,afterLoad:function(t,e){a.$refs.container.one("beforeClose.fb",function(){t.close(null,0)}),e.$content.find(".fancybox-share__button").click(function(){return window.open(this.href,"Share","width=550, height=450"),!1})},mobile:{autoFocus:!1}}}))})}(document,jQuery),function(t,e,n){"use strict";function o(){var e=t.location.hash.substr(1),n=e.split("-"),o=n.length>1&&/^\+?\d+$/.test(n[n.length-1])?parseInt(n.pop(-1),10)||1:1,a=n.join("-");return{hash:e,index:o<1?1:o,gallery:a}}function a(t){""!==t.gallery&&n("[data-fancybox='"+n.escapeSelector(t.gallery)+"']").eq(t.index-1).focus().trigger("click.fb-start")}function i(t){var e,n;return!!t&&(e=t.current?t.current.opts:t.opts,n=e.hash||(e.$orig?e.$orig.data("fancybox")||e.$orig.data("fancybox-trigger"):""),""!==n&&n)}n.escapeSelector||(n.escapeSelector=function(t){var e=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\x80-\uFFFF\w-]/g,n=function(t,e){return e?"\0"===t?"�":t.slice(0,-1)+"\\"+t.charCodeAt(t.length-1).toString(16)+" ":"\\"+t};return(t+"").replace(e,n)}),n(function(){n.fancybox.defaults.hash!==!1&&(n(e).on({"onInit.fb":function(t,e){var n,a;e.group[e.currIndex].opts.hash!==!1&&(n=o(),a=i(e),a&&n.gallery&&a==n.gallery&&(e.currIndex=n.index-1))},"beforeShow.fb":function(n,o,a,s){var r;a&&a.opts.hash!==!1&&(r=i(o),r&&(o.currentHash=r+(o.group.length>1?"-"+(a.index+1):""),t.location.hash!=="#"+o.currentHash&&(s&&!o.origHash&&(o.origHash=t.location.hash),o.hashTimer&&clearTimeout(o.hashTimer),o.hashTimer=setTimeout(function(){"replaceState"in t.history?(t.history[s?"pushState":"replaceState"]({},e.title,t.location.pathname+t.location.search+"#"+o.currentHash),s&&(o.hasCreatedHistory=!0)):t.location.hash=o.currentHash,o.hashTimer=null},300))))},"beforeClose.fb":function(n,o,a){a.opts.hash!==!1&&(clearTimeout(o.hashTimer),o.currentHash&&o.hasCreatedHistory?t.history.back():o.currentHash&&("replaceState"in t.history?t.history.replaceState({},e.title,t.location.pathname+t.location.search+(o.origHash||"")):t.location.hash=o.origHash),o.currentHash=null)}}),n(t).on("hashchange.fb",function(){var t=o(),e=null;n.each(n(".fancybox-container").get().reverse(),function(t,o){var a=n(o).data("FancyBox");if(a&&a.currentHash)return e=a,!1}),e?e.currentHash===t.gallery+"-"+t.index||1===t.index&&e.currentHash==t.gallery||(e.currentHash=null,e.close()):""!==t.gallery&&a(t)}),setTimeout(function(){n.fancybox.getInstance()||a(o())},50))})}(window,document,jQuery),function(t,e){"use strict";var n=(new Date).getTime();e(t).on({"onInit.fb":function(t,e,o){e.$refs.stage.on("mousewheel DOMMouseScroll wheel MozMousePixelScroll",function(t){var o=e.current,a=(new Date).getTime();e.group.length<2||o.opts.wheel===!1||"auto"===o.opts.wheel&&"image"!==o.type||(t.preventDefault(),t.stopPropagation(),o.$slide.hasClass("fancybox-animated")||(t=t.originalEvent||t,a-n<250||(n=a,e[(-t.deltaY||-t.deltaX||t.wheelDelta||-t.detail)<0?"next":"previous"]())))})}})}(document,jQuery);
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 855dd2be..b491b3fc 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -373,7 +373,7 @@ Initialize with data attributes
</a>
- View demo on CodePen
+ View demo on CodePen
@@ -392,16 +392,19 @@
Initialize with data attributes
</a>
- View demo on CodePen
+ View demo on CodePen
If you choose this method, default settings will be applied. See
- options section for examples how to customize by changing defaults or using
- data-options
attribute.
+ options section for examples how to customize
+ by changing defaults, using
+ data-options
attribute or by initializing with
+ JavaScript.
+ Info
Sometimes you have multiple links pointing to the same source and that creates duplicates in the gallery.
To avoid that, simply use
data-fancybox-trigger
attribute with the same value used for
@@ -414,7 +417,7 @@
Initialize with data attributes
</a>
- View demo on CodePen
+ View demo on CodePen
Initialize with JavaScript
@@ -430,10 +433,11 @@ Initialize with JavaScript
- View demo on CodePen
+ View demo on CodePen
+ Info
Sometimes you might need to bind fancybox to dynamically added elements. Use
selector
option to attach click event listener for elements that exist now or in the future.
All selected items will be automatically grouped in the gallery. Example:
@@ -444,7 +448,7 @@
Initialize with JavaScript
});
- View demo on CodePen
+ View demo on CodePen
Use with Javascript
@@ -459,7 +463,7 @@ Use with Javascript
$.fancybox.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');
- View demo on CodePen
+ View demo on CodePen
@@ -476,7 +480,7 @@
Use with Javascript
}
});
- View demo on CodePen
+ View demo on CodePen
@@ -515,7 +519,7 @@ Images
</a>
- View demo on CodePen
+ View demo on CodePen
@@ -535,7 +539,7 @@
Images
<img src="thumbnail.jpg" />
</a>
- View demo on CodePen
+ View demo on CodePen
@@ -557,7 +561,7 @@
Images
});
- View demo on CodePen
+ View demo on CodePen
@@ -569,7 +573,7 @@
Images
<img src="thumbnail.jpg" />
</a>
- View demo on CodePen
+ View demo on CodePen
@@ -583,7 +587,7 @@
Images
});
- View demo on CodePen
+ View demo on CodePen
Video
@@ -623,7 +627,7 @@ Video
Your browser doesn't support HTML5 video tag.
</video>
- View demo on CodePen
+ View demo on CodePen
@@ -638,7 +642,7 @@
Video
Vimeo video - custom color
</a>
- View demo on CodePen
+ View demo on CodePen
@@ -655,7 +659,7 @@
Video
}
});
- View demo on CodePen
+ View demo on CodePen
@@ -677,7 +681,7 @@ Iframe
</a>
- View demo on CodePen
+ View demo on CodePen
@@ -702,7 +706,7 @@
Iframe
})
- View demo on CodePen
+ View demo on CodePen
@@ -763,7 +767,7 @@ Inline
Trigger the fancybox
</a>
- View demo on CodePen
+ View demo on CodePen
@@ -776,7 +780,7 @@
Inline
Info If necessary, you can make your element (and similarly any other
html content) scrollable by adding additional wrapping element and some CSS -
- view demo on CodePen.
+ view demo on CodePen.
@@ -791,7 +795,7 @@ Ajax
AJAX content
</a>
- View demo on CodePen
+ View demo on CodePen
@@ -805,7 +809,7 @@
Ajax
</a>
- View demo on CodePen
+ View demo on CodePen
@@ -832,6 +836,9 @@ Options
// Enable keyboard navigation
keyboard: true,
+ // Should allow caption to overlap the content
+ preventCaptionOverlap: true,
+
// Should display navigation arrows at the screen edges
arrows: true,
@@ -892,7 +899,7 @@ Options
iframe: {
// Iframe template
tpl:
- '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" allowfullscreen allow="fullscreen autoplay" src=""></iframe>',
+ '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" allowfullscreen allow="autoplay; fullscreen" src=""></iframe>',
// Preload iframe before displaying it
// This allows to calculate iframe content width and height
@@ -905,16 +912,16 @@ Options
// Iframe tag attributes
attr: {
- scrolling: "auto"
+ scrolling: "auto"
}
},
// For HTML5 video only
video: {
tpl:
- '<video class="fancybox-video" controls controlsList="nodownload">' +
+ '<video class="fancybox-video" controls controlsList="nodownload" poster="{{poster}}">' +
'<source src="{{src}}" type="{{format}}" />' +
- "Your browser doesn't support HTML5 video" +
+ 'Sorry, your browser doesn\'t support embedded videos, <a href="{{src}}">download</a> and watch with your favorite video player!' +
"</video>",
format: "", // custom video format
autoStart: true
@@ -982,37 +989,37 @@ Options
btnTpl: {
download:
- '<a download data-fancybox-download class="fancybox-button fancybox-button--download" title="{{DOWNLOAD}}" href="javascript:;">' +
- '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.62 17.09V19H5.38v-1.91zm-2.97-6.96L17 11.45l-5 4.87-5-4.87 1.36-1.32 2.68 2.64V5h1.92v7.77z"/></svg>' +
- "</a>",
+ '<a download data-fancybox-download class="fancybox-button fancybox-button--download" title="{{DOWNLOAD}}" href="javascript:;">' +
+ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.62 17.09V19H5.38v-1.91zm-2.97-6.96L17 11.45l-5 4.87-5-4.87 1.36-1.32 2.68 2.64V5h1.92v7.77z"/></svg>' +
+ "</a>",
zoom:
- '<button data-fancybox-zoom class="fancybox-button fancybox-button--zoom" title="{{ZOOM}}">' +
- '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.7 17.3l-3-3a5.9 5.9 0 0 0-.6-7.6 5.9 5.9 0 0 0-8.4 0 5.9 5.9 0 0 0 0 8.4 5.9 5.9 0 0 0 7.7.7l3 3a1 1 0 0 0 1.3 0c.4-.5.4-1 0-1.5zM8.1 13.8a4 4 0 0 1 0-5.7 4 4 0 0 1 5.7 0 4 4 0 0 1 0 5.7 4 4 0 0 1-5.7 0z"/></svg>' +
- "</button>",
+ '<button data-fancybox-zoom class="fancybox-button fancybox-button--zoom" title="{{ZOOM}}">' +
+ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.7 17.3l-3-3a5.9 5.9 0 0 0-.6-7.6 5.9 5.9 0 0 0-8.4 0 5.9 5.9 0 0 0 0 8.4 5.9 5.9 0 0 0 7.7.7l3 3a1 1 0 0 0 1.3 0c.4-.5.4-1 0-1.5zM8.1 13.8a4 4 0 0 1 0-5.7 4 4 0 0 1 5.7 0 4 4 0 0 1 0 5.7 4 4 0 0 1-5.7 0z"/></svg>' +
+ "</button>",
close:
- '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="{{CLOSE}}">' +
- '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 10.6L6.6 5.2 5.2 6.6l5.4 5.4-5.4 5.4 1.4 1.4 5.4-5.4 5.4 5.4 1.4-1.4-5.4-5.4 5.4-5.4-1.4-1.4-5.4 5.4z"/></svg>' +
- "</button>",
+ '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="{{CLOSE}}">' +
+ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 10.6L6.6 5.2 5.2 6.6l5.4 5.4-5.4 5.4 1.4 1.4 5.4-5.4 5.4 5.4 1.4-1.4-5.4-5.4 5.4-5.4-1.4-1.4-5.4 5.4z"/></svg>' +
+ "</button>",
// Arrows
arrowLeft:
- '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="{{PREV}}">' +
- '<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.28 15.7l-1.34 1.37L5 12l4.94-5.07 1.34 1.38-2.68 2.72H19v1.94H8.6z"/></svg></div>' +
- "</button>",
+ '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="{{PREV}}">' +
+ '<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.28 15.7l-1.34 1.37L5 12l4.94-5.07 1.34 1.38-2.68 2.72H19v1.94H8.6z"/></svg></div>' +
+ "</button>",
arrowRight:
- '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="{{NEXT}}">' +
- '<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 12.97l-2.68 2.72 1.34 1.38L19 12l-4.94-5.07-1.34 1.38 2.68 2.72H5v1.94z"/></svg></div>' +
- "</button>",
+ '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="{{NEXT}}">' +
+ '<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 12.97l-2.68 2.72 1.34 1.38L19 12l-4.94-5.07-1.34 1.38 2.68 2.72H5v1.94z"/></svg></div>' +
+ "</button>",
// This small close button will be appended to your html/inline/ajax content by default,
// if "smallBtn" option is not set to false
smallBtn:
- '<button type="button" data-fancybox-close class="fancybox-button fancybox-close-small" title="{{CLOSE}}">' +
- '<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24"><path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"/></svg>' +
- "</button>"
+ '<button type="button" data-fancybox-close class="fancybox-button fancybox-close-small" title="{{CLOSE}}">' +
+ '<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24"><path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"/></svg>' +
+ "</button>"
},
// Container is injected into this element
@@ -1054,12 +1061,12 @@ Options
// Example:
/*
media : {
- youtube : {
- params : {
- autoplay : 0
+ youtube : {
+ params : {
+ autoplay : 0
+ }
}
}
- }
*/
media: {},
@@ -1086,8 +1093,8 @@ Options
// Example:
/*
afterShow: function( instance, current ) {
- console.info( 'Clicked element:' );
- console.info( current.opts.$orig );
+ console.info( 'Clicked element:' );
+ console.info( current.opts.$orig );
}
*/
@@ -1140,6 +1147,7 @@ Options
// =============================================
mobile: {
+ preventCaptionOverlap: false,
idleTime: false,
clickContent: function(current, event) {
return current.type === "image" ? "toggleControls" : false;
@@ -1195,7 +1203,7 @@ Options
Set instance options by passing a valid object to fancybox()
method:
- $("[data-fancybox]").fancybox({
+ $('[data-fancybox="gallery"]').fancybox({
thumbs : {
autoStart : true
}
@@ -1205,7 +1213,6 @@ Options
Plugin options / defaults are exposed in
$.fancybox.defaults
namespace so you can easily adjust them globally:
-
$.fancybox.defaults.animationEffect = "fade";
@@ -1213,7 +1220,8 @@ Options
Custom options for each element individually can be set by adding a
data-options
attribute to the element.
- This attribute should contain the properly formatted JSON object.
+ This attribute should contain the properly formatted JSON object
+ (remember, strings should be wrapped in double quotes).
It is also possible to quickly set any option using
@@ -1230,7 +1238,7 @@
Options
</a>
- View demo on CodePen
+ View demo on CodePen
@@ -1300,7 +1308,7 @@ Starting fancybox
loop : false
});
- View demo on CodePen
+ View demo on CodePen
@@ -1318,7 +1326,7 @@
Starting fancybox
});
- View demo on CodePen
+ View demo on CodePen
@@ -1328,7 +1336,7 @@
Starting fancybox
$.fancybox.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');
- View demo on CodePen
+ View demo on CodePen
@@ -1342,7 +1350,7 @@
Starting fancybox
});
});
- View demo on CodePen
+ View demo on CodePen
@@ -1370,7 +1378,7 @@ Instance methods
3) From within the callback - first argument is always a reference to current instance:
- $("[data-fancybox]").fancybox({
+ $('[data-fancybox="gallery"]').fancybox({
afterShow : function( instance, current ) {
console.info( instance );
}
@@ -1600,8 +1608,10 @@ Modules
+ Couple of examples
+
- Couple of examples. Show thumbnails on start:
+ Show thumbnails on start:
$('[data-fancybox="images"]').fancybox({
@@ -1610,7 +1620,7 @@ Modules
}
});
- View demo on CodePen
+ View demo on CodePen
@@ -1631,7 +1641,7 @@
Modules
}
});
- View demo on CodePen
+ View demo on CodePen
@@ -1700,7 +1710,7 @@
</nav>
- View demo on CodePen
+ View demo on CodePen
@@ -1740,7 +1750,7 @@
}
});
- View demo on CodePen
+ View demo on CodePen
@@ -1756,7 +1766,7 @@
}
});
- View demo on CodePen
+ View demo on CodePen
@@ -1771,7 +1781,7 @@
}
});
- View demo on CodePen
+ View demo on CodePen
@@ -1801,7 +1811,7 @@
]
});
- View demo on CodePen
+ View demo on CodePen
@@ -1813,7 +1823,7 @@
use CSS to change position or dimension for each block (e.g., content area, caption or thumbnail grid).
This gives you freedom to completely change the look and feel of the modal window, if needed.
- View demo on CodePen
+ View demo on CodePen
@@ -1836,7 +1846,7 @@
- View demo on CodePen
+ View demo on CodePen
@@ -1858,8 +1868,7 @@
// Skip cloned elements
$().fancybox({
selector : selector,
- backFocus : false,
- animationEffect : "fade"
+ backFocus : false
});
// Attach custom click event on cloned elements,
@@ -1883,7 +1892,7 @@
arrows : false
});
- View demo on CodePen
+ View demo on CodePen
diff --git a/package.json b/package.json
index 10278d20..3e744199 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "@fancyapps/fancybox",
"description": "Touch enabled, responsive and fully customizable jQuery lightbox script",
- "version": "3.4.2",
+ "version": "3.5.0",
"homepage": "https://fancyapps.com/fancybox/3/",
"main": "dist/jquery.fancybox.js",
"style": "dist/jquery.fancybox.css",
diff --git a/src/css/core.css b/src/css/core.css
index b6a4057c..bdaa3702 100644
--- a/src/css/core.css
+++ b/src/css/core.css
@@ -15,7 +15,7 @@ body.compensate-for-scrollbar {
}
.fancybox-container {
- backface-visibility: hidden;
+ -webkit-backface-visibility: hidden;
height: 100%;
left: 0;
outline: none;
@@ -57,7 +57,7 @@ body.compensate-for-scrollbar {
}
.fancybox-is-open .fancybox-bg {
- opacity: .87;
+ opacity: .9;
transition-timing-function: cubic-bezier(.22, .61, .36, 1);
}
@@ -122,7 +122,7 @@ body.compensate-for-scrollbar {
outline: none;
overflow: auto;
-webkit-overflow-scrolling: touch;
- padding: 44px 44px 0 44px;
+ padding: 44px;
position: absolute;
text-align: center;
top: 0;
@@ -148,13 +148,9 @@ body.compensate-for-scrollbar {
display: block;
}
-.fancybox-slide--next {
- z-index: 99995;
-}
-
.fancybox-slide--image {
overflow: hidden;
- padding: 44px 0 0 0;
+ padding: 44px 0;
}
.fancybox-slide--image::before {
@@ -162,13 +158,13 @@ body.compensate-for-scrollbar {
}
.fancybox-slide--html {
- padding: 6px 6px 0 6px;
+ padding: 6px;
}
.fancybox-content {
background: #fff;
display: inline-block;
- margin: 0 0 44px 0;
+ margin: 0;
max-width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
@@ -196,10 +192,6 @@ body.compensate-for-scrollbar {
z-index: 99995;
}
-.fancybox-slide--html .fancybox-content {
- margin: 0 0 6px 0;
-}
-
.fancybox-can-zoomOut .fancybox-content {
cursor: zoom-out;
}
@@ -244,7 +236,7 @@ body.compensate-for-scrollbar {
.fancybox-slide--video .fancybox-content,
.fancybox-slide--map .fancybox-content,
.fancybox-slide--iframe .fancybox-content {
- height: calc(100% - 44px);
+ height: 100%;
overflow: visible;
padding: 0;
width: 100%;
@@ -271,10 +263,16 @@ body.compensate-for-scrollbar {
margin: 0;
overflow: hidden;
padding: 0;
- vertical-align: top;
width: 100%;
}
+/* Fix iOS */
+.fancybox-iframe {
+ left: 0;
+ position: absolute;
+ top: 0;
+}
+
.fancybox-error {
background: #fff;
cursor: default;
@@ -328,8 +326,6 @@ body.compensate-for-scrollbar {
outline: 1px dotted;
}
-.fancybox-button.disabled,
-.fancybox-button.disabled:hover,
.fancybox-button[disabled],
.fancybox-button[disabled]:hover {
color: #888;
@@ -337,6 +333,11 @@ body.compensate-for-scrollbar {
outline: none;
}
+/* Fix IE11 */
+.fancybox-button div {
+ height: 100%;
+}
+
.fancybox-button svg {
display: block;
height: 100%;
@@ -401,6 +402,10 @@ body.compensate-for-scrollbar {
top: 0;
}
+.fancybox-slide--image.fancybox-is-scaling .fancybox-content {
+ overflow: hidden;
+}
+
.fancybox-is-scaling .fancybox-close-small,
.fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small {
display: none;
@@ -409,9 +414,8 @@ body.compensate-for-scrollbar {
/* Navigation arrows */
.fancybox-navigation .fancybox-button {
- background: transparent;
+ background-clip: content-box;
height: 100px;
- margin: 0;
opacity: 0;
position: absolute;
top: calc(50% - 50px);
@@ -419,8 +423,6 @@ body.compensate-for-scrollbar {
}
.fancybox-navigation .fancybox-button div {
- background: rgba(30, 30, 30, .6);
- height: 100%;
padding: 7px;
}
@@ -438,17 +440,19 @@ body.compensate-for-scrollbar {
.fancybox-caption {
bottom: 0;
- color: #fff;
+ color: #eee;
font-size: 14px;
font-weight: 400;
left: 0;
line-height: 1.5;
padding: 25px 44px 25px 44px;
right: 0;
+ text-align: center;
+ z-index: 99996;
}
.fancybox-caption::before {
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAEtCAQAAABjBcL7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHRJREFUKM+Vk8EOgDAIQ0vj/3+xBw8qIZZueFnIKC90MCAI8DlrkHGeqqGIU6lVigrBtpCWqeRWoHDNqs0F7VNVBVxmHRlvoVqjaYkdnDIaivH2HqZ5+oZj3JUzWB+cOz4G48Bg+tsJ/tqu4dLC/4Xb+0GcF5BwBC0AA53qAAAAAElFTkSuQmCC);
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAD6CAQAAADKSeXYAAAAYklEQVQoz42RwQ3AMAgDjfcfup8WoRykfBAK5mQHKSz5rbXJPis1hjiV3CIqgG0hLZPkVkA4p4x5oR1bVeDrdCLrW2Q0D5bcwY3TGMHbdw3mPRuOtaspYP1w//G1OIcW148H0DMCqI/3mMMAAAAASUVORK5CYII=);
background-repeat: repeat-x;
background-size: contain;
bottom: 0;
@@ -458,20 +462,10 @@ body.compensate-for-scrollbar {
pointer-events: none;
position: absolute;
right: 0;
- top: -25px;
+ top: -44px;
z-index: -1;
}
-.fancybox-caption::after {
- border-bottom: 1px solid rgba(255, 255, 255, .3);
- content: '';
- display: block;
- left: 44px;
- position: absolute;
- right: 44px;
- top: 0;
-}
-
.fancybox-caption a,
.fancybox-caption a:link,
.fancybox-caption a:visited {
@@ -611,17 +605,17 @@ body.compensate-for-scrollbar {
/* Styling for Small-Screen Devices */
@media all and (max-height: 576px) {
+ .fancybox-caption {
+ padding: 12px;
+ }
+
.fancybox-slide {
padding-left: 6px;
padding-right: 6px;
}
.fancybox-slide--image {
- padding: 6px 0 0 0;
- }
-
- .fancybox-slide--image .fancybox-content {
- margin-bottom: 6px;
+ padding: 6px 0;
}
.fancybox-slide--image .fancybox-close-small {
diff --git a/src/css/thumbs.css b/src/css/thumbs.css
index f07ea650..9b1c1633 100644
--- a/src/css/thumbs.css
+++ b/src/css/thumbs.css
@@ -104,7 +104,7 @@
}
/* Styling for Small-Screen Devices */
-@media all and (max-width: 768px) {
+@media all and (max-width: 576px) {
.fancybox-thumbs {
width: 110px;
}
diff --git a/src/js/core.js b/src/js/core.js
index da469452..dc5d8684 100644
--- a/src/js/core.js
+++ b/src/js/core.js
@@ -38,6 +38,9 @@
// Enable keyboard navigation
keyboard: true,
+ // Should allow caption to overlap the content
+ preventCaptionOverlap: true,
+
// Should display navigation arrows at the screen edges
arrows: true,
@@ -98,7 +101,7 @@
iframe: {
// Iframe template
tpl:
- '',
+ '',
// Preload iframe before displaying it
// This allows to calculate iframe content width and height
@@ -118,9 +121,9 @@
// For HTML5 video only
video: {
tpl:
- '