1er commit
WP theme
This commit is contained in:
1
js/swipebox/img/icons.svg
Executable file
1
js/swipebox/img/icons.svg
Executable file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="120" height="24" viewBox="0 0 120 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M 17.384,17.705q0.00,0.536 -0.375,0.911l-1.821,1.821q-0.375,0.375 -0.911,0.375t-0.911-0.375l-3.938-3.938l-3.938,3.938q-0.375,0.375 -0.911,0.375t-0.911-0.375l-1.821-1.821q-0.375-0.375 -0.375-0.911t 0.375-0.911l 3.938-3.938l-3.938-3.938q-0.375-0.375 -0.375-0.911t 0.375-0.911l 1.821-1.821q 0.375-0.375 0.911-0.375t 0.911,0.375l 3.938,3.938l 3.938-3.938q 0.375-0.375 0.911-0.375t 0.911,0.375l 1.821,1.821q 0.375,0.375 0.375,0.911 t-0.375,0.911l-3.938,3.938l 3.938,3.938q 0.375,0.375 0.375,0.911zM 57.938,21.067l-8.732-8.719q-0.496-0.496 -0.496-1.212t 0.496-1.212l 8.732-8.719q 0.496-0.496 1.212-0.496t 1.212,0.496l 1.004,1.004q 0.496,0.496 0.496,1.212t-0.496,1.212l-6.509,6.509l 6.509,6.496q 0.496,0.509 0.496,1.219t-0.496,1.205l-1.004,1.004q-0.496,0.496 -1.212,0.496t-1.212-0.496zM 110.719,11.143q0.00,0.696 -0.496,1.219l-8.732,8.719q-0.496,0.496 -1.205,0.496t-1.205-0.496l-1.018-1.004q-0.496-0.522 -0.496-1.219q0.00-0.71 0.496-1.205l 6.509-6.509l-6.509-6.496q-0.496-0.522 -0.496-1.219q0.00-0.71 0.496-1.205l 1.018-1.004q 0.482-0.509 1.205-0.509t 1.205,0.509l 8.732,8.719q 0.496,0.496 0.496,1.205z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
594
js/swipebox/jquery.swipebox.js
Executable file
594
js/swipebox/jquery.swipebox.js
Executable file
@@ -0,0 +1,594 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
|
||||
@author Constantin Saguin - @brutaldesign
|
||||
@link http://csag.co
|
||||
@github http://github.com/brutaldesign/swipebox
|
||||
@version 1.2.1
|
||||
@license MIT License
|
||||
|
||||
----------------------------------------------------------------------------------------------*/
|
||||
|
||||
;(function (window, document, $, undefined) {
|
||||
|
||||
$.swipebox = function(elem, options) {
|
||||
|
||||
var defaults = {
|
||||
useCSS : true,
|
||||
initialIndexOnArray : 0,
|
||||
hideBarsDelay : 3000,
|
||||
videoMaxWidth : 1140,
|
||||
vimeoColor : 'CCCCCC',
|
||||
beforeOpen: null,
|
||||
afterClose: null
|
||||
},
|
||||
|
||||
plugin = this,
|
||||
elements = [], // slides array [{href:'...', title:'...'}, ...],
|
||||
elem = elem,
|
||||
selector = elem.selector,
|
||||
$selector = $(selector),
|
||||
isTouch = document.createTouch !== undefined || ('ontouchstart' in window) || ('onmsgesturechange' in window) || navigator.msMaxTouchPoints,
|
||||
supportSVG = !!(window.SVGSVGElement),
|
||||
winWidth = window.innerWidth ? window.innerWidth : $(window).width(),
|
||||
winHeight = window.innerHeight ? window.innerHeight : $(window).height(),
|
||||
html = '<div id="swipebox-overlay">\
|
||||
<div id="swipebox-slider"></div>\
|
||||
<div id="swipebox-caption"></div>\
|
||||
<div id="swipebox-action">\
|
||||
<a id="swipebox-close"></a>\
|
||||
<a id="swipebox-prev"></a>\
|
||||
<a id="swipebox-next"></a>\
|
||||
</div>\
|
||||
</div>';
|
||||
|
||||
plugin.settings = {}
|
||||
|
||||
plugin.init = function(){
|
||||
|
||||
plugin.settings = $.extend({}, defaults, options);
|
||||
|
||||
if ($.isArray(elem)) {
|
||||
|
||||
elements = elem;
|
||||
ui.target = $(window);
|
||||
ui.init(plugin.settings.initialIndexOnArray);
|
||||
|
||||
}else{
|
||||
|
||||
$selector.click(function(e){
|
||||
elements = [];
|
||||
var index , relType, relVal;
|
||||
|
||||
if (!relVal) {
|
||||
relType = 'rel';
|
||||
relVal = $(this).attr(relType);
|
||||
}
|
||||
|
||||
if (relVal && relVal !== '' && relVal !== 'nofollow') {
|
||||
$elem = $selector.filter('[' + relType + '="' + relVal + '"]');
|
||||
}else{
|
||||
$elem = $(selector);
|
||||
}
|
||||
|
||||
$elem.each(function(){
|
||||
|
||||
var title = null, href = null;
|
||||
|
||||
if( $(this).attr('title') )
|
||||
title = $(this).attr('title');
|
||||
|
||||
if( $(this).attr('href') )
|
||||
href = $(this).attr('href');
|
||||
|
||||
elements.push({
|
||||
href: href,
|
||||
title: title
|
||||
});
|
||||
});
|
||||
|
||||
index = $elem.index($(this));
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
ui.target = $(e.target);
|
||||
ui.init(index);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
plugin.refresh = function() {
|
||||
if (!$.isArray(elem)) {
|
||||
ui.destroy();
|
||||
$elem = $(selector);
|
||||
ui.actions();
|
||||
}
|
||||
}
|
||||
|
||||
var ui = {
|
||||
|
||||
init : function(index){
|
||||
if (plugin.settings.beforeOpen)
|
||||
plugin.settings.beforeOpen();
|
||||
this.target.trigger('swipebox-start');
|
||||
$.swipebox.isOpen = true;
|
||||
this.build();
|
||||
this.openSlide(index);
|
||||
this.openMedia(index);
|
||||
this.preloadMedia(index+1);
|
||||
this.preloadMedia(index-1);
|
||||
},
|
||||
|
||||
build : function(){
|
||||
var $this = this;
|
||||
|
||||
$('body').append(html);
|
||||
|
||||
if($this.doCssTrans()){
|
||||
$('#swipebox-slider').css({
|
||||
'-webkit-transition' : 'left 0.4s ease',
|
||||
'-moz-transition' : 'left 0.4s ease',
|
||||
'-o-transition' : 'left 0.4s ease',
|
||||
'-khtml-transition' : 'left 0.4s ease',
|
||||
'transition' : 'left 0.4s ease'
|
||||
});
|
||||
$('#swipebox-overlay').css({
|
||||
'-webkit-transition' : 'opacity 1s ease',
|
||||
'-moz-transition' : 'opacity 1s ease',
|
||||
'-o-transition' : 'opacity 1s ease',
|
||||
'-khtml-transition' : 'opacity 1s ease',
|
||||
'transition' : 'opacity 1s ease'
|
||||
});
|
||||
$('#swipebox-action, #swipebox-caption').css({
|
||||
'-webkit-transition' : '0.5s',
|
||||
'-moz-transition' : '0.5s',
|
||||
'-o-transition' : '0.5s',
|
||||
'-khtml-transition' : '0.5s',
|
||||
'transition' : '0.5s'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if(supportSVG){
|
||||
var bg = $('#swipebox-action #swipebox-close').css('background-image');
|
||||
bg = bg.replace('png', 'svg');
|
||||
$('#swipebox-action #swipebox-prev,#swipebox-action #swipebox-next,#swipebox-action #swipebox-close').css({
|
||||
'background-image' : bg
|
||||
});
|
||||
}
|
||||
|
||||
$.each( elements, function(){
|
||||
$('#swipebox-slider').append('<div class="slide"></div>');
|
||||
});
|
||||
|
||||
$this.setDim();
|
||||
$this.actions();
|
||||
$this.keyboard();
|
||||
$this.gesture();
|
||||
$this.animBars();
|
||||
$this.resize();
|
||||
|
||||
},
|
||||
|
||||
setDim : function(){
|
||||
|
||||
var width, height, sliderCss = {};
|
||||
|
||||
if( "onorientationchange" in window ){
|
||||
|
||||
window.addEventListener("orientationchange", function() {
|
||||
if( window.orientation == 0 ){
|
||||
width = winWidth;
|
||||
height = winHeight;
|
||||
}else if( window.orientation == 90 || window.orientation == -90 ){
|
||||
width = winHeight;
|
||||
height = winWidth;
|
||||
}
|
||||
}, false);
|
||||
|
||||
|
||||
}else{
|
||||
|
||||
width = window.innerWidth ? window.innerWidth : $(window).width();
|
||||
height = window.innerHeight ? window.innerHeight : $(window).height();
|
||||
}
|
||||
|
||||
sliderCss = {
|
||||
width : width,
|
||||
height : height
|
||||
}
|
||||
|
||||
|
||||
$('#swipebox-overlay').css(sliderCss);
|
||||
|
||||
},
|
||||
|
||||
resize : function (){
|
||||
var $this = this;
|
||||
|
||||
$(window).resize(function() {
|
||||
$this.setDim();
|
||||
}).resize();
|
||||
},
|
||||
|
||||
supportTransition : function() {
|
||||
var prefixes = 'transition WebkitTransition MozTransition OTransition msTransition KhtmlTransition'.split(' ');
|
||||
for(var i = 0; i < prefixes.length; i++) {
|
||||
if(document.createElement('div').style[prefixes[i]] !== undefined) {
|
||||
return prefixes[i];
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
doCssTrans : function(){
|
||||
if(plugin.settings.useCSS && this.supportTransition() ){
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
gesture : function(){
|
||||
if ( isTouch ){
|
||||
var $this = this,
|
||||
distance = null,
|
||||
swipMinDistance = 10,
|
||||
startCoords = {},
|
||||
endCoords = {};
|
||||
var bars = $('#swipebox-caption, #swipebox-action');
|
||||
|
||||
bars.addClass('visible-bars');
|
||||
$this.setTimeout();
|
||||
|
||||
$('body').bind('touchstart', function(e){
|
||||
|
||||
$(this).addClass('touching');
|
||||
|
||||
endCoords = e.originalEvent.targetTouches[0];
|
||||
startCoords.pageX = e.originalEvent.targetTouches[0].pageX;
|
||||
|
||||
$('.touching').bind('touchmove',function(e){
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
endCoords = e.originalEvent.targetTouches[0];
|
||||
|
||||
});
|
||||
|
||||
return false;
|
||||
|
||||
}).bind('touchend',function(e){
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
distance = endCoords.pageX - startCoords.pageX;
|
||||
|
||||
if( distance >= swipMinDistance ){
|
||||
|
||||
// swipeLeft
|
||||
$this.getPrev();
|
||||
|
||||
}else if( distance <= - swipMinDistance ){
|
||||
|
||||
// swipeRight
|
||||
$this.getNext();
|
||||
|
||||
}else{
|
||||
// tap
|
||||
if(!bars.hasClass('visible-bars')){
|
||||
$this.showBars();
|
||||
$this.setTimeout();
|
||||
}else{
|
||||
$this.clearTimeout();
|
||||
$this.hideBars();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$('.touching').off('touchmove').removeClass('touching');
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
setTimeout: function(){
|
||||
if(plugin.settings.hideBarsDelay > 0){
|
||||
var $this = this;
|
||||
$this.clearTimeout();
|
||||
$this.timeout = window.setTimeout( function(){
|
||||
$this.hideBars() },
|
||||
plugin.settings.hideBarsDelay
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
clearTimeout: function(){
|
||||
window.clearTimeout(this.timeout);
|
||||
this.timeout = null;
|
||||
},
|
||||
|
||||
showBars : function(){
|
||||
var bars = $('#swipebox-caption, #swipebox-action');
|
||||
if(this.doCssTrans()){
|
||||
bars.addClass('visible-bars');
|
||||
}else{
|
||||
$('#swipebox-caption').animate({ top : 0 }, 500);
|
||||
$('#swipebox-action').animate({ bottom : 0 }, 500);
|
||||
setTimeout(function(){
|
||||
bars.addClass('visible-bars');
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
|
||||
hideBars : function(){
|
||||
var bars = $('#swipebox-caption, #swipebox-action');
|
||||
if(this.doCssTrans()){
|
||||
bars.removeClass('visible-bars');
|
||||
}else{
|
||||
$('#swipebox-caption').animate({ top : '-50px' }, 500);
|
||||
$('#swipebox-action').animate({ bottom : '-50px' }, 500);
|
||||
setTimeout(function(){
|
||||
bars.removeClass('visible-bars');
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
|
||||
animBars : function(){
|
||||
var $this = this;
|
||||
var bars = $('#swipebox-caption, #swipebox-action');
|
||||
|
||||
bars.addClass('visible-bars');
|
||||
$this.setTimeout();
|
||||
|
||||
$('#swipebox-slider').click(function(e){
|
||||
if(!bars.hasClass('visible-bars')){
|
||||
$this.showBars();
|
||||
$this.setTimeout();
|
||||
}
|
||||
});
|
||||
|
||||
$('#swipebox-action').hover(function() {
|
||||
$this.showBars();
|
||||
bars.addClass('force-visible-bars');
|
||||
$this.clearTimeout();
|
||||
|
||||
},function() {
|
||||
bars.removeClass('force-visible-bars');
|
||||
$this.setTimeout();
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
keyboard : function(){
|
||||
var $this = this;
|
||||
$(window).bind('keyup', function(e){
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (e.keyCode == 37){
|
||||
$this.getPrev();
|
||||
}
|
||||
else if (e.keyCode==39){
|
||||
$this.getNext();
|
||||
}
|
||||
else if (e.keyCode == 27) {
|
||||
$this.closeSlide();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
actions : function(){
|
||||
var $this = this;
|
||||
|
||||
if( elements.length < 2 ){
|
||||
$('#swipebox-prev, #swipebox-next').hide();
|
||||
}else{
|
||||
$('#swipebox-prev').bind('click touchend', function(e){
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
$this.getPrev();
|
||||
$this.setTimeout();
|
||||
});
|
||||
|
||||
$('#swipebox-next').bind('click touchend', function(e){
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
$this.getNext();
|
||||
$this.setTimeout();
|
||||
});
|
||||
}
|
||||
|
||||
$('#swipebox-close').bind('click touchend', function(e){
|
||||
$this.closeSlide();
|
||||
});
|
||||
},
|
||||
|
||||
setSlide : function (index, isFirst){
|
||||
isFirst = isFirst || false;
|
||||
|
||||
var slider = $('#swipebox-slider');
|
||||
|
||||
if(this.doCssTrans()){
|
||||
slider.css({ left : (-index*100)+'%' });
|
||||
}else{
|
||||
slider.animate({ left : (-index*100)+'%' });
|
||||
}
|
||||
|
||||
$('#swipebox-slider .slide').removeClass('current');
|
||||
$('#swipebox-slider .slide').eq(index).addClass('current');
|
||||
this.setTitle(index);
|
||||
|
||||
if( isFirst ){
|
||||
slider.fadeIn();
|
||||
}
|
||||
|
||||
$('#swipebox-prev, #swipebox-next').removeClass('disabled');
|
||||
if(index == 0){
|
||||
$('#swipebox-prev').addClass('disabled');
|
||||
}else if( index == elements.length - 1 ){
|
||||
$('#swipebox-next').addClass('disabled');
|
||||
}
|
||||
},
|
||||
|
||||
openSlide : function (index){
|
||||
$('html').addClass('swipebox');
|
||||
$(window).trigger('resize'); // fix scroll bar visibility on desktop
|
||||
this.setSlide(index, true);
|
||||
},
|
||||
|
||||
preloadMedia : function (index){
|
||||
var $this = this, src = null;
|
||||
|
||||
if( elements[index] !== undefined )
|
||||
src = elements[index].href;
|
||||
|
||||
if( !$this.isVideo(src) ){
|
||||
setTimeout(function(){
|
||||
$this.openMedia(index);
|
||||
}, 1000);
|
||||
}else{
|
||||
$this.openMedia(index);
|
||||
}
|
||||
},
|
||||
|
||||
openMedia : function (index){
|
||||
var $this = this, src = null;
|
||||
|
||||
if( elements[index] !== undefined )
|
||||
src = elements[index].href;
|
||||
|
||||
if(index < 0 || index >= elements.length){
|
||||
return false;
|
||||
}
|
||||
|
||||
if( !$this.isVideo(src) ){
|
||||
$this.loadMedia(src, function(){
|
||||
$('#swipebox-slider .slide').eq(index).html(this);
|
||||
});
|
||||
}else{
|
||||
$('#swipebox-slider .slide').eq(index).html($this.getVideo(src));
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
setTitle : function (index, isFirst){
|
||||
var title = null;
|
||||
|
||||
$('#swipebox-caption').empty();
|
||||
|
||||
if( elements[index] !== undefined )
|
||||
title = elements[index].title;
|
||||
|
||||
if(title){
|
||||
$('#swipebox-caption').append(title);
|
||||
}
|
||||
},
|
||||
|
||||
isVideo : function (src){
|
||||
|
||||
if( src ){
|
||||
if(
|
||||
src.match(/youtube\.com\/watch\?v=([a-zA-Z0-9\-_]+)/)
|
||||
|| src.match(/vimeo\.com\/([0-9]*)/)
|
||||
){
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
getVideo : function(url){
|
||||
var iframe = '';
|
||||
var output = '';
|
||||
var youtubeUrl = url.match(/watch\?v=([a-zA-Z0-9\-_]+)/);
|
||||
var vimeoUrl = url.match(/vimeo\.com\/([0-9]*)/);
|
||||
if( youtubeUrl ){
|
||||
|
||||
iframe = '<iframe width="560" height="315" src="//www.youtube.com/embed/'+youtubeUrl[1]+'" frameborder="0" allowfullscreen></iframe>';
|
||||
|
||||
}else if(vimeoUrl){
|
||||
|
||||
iframe = '<iframe width="560" height="315" src="http://player.vimeo.com/video/'+vimeoUrl[1]+'?byline=0&portrait=0&color='+plugin.settings.vimeoColor+'" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
|
||||
|
||||
}
|
||||
|
||||
return '<div class="swipebox-video-container" style="max-width:'+plugin.settings.videomaxWidth+'px"><div class="swipebox-video">'+iframe+'</div></div>';
|
||||
},
|
||||
|
||||
loadMedia : function (src, callback){
|
||||
if( !this.isVideo(src) ){
|
||||
var img = $('<img>').on('load', function(){
|
||||
callback.call(img);
|
||||
});
|
||||
|
||||
img.attr('src',src);
|
||||
}
|
||||
},
|
||||
|
||||
getNext : function (){
|
||||
var $this = this;
|
||||
index = $('#swipebox-slider .slide').index($('#swipebox-slider .slide.current'));
|
||||
if(index+1 < elements.length){
|
||||
index++;
|
||||
$this.setSlide(index);
|
||||
$this.preloadMedia(index+1);
|
||||
}
|
||||
else{
|
||||
|
||||
$('#swipebox-slider').addClass('rightSpring');
|
||||
setTimeout(function(){
|
||||
$('#swipebox-slider').removeClass('rightSpring');
|
||||
},500);
|
||||
}
|
||||
},
|
||||
|
||||
getPrev : function (){
|
||||
index = $('#swipebox-slider .slide').index($('#swipebox-slider .slide.current'));
|
||||
if(index > 0){
|
||||
index--;
|
||||
this.setSlide(index);
|
||||
this.preloadMedia(index-1);
|
||||
}
|
||||
else{
|
||||
|
||||
$('#swipebox-slider').addClass('leftSpring');
|
||||
setTimeout(function(){
|
||||
$('#swipebox-slider').removeClass('leftSpring');
|
||||
},500);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
closeSlide : function (){
|
||||
$('html').removeClass('swipebox');
|
||||
$(window).trigger('resize');
|
||||
this.destroy();
|
||||
},
|
||||
|
||||
destroy : function(){
|
||||
$(window).unbind('keyup');
|
||||
$('body').unbind('touchstart');
|
||||
$('body').unbind('touchmove');
|
||||
$('body').unbind('touchend');
|
||||
$('#swipebox-slider').unbind();
|
||||
$('#swipebox-overlay').remove();
|
||||
if (!$.isArray(elem))
|
||||
elem.removeData('_swipebox');
|
||||
if ( this.target )
|
||||
this.target.trigger('swipebox-destroy');
|
||||
$.swipebox.isOpen = false;
|
||||
if (plugin.settings.afterClose)
|
||||
plugin.settings.afterClose();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
plugin.init();
|
||||
|
||||
};
|
||||
|
||||
$.fn.swipebox = function(options){
|
||||
if (!$.data(this, "_swipebox")) {
|
||||
var swipebox = new $.swipebox(this, options);
|
||||
this.data('_swipebox', swipebox);
|
||||
}
|
||||
return this.data('_swipebox');
|
||||
}
|
||||
|
||||
}(window, document, jQuery));
|
||||
10
js/swipebox/jquery.swipebox.min.js
vendored
Executable file
10
js/swipebox/jquery.swipebox.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
264
js/swipebox/swipebox.css
Executable file
264
js/swipebox/swipebox.css
Executable file
@@ -0,0 +1,264 @@
|
||||
html.swipebox {
|
||||
overflow: hidden!important;
|
||||
}
|
||||
|
||||
#swipebox-overlay img {
|
||||
border: none!important;
|
||||
}
|
||||
|
||||
#swipebox-overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99999!important;
|
||||
overflow: hidden;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#swipebox-slider {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#swipebox-slider .slide {
|
||||
background: url("img/loader.gif") no-repeat center center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
line-height: 1px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#swipebox-slider .slide:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 50%;
|
||||
width: 1px;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
#swipebox-slider .slide img,
|
||||
#swipebox-slider .slide .swipebox-video-container {
|
||||
display: inline-block;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#swipebox-slider .slide .swipebox-video-container {
|
||||
background:none;
|
||||
max-width: 1140px;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
padding:5%;
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
#swipebox-slider .slide .swipebox-video-container .swipebox-video{
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 56.25%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#swipebox-slider .slide .swipebox-video-container .swipebox-video iframe{
|
||||
width: 100%!important;
|
||||
height: 100%!important;
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
}
|
||||
|
||||
#swipebox-action, #swipebox-caption {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#swipebox-action {
|
||||
bottom: -50px;
|
||||
}
|
||||
#swipebox-action.visible-bars {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#swipebox-action.force-visible-bars {
|
||||
bottom: 0!important;
|
||||
}
|
||||
|
||||
#swipebox-caption {
|
||||
top: -50px;
|
||||
text-align: center;
|
||||
}
|
||||
#swipebox-caption.visible-bars {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#swipebox-caption.force-visible-bars {
|
||||
top: 0!important;
|
||||
}
|
||||
|
||||
#swipebox-action #swipebox-prev, #swipebox-action #swipebox-next,
|
||||
#swipebox-action #swipebox-close {
|
||||
background-image: url("img/icons.png");
|
||||
background-repeat: no-repeat;
|
||||
border: none!important;
|
||||
text-decoration: none!important;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#swipebox-action #swipebox-close {
|
||||
background-position: 15px 12px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
#swipebox-action #swipebox-prev {
|
||||
background-position: -32px 13px;
|
||||
right: 100px;
|
||||
}
|
||||
|
||||
#swipebox-action #swipebox-next {
|
||||
background-position: -78px 13px;
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
#swipebox-action #swipebox-prev.disabled,
|
||||
#swipebox-action #swipebox-next.disabled {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#swipebox-slider.rightSpring {
|
||||
-moz-animation: rightSpring 0.3s;
|
||||
-webkit-animation: rightSpring 0.3s;
|
||||
}
|
||||
|
||||
#swipebox-slider.leftSpring {
|
||||
-moz-animation: leftSpring 0.3s;
|
||||
-webkit-animation: leftSpring 0.3s;
|
||||
}
|
||||
|
||||
@-moz-keyframes rightSpring {
|
||||
0% {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
100% {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes leftSpring {
|
||||
0% {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
100% {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes rightSpring {
|
||||
0% {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
100% {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes leftSpring {
|
||||
0% {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
100% {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
#swipebox-action #swipebox-close {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#swipebox-action #swipebox-prev {
|
||||
right: 60px;
|
||||
}
|
||||
|
||||
#swipebox-action #swipebox-next {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Skin
|
||||
--------------------------*/
|
||||
#swipebox-overlay {
|
||||
background: #0d0d0d;
|
||||
}
|
||||
|
||||
#swipebox-action, #swipebox-caption {
|
||||
text-shadow: 1px 1px 1px black;
|
||||
background-color: #0d0d0d;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0d0d0d), color-stop(100%, #000000));
|
||||
background-image: -webkit-linear-gradient(#0d0d0d, #000000);
|
||||
background-image: -moz-linear-gradient(#0d0d0d, #000000);
|
||||
background-image: -o-linear-gradient(#0d0d0d, #000000);
|
||||
background-image: linear-gradient(#0d0d0d, #000000);
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95);
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
#swipebox-action {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
#swipebox-caption {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: white!important;
|
||||
font-size: 18px;
|
||||
line-height: 43px;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user