Листинг кода 1
;( function ( window, document, $, undefined ) {
$.swipebox = function( elem, options ) {
// Default options
var ui,
defaults = {
useSVG: true,
useCSS: true, // false заставит использовать jQuery для анимации
initialIndexOnArray: 0, // индекс изображения для инициализации при передаче массива
removeBarsOnMobile: true, // false отобразит верхнюю панель навигации на мобильных устройствах
hideCloseButtonOnMobile: true, // true скроет кнопку закрытия на мобильных устройствах
hideBarsDelay: 0, // задержка перед скрытием баров на рабочем столе
videoMaxWidth: 1140, // максимальная ширина видео
beforeOpen: function(){} , // до открытия
afterOpen: null, // после открытия
afterClose: function(){}, // после закрытия
afterMedia: function(){}, // после загрузки носителя
nextSlide: 'next',
prevSlide: 'prev',
loopAtEnd: true, // true вернется к первому изображению после достижения последнего изображения
autoplayVideos: false, // true будет автоматически воспроизводить видео Youtube и Vimeo
queryStringData: {}, // простой объект с настраиваемыми аргументами строки запроса для передачи / переопределения для URL-адресов видео,
toggleClassOnLoad: '' // CSS-класс, который может быть переключен при загрузке слайда (например, «скрытый» Bootstrap)
},
plugin = this,
elements = [], // slides array [ { href:'...', title:'...' }, ...],
$elem,
selector = elem.selector,
$selector = $( selector ),
isMobile = navigator.userAgent.match( /(iPad)|(iPhone)|(iPod)|(Android)|(PlayBook)|(BB10)|(BlackBerry)|(Opera Mini)|(IEMobile)|(webOS)|(MeeGo)/i ),
isTouch = isMobile !== null || document.createTouch !== undefined || ( 'ontouchstart' in window ) || ( 'onmsgesturechange' in window ) || navigator.msMaxTouchPoints,
supportSVG = !! document.createElementNS && !! document.createElementNS( 'http://www.w3.org/2000/svg', 'svg').createSVGRect,
winWidth = window.innerWidth ? window.innerWidth : $( window ).width(),
winHeight = window.innerHeight ? window.innerHeight : $( window ).height(),
/* jshint multistr: true */
html = '<div id="swipebox-overlay">\
<div id="swipebox-slider"></div>\
<div id="swipebox-caption"></div>\
<div id="swipebox-action">\
<a id="swipebox-prev" class="slide-kn-prev"></a>\
<a id="swipebox-next" class="slide-kn-next"></a>\
</div>\
<div id="cena-slide" class="slide-cena-art"></div>\
<div id="art-slider-caption"></div>\
<a id="art-kn-slide-kupit" class="slp art-slide-zakrit" href="#slp"><div>Купить в 1 клик</div></a>\
<a id="art-kn-slide-close" class="art-slide-zakrit"><div><img src="/catalog/view/javascript/jquery/swipebox/source/img/kr.png"></div></a>\
<a id="art-kn-slide-close1" class="art-slide-zakrit"><div><img src="/catalog/view/javascript/jquery/swipebox/source/img/times.png"></div></a>\
<a id="art-kn-slide-prev" class="slide-kn-prev"><div class="art-kn-slide-prev"><img src="catalog/view/javascript/jquery/swipebox/source/img/chevron-left.png"></div></a>\
<a id="art-kn-slide-next" class="slide-kn-next"><div class="art-kn-slide-next">\
<img src="catalog/view/javascript/jquery/swipebox/source/img/chevron-right.png"></div></a>\
<a id="art-kn-slide-tel-a" class="telo-sl" href=""><div></div></a>\
</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 {
$( document ).on( 'click', selector, function( event ) {
// console.log( isTouch );
if ( event.target.parentNode.className === 'slide current' ) {
return false;
}
if ( ! $.isArray( elem ) ) {
ui.destroy();
$elem = $( selector );
ui.actions();
}
elements = [];
var index , relType, relVal;
// Allow for HTML5 compliant attribute before legacy use of rel
if ( ! relVal ) {
relType = 'data-rel';
relVal = $( this ).attr( relType );
}
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 ) );
event.preventDefault();
event.stopPropagation();
ui.target = $( event.target );
ui.init( index );
} );
}
};
ui = {
/**
* Initiate Swipebox
*/
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 );
if ( plugin.settings.afterOpen ) {
plugin.settings.afterOpen();
}
},
/**
* Built HTML containers and fire main functions
*/
build : function () {
var $this = this, bg;
$( '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, #art-kn-slide-tel-a, #art-kn-slide-close' ).css( {
'-webkit-transition' : '0.5s',
'-moz-transition' : '0.5s',
'-o-transition' : '0.5s',
'-khtml-transition' : '0.5s',
'transition' : '0.5s'
} );
}
if ( supportSVG && plugin.settings.useSVG === true ) {
$( '#swipebox-action #swipebox-prev,#swipebox-action #swipebox-next' ).css( {
'background-image' : bg
} );
}
if ( isMobile && plugin.settings.hideBarsOnMobile === true ) {
$( '#swipebox-action, #swipebox-caption, #art-kn-slide-close' ).hide();
}
$.each( elements, function() {
$( '#swipebox-slider' ).append( '<div class="slide"></div>' );
} );
$this.setDim();
$this.actions();
if ( isTouch ) {
$this.gesture();
}
// Devices can have both touch and keyboard input so always allow key events
$this.keyboard();
$this.animBars();
$this.resize();
},
/**
* Set dimensions depending on windows width and height
*/
setDim : function () {
var width, height, sliderCss = {};
// Reset dimensions on mobile orientation change
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 );
},
/**
* Reset dimensions on window resize envent
*/
resize : function () {
var $this = this;
$( window ).resize( function() {
$this.setDim();
} ).resize();
},
/**
* Check if device supports CSS transitions
*/
supportTransition : function () {
var prefixes = 'transition WebkitTransition MozTransition OTransition msTransition KhtmlTransition'.split( ' ' ),
i;
for ( i = 0; i < prefixes.length; i++ ) {
if ( document.createElement( 'div' ).style[ prefixes[i] ] !== undefined ) {
return prefixes[i];
}
}
return false;
},