mirror of
https://github.com/adulau/brouilleursdeblanc.git
synced 2024-11-21 17:47:10 +00:00
Add Magnific Popup
- Image links now display in a lightbox
This commit is contained in:
Michael Rose
parent
5ea0426bd8
commit
f07ae0f476
6 changed files with 785 additions and 62 deletions
2
assets/css/main.min.css
vendored
2
assets/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -27,3 +27,26 @@ $('#site-nav').click(function(event){
|
|||
$(function() {
|
||||
$("article").fitVids();
|
||||
});
|
||||
|
||||
// Add lightbox class to all image links
|
||||
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.JPG'],a[href$='.png'],a[href$='.gif']").addClass("image-popup");
|
||||
|
||||
// Magnific-Popup options
|
||||
$(document).ready(function() {
|
||||
$('.image-popup').magnificPopup({
|
||||
type: 'image',
|
||||
tLoading: 'Loading image #%curr%...',
|
||||
gallery: {
|
||||
enabled: true,
|
||||
navigateByImgClick: true,
|
||||
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
|
||||
},
|
||||
image: {
|
||||
tError: '<a href="%url%">Image #%curr%</a> could not be loaded.',
|
||||
},
|
||||
removalDelay: 300, // Delay in milliseconds before popup is removed
|
||||
// Class that is added to body when popup is open.
|
||||
// make it unique to apply your CSS animations just to this exact popup
|
||||
mainClass: 'mfp-fade'
|
||||
});
|
||||
});
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
/*! Magnific Popup - v0.8.9 - 2013-06-04
|
||||
/*! Magnific Popup - v0.9.3 - 2013-07-16
|
||||
* http://dimsemenov.com/plugins/magnific-popup/
|
||||
* Copyright (c) 2013 Dmitry Semenov; */
|
||||
;(function($) {
|
||||
|
|
@ -15,6 +15,7 @@
|
|||
* Private static constants
|
||||
*/
|
||||
var CLOSE_EVENT = 'Close',
|
||||
BEFORE_CLOSE_EVENT = 'BeforeClose',
|
||||
AFTER_CLOSE_EVENT = 'AfterClose',
|
||||
BEFORE_APPEND_EVENT = 'BeforeAppend',
|
||||
MARKUP_PARSE_EVENT = 'MarkupParse',
|
||||
|
|
@ -76,7 +77,7 @@ var _mfpOn = function(name, f) {
|
|||
}
|
||||
},
|
||||
_setFocus = function() {
|
||||
(mfp.st.focus ? mfp.content.find(mfp.st.focus).eq(0) : mfp.wrap).focus();
|
||||
(mfp.st.focus ? mfp.content.find(mfp.st.focus).eq(0) : mfp.wrap).trigger('focus');
|
||||
},
|
||||
_getCloseBtn = function(type) {
|
||||
if(type !== _currPopupType || !mfp.currTemplate.closeBtn) {
|
||||
|
|
@ -116,13 +117,33 @@ var _mfpOn = function(name, f) {
|
|||
// if click is outside the content
|
||||
if( (target !== mfp.content[0] && !$.contains(mfp.content[0], target)) ) {
|
||||
if(closeOnBg) {
|
||||
// last check, if the clicked element is in DOM, (in case it's removed onclick)
|
||||
if( $.contains(document, target) ) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
} else if(closeOnContent) {
|
||||
return true;
|
||||
}
|
||||
|
||||
}
|
||||
return false;
|
||||
},
|
||||
// CSS transition detection, http://stackoverflow.com/questions/7264899/detect-css-transitions-using-javascript-and-without-modernizr
|
||||
supportsTransitions = function() {
|
||||
var s = document.createElement('p').style, // 's' for style. better to create an element if body yet to exist
|
||||
v = ['ms','O','Moz','Webkit']; // 'v' for vendor
|
||||
|
||||
if( s['transition'] !== undefined ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
while( v.length ) {
|
||||
if( v.pop() + 'Transition' in s ) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
|
|
@ -146,6 +167,8 @@ MagnificPopup.prototype = {
|
|||
mfp.isLowIE = mfp.isIE7 || mfp.isIE8;
|
||||
mfp.isAndroid = (/android/gi).test(appVersion);
|
||||
mfp.isIOS = (/iphone|ipad|ipod/gi).test(appVersion);
|
||||
mfp.supportsTransition = supportsTransitions();
|
||||
|
||||
// We disable fixed positioned lightbox on devices that don't handle it nicely.
|
||||
// If you know a better way of detecting this - let me know.
|
||||
mfp.probablyMobile = (mfp.isAndroid || mfp.isIOS || /(Opera Mini)|Kindle|webOS|BlackBerry|(Opera Mobi)|(Windows Phone)|IEMobile/i.test(navigator.userAgent) );
|
||||
|
|
@ -193,7 +216,11 @@ MagnificPopup.prototype = {
|
|||
|
||||
mfp.types = [];
|
||||
_wrapClasses = '';
|
||||
mfp.ev = data.mainEl || _document;
|
||||
if(data.mainEl && data.mainEl.length) {
|
||||
mfp.ev = data.mainEl.eq(0);
|
||||
} else {
|
||||
mfp.ev = _document;
|
||||
}
|
||||
|
||||
if(data.key) {
|
||||
if(!mfp.popupsCache[data.key]) {
|
||||
|
|
@ -209,6 +236,12 @@ MagnificPopup.prototype = {
|
|||
mfp.st = $.extend(true, {}, $.magnificPopup.defaults, data );
|
||||
mfp.fixedContentPos = mfp.st.fixedContentPos === 'auto' ? !mfp.probablyMobile : mfp.st.fixedContentPos;
|
||||
|
||||
if(mfp.st.modal) {
|
||||
mfp.st.closeOnContentClick = false;
|
||||
mfp.st.closeOnBgClick = false;
|
||||
mfp.st.showCloseBtn = false;
|
||||
mfp.st.enableEscapeKey = false;
|
||||
}
|
||||
|
||||
|
||||
// Building markup
|
||||
|
|
@ -245,6 +278,7 @@ MagnificPopup.prototype = {
|
|||
_mfpTrigger('BeforeOpen');
|
||||
|
||||
|
||||
if(mfp.st.showCloseBtn) {
|
||||
// Close button
|
||||
if(!mfp.st.closeBtnInside) {
|
||||
mfp.wrap.append( _getCloseBtn() );
|
||||
|
|
@ -254,6 +288,7 @@ MagnificPopup.prototype = {
|
|||
});
|
||||
_wrapClasses += ' mfp-close-btn-in';
|
||||
}
|
||||
}
|
||||
|
||||
if(mfp.st.alignTop) {
|
||||
_wrapClasses += ' mfp-align-top';
|
||||
|
|
@ -282,12 +317,14 @@ MagnificPopup.prototype = {
|
|||
|
||||
|
||||
|
||||
if(mfp.st.enableEscapeKey) {
|
||||
// Close on ESC key
|
||||
_document.on('keyup' + EVENT_NS, function(e) {
|
||||
if(e.keyCode === 27) {
|
||||
mfp.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
_window.on('resize' + EVENT_NS, function() {
|
||||
mfp.updateSize();
|
||||
|
|
@ -306,20 +343,20 @@ MagnificPopup.prototype = {
|
|||
var windowHeight = mfp.wH = _window.height();
|
||||
|
||||
|
||||
var bodyStyles = {};
|
||||
var windowStyles = {};
|
||||
|
||||
if( mfp.fixedContentPos ) {
|
||||
if(mfp._hasScrollBar(windowHeight)){
|
||||
var s = mfp._getScrollbarSize();
|
||||
if(s) {
|
||||
bodyStyles.paddingRight = s;
|
||||
windowStyles.paddingRight = s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(mfp.fixedContentPos) {
|
||||
if(!mfp.isIE7) {
|
||||
bodyStyles.overflow = 'hidden';
|
||||
windowStyles.overflow = 'hidden';
|
||||
} else {
|
||||
// ie7 double-scroll bug
|
||||
$('body, html').css('overflow', 'hidden');
|
||||
|
|
@ -343,7 +380,7 @@ MagnificPopup.prototype = {
|
|||
|
||||
|
||||
// remove scrollbar, add padding e.t.c
|
||||
_body.css(bodyStyles);
|
||||
$('html').css(windowStyles);
|
||||
|
||||
// add everything to DOM
|
||||
mfp.bgOverlay.add(mfp.wrap).prependTo( document.body );
|
||||
|
|
@ -384,10 +421,11 @@ MagnificPopup.prototype = {
|
|||
*/
|
||||
close: function() {
|
||||
if(!mfp.isOpen) return;
|
||||
_mfpTrigger(BEFORE_CLOSE_EVENT);
|
||||
|
||||
mfp.isOpen = false;
|
||||
// for CSS3 animation
|
||||
if(mfp.st.removalDelay && !mfp.isLowIE) {
|
||||
if(mfp.st.removalDelay && !mfp.isLowIE && mfp.supportsTransition ) {
|
||||
mfp._addClassToMFP(REMOVING_CLASS);
|
||||
setTimeout(function() {
|
||||
mfp._close();
|
||||
|
|
@ -416,13 +454,13 @@ MagnificPopup.prototype = {
|
|||
mfp._removeClassFromMFP(classesToRemove);
|
||||
|
||||
if(mfp.fixedContentPos) {
|
||||
var bodyStyles = {paddingRight: ''};
|
||||
var windowStyles = {paddingRight: ''};
|
||||
if(mfp.isIE7) {
|
||||
$('body, html').css('overflow', '');
|
||||
} else {
|
||||
bodyStyles.overflow = '';
|
||||
windowStyles.overflow = '';
|
||||
}
|
||||
_body.css(bodyStyles);
|
||||
$('html').css(windowStyles);
|
||||
}
|
||||
|
||||
_document.off('keyup' + EVENT_NS + ' focusin' + EVENT_NS);
|
||||
|
|
@ -434,14 +472,15 @@ MagnificPopup.prototype = {
|
|||
mfp.container.attr('class', 'mfp-container');
|
||||
|
||||
// remove close button from target element
|
||||
if(!mfp.st.closeBtnInside || mfp.currTemplate[mfp.currItem.type] === true ) {
|
||||
if(mfp.st.showCloseBtn &&
|
||||
(!mfp.st.closeBtnInside || mfp.currTemplate[mfp.currItem.type] === true)) {
|
||||
if(mfp.currTemplate.closeBtn)
|
||||
mfp.currTemplate.closeBtn.detach();
|
||||
}
|
||||
|
||||
|
||||
if(mfp._lastFocusedEl) {
|
||||
$(mfp._lastFocusedEl).focus(); // put tab focus back
|
||||
$(mfp._lastFocusedEl).trigger('focus'); // put tab focus back
|
||||
}
|
||||
mfp.currItem = null;
|
||||
mfp.content = null;
|
||||
|
|
@ -539,7 +578,8 @@ MagnificPopup.prototype = {
|
|||
mfp.content = newContent;
|
||||
|
||||
if(newContent) {
|
||||
if(mfp.st.closeBtnInside && mfp.currTemplate[type] === true) {
|
||||
if(mfp.st.showCloseBtn && mfp.st.closeBtnInside &&
|
||||
mfp.currTemplate[type] === true) {
|
||||
// if there is no markup, we just append close button element inside
|
||||
if(!mfp.content.find('.mfp-close').length) {
|
||||
mfp.content.append(_getCloseBtn());
|
||||
|
|
@ -632,7 +672,12 @@ MagnificPopup.prototype = {
|
|||
},
|
||||
_openClick: function(e, el, options) {
|
||||
var midClick = options.midClick !== undefined ? options.midClick : $.magnificPopup.defaults.midClick;
|
||||
if( midClick || e.which !== 2 ) {
|
||||
|
||||
|
||||
if(!midClick && ( e.which === 2 || e.ctrlKey || e.metaKey ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var disableOn = options.disableOn !== undefined ? options.disableOn : $.magnificPopup.defaults.disableOn;
|
||||
|
||||
if(disableOn) {
|
||||
|
|
@ -662,7 +707,6 @@ MagnificPopup.prototype = {
|
|||
options.items = el.find(options.delegate);
|
||||
}
|
||||
mfp.open(options);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
|
@ -692,7 +736,7 @@ MagnificPopup.prototype = {
|
|||
|
||||
mfp.preloader.html(text);
|
||||
|
||||
mfp.preloader.find('a').click(function(e) {
|
||||
mfp.preloader.find('a').on('click', function(e) {
|
||||
e.stopImmediatePropagation();
|
||||
});
|
||||
|
||||
|
|
@ -714,7 +758,7 @@ MagnificPopup.prototype = {
|
|||
mfp.wrap.removeClass(cName);
|
||||
},
|
||||
_hasScrollBar: function(winHeight) {
|
||||
return ( (mfp.isIE7 ? _document.height() : document.body.scrollHeight) > (winHeight || _window.height()) )
|
||||
return ( (mfp.isIE7 ? _document.height() : document.body.scrollHeight) > (winHeight || _window.height()) );
|
||||
},
|
||||
_parseMarkup: function(template, values, item) {
|
||||
var arr;
|
||||
|
|
@ -826,6 +870,12 @@ $.magnificPopup = {
|
|||
|
||||
closeBtnInside: true,
|
||||
|
||||
showCloseBtn: true,
|
||||
|
||||
enableEscapeKey: true,
|
||||
|
||||
modal: false,
|
||||
|
||||
alignTop: false,
|
||||
|
||||
removalDelay: 0,
|
||||
|
|
@ -1223,6 +1273,8 @@ $.magnificPopup.registerModule('image', {
|
|||
item.hasSize = true;
|
||||
item.loaded = true;
|
||||
|
||||
_mfpTrigger('ImageLoadComplete');
|
||||
|
||||
}
|
||||
else {
|
||||
// if image complete check fails 200 times (20 sec), we assume that there was an error.
|
||||
|
|
@ -1265,6 +1317,9 @@ $.magnificPopup.registerModule('image', {
|
|||
if(el.is('img')) {
|
||||
item.img = item.img.clone();
|
||||
}
|
||||
if(item.img[0].naturalWidth > 0) {
|
||||
item.hasSize = true;
|
||||
}
|
||||
}
|
||||
|
||||
mfp._parseMarkup(template, {
|
||||
|
|
@ -1305,6 +1360,193 @@ $.magnificPopup.registerModule('image', {
|
|||
|
||||
/*>>image*/
|
||||
|
||||
/*>>zoom*/
|
||||
var hasMozTransform,
|
||||
getHasMozTransform = function() {
|
||||
if(hasMozTransform === undefined) {
|
||||
hasMozTransform = document.createElement('p').style.MozTransform !== undefined;
|
||||
}
|
||||
return hasMozTransform;
|
||||
};
|
||||
|
||||
$.magnificPopup.registerModule('zoom', {
|
||||
|
||||
options: {
|
||||
enabled: false,
|
||||
easing: 'ease-in-out',
|
||||
duration: 300,
|
||||
opener: function(element) {
|
||||
return element.is('img') ? element : element.find('img');
|
||||
}
|
||||
},
|
||||
|
||||
proto: {
|
||||
|
||||
initZoom: function() {
|
||||
var zoomSt = mfp.st.zoom,
|
||||
ns = '.zoom';
|
||||
|
||||
if(!zoomSt.enabled || !mfp.supportsTransition) {
|
||||
return;
|
||||
}
|
||||
|
||||
var duration = zoomSt.duration,
|
||||
getElToAnimate = function(image) {
|
||||
var newImg = image.clone().removeAttr('style').removeAttr('class').addClass('mfp-animated-image'),
|
||||
transition = 'all '+(zoomSt.duration/1000)+'s ' + zoomSt.easing,
|
||||
cssObj = {
|
||||
position: 'fixed',
|
||||
zIndex: 9999,
|
||||
left: 0,
|
||||
top: 0,
|
||||
'-webkit-backface-visibility': 'hidden'
|
||||
},
|
||||
t = 'transition';
|
||||
|
||||
cssObj['-webkit-'+t] = cssObj['-moz-'+t] = cssObj['-o-'+t] = cssObj[t] = transition;
|
||||
|
||||
newImg.css(cssObj);
|
||||
return newImg;
|
||||
},
|
||||
showMainContent = function() {
|
||||
mfp.content.css('visibility', 'visible');
|
||||
},
|
||||
openTimeout,
|
||||
animatedImg;
|
||||
|
||||
_mfpOn('BuildControls'+ns, function() {
|
||||
if(mfp._allowZoom()) {
|
||||
|
||||
clearTimeout(openTimeout);
|
||||
mfp.content.css('visibility', 'hidden');
|
||||
|
||||
// Basically, all code below does is clones existing image, puts in on top of the current one and animated it
|
||||
|
||||
image = mfp._getItemToZoom();
|
||||
|
||||
if(!image) {
|
||||
showMainContent();
|
||||
return;
|
||||
}
|
||||
|
||||
animatedImg = getElToAnimate(image);
|
||||
|
||||
animatedImg.css( mfp._getOffset() );
|
||||
|
||||
mfp.wrap.append(animatedImg);
|
||||
|
||||
openTimeout = setTimeout(function() {
|
||||
animatedImg.css( mfp._getOffset( true ) );
|
||||
openTimeout = setTimeout(function() {
|
||||
|
||||
showMainContent();
|
||||
|
||||
setTimeout(function() {
|
||||
animatedImg.remove();
|
||||
image = animatedImg = null;
|
||||
_mfpTrigger('ZoomAnimationEnded');
|
||||
}, 16); // avoid blink when switching images
|
||||
|
||||
}, duration); // this timeout equals animation duration
|
||||
|
||||
}, 16); // by adding this timeout we avoid short glitch at the beginning of animation
|
||||
|
||||
|
||||
// Lots of timeouts...
|
||||
}
|
||||
});
|
||||
_mfpOn(BEFORE_CLOSE_EVENT+ns, function() {
|
||||
if(mfp._allowZoom()) {
|
||||
|
||||
clearTimeout(openTimeout);
|
||||
|
||||
mfp.st.removalDelay = duration;
|
||||
|
||||
if(!image) {
|
||||
image = mfp._getItemToZoom();
|
||||
if(!image) {
|
||||
return;
|
||||
}
|
||||
animatedImg = getElToAnimate(image);
|
||||
}
|
||||
|
||||
|
||||
animatedImg.css( mfp._getOffset(true) );
|
||||
mfp.wrap.append(animatedImg);
|
||||
mfp.content.css('visibility', 'hidden');
|
||||
|
||||
setTimeout(function() {
|
||||
animatedImg.css( mfp._getOffset() );
|
||||
}, 16);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
_mfpOn(CLOSE_EVENT+ns, function() {
|
||||
if(mfp._allowZoom()) {
|
||||
showMainContent();
|
||||
if(animatedImg) {
|
||||
animatedImg.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
_allowZoom: function() {
|
||||
return mfp.currItem.type === 'image';
|
||||
},
|
||||
|
||||
_getItemToZoom: function() {
|
||||
if(mfp.currItem.hasSize) {
|
||||
return mfp.currItem.img;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
// Get element postion relative to viewport
|
||||
_getOffset: function(isLarge) {
|
||||
var el;
|
||||
if(isLarge) {
|
||||
el = mfp.currItem.img;
|
||||
} else {
|
||||
el = mfp.st.zoom.opener(mfp.currItem.el || mfp.currItem);
|
||||
}
|
||||
|
||||
var offset = el.offset();
|
||||
var paddingTop = parseInt(el.css('padding-top'),10);
|
||||
var paddingBottom = parseInt(el.css('padding-bottom'),10);
|
||||
offset.top -= ( $(window).scrollTop() - paddingTop );
|
||||
|
||||
|
||||
/*
|
||||
|
||||
Animating left + top + width/height looks glitchy in Firefox, but perfect in Chrome. And vice-versa.
|
||||
|
||||
*/
|
||||
var obj = {
|
||||
width: el.width(),
|
||||
// fix Zepto height+padding issue
|
||||
height: (_isJQ ? el.innerHeight() : el[0].offsetHeight) - paddingBottom - paddingTop
|
||||
};
|
||||
|
||||
// I hate to do this, but there is no another option
|
||||
if( getHasMozTransform() ) {
|
||||
obj['-moz-transform'] = obj['transform'] = 'translate(' + offset.left + 'px,' + offset.top + 'px)';
|
||||
} else {
|
||||
obj.left = offset.left;
|
||||
obj.top = offset.top;
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
/*>>zoom*/
|
||||
|
||||
/*>>iframe*/
|
||||
|
||||
var IFRAME_NS = 'iframe',
|
||||
|
|
@ -1582,6 +1824,7 @@ $.magnificPopup.registerModule('gallery', {
|
|||
}).on('error.mfploader', function() {
|
||||
item.hasSize = true;
|
||||
item.loadError = true;
|
||||
_mfpTrigger('LazyLoadError', item);
|
||||
}).attr('src', item.src);
|
||||
}
|
||||
|
||||
|
|
|
|||
3
assets/js/scripts.min.js
vendored
3
assets/js/scripts.min.js
vendored
File diff suppressed because one or more lines are too long
454
assets/less/magnific-popup.less
Normal file
454
assets/less/magnific-popup.less
Normal file
|
|
@ -0,0 +1,454 @@
|
|||
/* Magnific Popup CSS */
|
||||
// Modified by Michael Rose
|
||||
|
||||
.mfp-bg {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 502;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
background: #0b0b0b;
|
||||
opacity: 0.8;
|
||||
filter: alpha(opacity=80); }
|
||||
|
||||
.mfp-wrap {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 503;
|
||||
position: fixed;
|
||||
outline: none !important;
|
||||
-webkit-backface-visibility: hidden; }
|
||||
|
||||
.mfp-container {
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 0 8px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
|
||||
.mfp-container:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle; }
|
||||
|
||||
.mfp-align-top .mfp-container:before {
|
||||
display: none; }
|
||||
|
||||
.mfp-content {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
z-index: 505; }
|
||||
|
||||
.mfp-inline-holder .mfp-content,
|
||||
.mfp-ajax-holder .mfp-content {
|
||||
width: 100%;
|
||||
cursor: auto;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-ajax-cur {
|
||||
cursor: progress; }
|
||||
|
||||
.mfp-zoom-out-cur,
|
||||
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
|
||||
cursor: -moz-zoom-out;
|
||||
cursor: -webkit-zoom-out;
|
||||
cursor: zoom-out; }
|
||||
|
||||
.mfp-zoom,
|
||||
.image-popup {
|
||||
cursor: pointer;
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: zoom-in; }
|
||||
|
||||
.mfp-auto-cursor .mfp-content {
|
||||
cursor: auto; }
|
||||
|
||||
.mfp-close,
|
||||
.mfp-arrow,
|
||||
.mfp-preloader,
|
||||
.mfp-counter {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none; }
|
||||
|
||||
.mfp-loading.mfp-figure {
|
||||
display: none; }
|
||||
|
||||
.mfp-hide {
|
||||
display: none !important; }
|
||||
|
||||
.mfp-preloader {
|
||||
color: #cccccc;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
margin-top: -0.8em;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
z-index: 504; }
|
||||
|
||||
.mfp-preloader a {
|
||||
color: #cccccc; }
|
||||
|
||||
.mfp-preloader a:hover {
|
||||
color: white; }
|
||||
|
||||
.mfp-s-ready .mfp-preloader {
|
||||
display: none; }
|
||||
|
||||
.mfp-s-error .mfp-content {
|
||||
display: none; }
|
||||
|
||||
button.mfp-close,
|
||||
button.mfp-arrow {
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
padding: 0;
|
||||
z-index: 506; }
|
||||
|
||||
button.mfp-close {
|
||||
background: transparent; }
|
||||
|
||||
button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
.mfp-close {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
opacity: 0.65;
|
||||
padding: 0 0 18px 10px;
|
||||
color: white;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
font-family: Arial, Baskerville, monospace; }
|
||||
.mfp-close:hover, .mfp-close:focus {
|
||||
opacity: 1; }
|
||||
.mfp-close:active {
|
||||
top: 1px; }
|
||||
|
||||
.mfp-close-btn-in .mfp-close {
|
||||
color: #333333; }
|
||||
|
||||
.mfp-image-holder .mfp-close,
|
||||
.mfp-iframe-holder .mfp-close {
|
||||
color: white;
|
||||
right: -6px;
|
||||
text-align: right;
|
||||
padding-right: 6px;
|
||||
width: 100%; }
|
||||
|
||||
.mfp-counter {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: #cccccc;
|
||||
font-size: 12px;
|
||||
line-height: 18px; }
|
||||
|
||||
.mfp-arrow {
|
||||
.hide-text();
|
||||
position: absolute;
|
||||
top: 0;
|
||||
opacity: 0.65;
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
margin-top: -55px;
|
||||
padding: 0;
|
||||
width: 90px;
|
||||
height: 110px;
|
||||
background-color: @black;
|
||||
.transition(opacity 0.2s ease-in-out);
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
|
||||
|
||||
.mfp-arrow:active {
|
||||
margin-top: -54px; }
|
||||
|
||||
.mfp-arrow:hover,
|
||||
.mfp-arrow:focus {
|
||||
opacity: 1; }
|
||||
|
||||
.mfp-arrow:before, .mfp-arrow:after,
|
||||
.mfp-arrow .mfp-b,
|
||||
.mfp-arrow .mfp-a {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-top: 35px;
|
||||
margin-left: 35px;
|
||||
border: solid transparent; }
|
||||
.mfp-arrow:after,
|
||||
.mfp-arrow .mfp-a {
|
||||
opacity: 0.8;
|
||||
border-top-width: 12px;
|
||||
border-bottom-width: 12px;
|
||||
top: 8px; }
|
||||
.mfp-arrow:before,
|
||||
.mfp-arrow .mfp-b {
|
||||
border-top-width: 20px;
|
||||
border-bottom-width: 20px; }
|
||||
|
||||
.mfp-arrow-left {
|
||||
left: 0;
|
||||
.border-radius(5px, 5px, 0, 0); }
|
||||
.mfp-arrow-left:after,
|
||||
.mfp-arrow-left .mfp-a {
|
||||
border-right: 12px solid #fff;
|
||||
left: 5px; }
|
||||
.mfp-arrow-left:before,
|
||||
.mfp-arrow-left .mfp-b {
|
||||
border-right: 20px solid #fff; }
|
||||
|
||||
.mfp-arrow-right {
|
||||
right: 0;
|
||||
.border-radius(0, 0, 5px, 5px); }
|
||||
.mfp-arrow-right:after,
|
||||
.mfp-arrow-right .mfp-a {
|
||||
border-left: 12px solid #fff;
|
||||
left: 3px; }
|
||||
.mfp-arrow-right:before,
|
||||
.mfp-arrow-right .mfp-b {
|
||||
border-left: 20px solid #fff; }
|
||||
|
||||
.mfp-iframe-holder {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px; }
|
||||
|
||||
.mfp-iframe-holder .mfp-content {
|
||||
line-height: 0;
|
||||
width: 100%;
|
||||
max-width: 900px; }
|
||||
|
||||
.mfp-iframe-scaler {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
padding-top: 56.25%; }
|
||||
|
||||
.mfp-iframe-scaler iframe {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
|
||||
background: black; }
|
||||
|
||||
.mfp-iframe-holder .mfp-close {
|
||||
top: -40px; }
|
||||
|
||||
/* Main image in popup */
|
||||
img.mfp-img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
line-height: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 0 40px;
|
||||
margin: 0 auto; }
|
||||
|
||||
/* The shadow behind the image */
|
||||
.mfp-figure:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 40px;
|
||||
bottom: 40px;
|
||||
display: block;
|
||||
right: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
z-index: -1;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }
|
||||
|
||||
.mfp-figure {
|
||||
line-height: 0; }
|
||||
|
||||
.mfp-bottom-bar {
|
||||
margin-top: -36px;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
cursor: auto; }
|
||||
|
||||
.mfp-title {
|
||||
text-align: left;
|
||||
line-height: 18px;
|
||||
color: #f3f3f3; }
|
||||
|
||||
.mfp-figure small {
|
||||
color: #bdbdbd;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 14px; }
|
||||
|
||||
.mfp-image-holder .mfp-content {
|
||||
max-width: 100%; }
|
||||
|
||||
.mfp-gallery .mfp-image-holder .mfp-figure {
|
||||
cursor: pointer; }
|
||||
|
||||
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
|
||||
/**
|
||||
* Remove all paddings around the image on small screen
|
||||
*/
|
||||
.mfp-img-mobile .mfp-image-holder {
|
||||
padding-left: 0;
|
||||
padding-right: 0; }
|
||||
|
||||
.mfp-img-mobile img.mfp-img {
|
||||
padding: 0; }
|
||||
|
||||
/* The shadow behind the image */
|
||||
.mfp-img-mobile .mfp-figure:after {
|
||||
top: 0;
|
||||
bottom: 0; }
|
||||
|
||||
.mfp-img-mobile .mfp-bottom-bar {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
top: auto;
|
||||
padding: 3px 5px;
|
||||
position: fixed;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
|
||||
.mfp-img-mobile .mfp-bottom-bar:empty {
|
||||
padding: 0; }
|
||||
|
||||
.mfp-img-mobile .mfp-counter {
|
||||
right: 5px;
|
||||
top: 3px; }
|
||||
|
||||
.mfp-img-mobile .mfp-close {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
padding: 0; }
|
||||
|
||||
.mfp-img-mobile .mfp-figure small {
|
||||
display: inline;
|
||||
margin-left: 5px; } }
|
||||
@media all and (max-width: 800px) {
|
||||
.mfp-arrow {
|
||||
-webkit-transform: scale(0.75);
|
||||
transform: scale(0.75); }
|
||||
|
||||
.mfp-arrow-left {
|
||||
-webkit-transform-origin: 0;
|
||||
transform-origin: 0; }
|
||||
|
||||
.mfp-arrow-right {
|
||||
-webkit-transform-origin: 100%;
|
||||
transform-origin: 100%; }
|
||||
|
||||
.mfp-container {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px; } }
|
||||
.mfp-ie7 .mfp-img {
|
||||
padding: 0; }
|
||||
.mfp-ie7 .mfp-bottom-bar {
|
||||
width: 600px;
|
||||
left: 50%;
|
||||
margin-left: -300px;
|
||||
margin-top: 5px;
|
||||
padding-bottom: 5px; }
|
||||
.mfp-ie7 .mfp-container {
|
||||
padding: 0; }
|
||||
.mfp-ie7 .mfp-content {
|
||||
padding-top: 44px; }
|
||||
.mfp-ie7 .mfp-close {
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding-top: 0; }
|
||||
|
||||
/**
|
||||
* Fade-zoom animation for first dialog
|
||||
*/
|
||||
|
||||
/* start state */
|
||||
.mfp-fade .zoom-anim-dialog {
|
||||
opacity: 0;
|
||||
.transition(all 0.2s ease-in-out);
|
||||
.scale(0.8);
|
||||
}
|
||||
|
||||
/* animate in */
|
||||
.mfp-fade.mfp-ready .zoom-anim-dialog {
|
||||
opacity: 1;
|
||||
.scale(1);
|
||||
}
|
||||
|
||||
/* animate out */
|
||||
.mfp-fade.mfp-removing .zoom-anim-dialog {
|
||||
.scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Dark overlay, start state */
|
||||
.mfp-fade.mfp-bg {
|
||||
opacity: 0;
|
||||
.transition(opacity 0.3s ease-out);
|
||||
}
|
||||
/* animate in */
|
||||
.mfp-fade.mfp-ready.mfp-bg {
|
||||
opacity: 0.8;
|
||||
}
|
||||
/* animate out */
|
||||
.mfp-fade.mfp-removing.mfp-bg {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -24,6 +24,8 @@
|
|||
@import "elements.less";
|
||||
// Font Awesome webfont icons =================================
|
||||
@import "font-awesome.less";
|
||||
// Magnific Popup =============================================
|
||||
@import "magnific-popup.less";
|
||||
// Standard form controls =====================================
|
||||
@import "forms.less";
|
||||
// LAYOUT =====================================================
|
||||
|
|
|
|||
Loading…
Reference in a new issue