preview site for fix and fresh
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,13 @@
|
||||
/*
|
||||
* touchSwipe - jQuery Plugin
|
||||
* https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
|
||||
* http://labs.skinkers.com/touchSwipe/
|
||||
* http://plugins.jquery.com/project/touchSwipe
|
||||
*
|
||||
* Copyright (c) 2010 Matt Bryson (www.skinkers.com)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
*
|
||||
* $version: 1.3.3
|
||||
*/
|
||||
|
||||
(function(g){function P(c){if(c&&void 0===c.allowPageScroll&&(void 0!==c.swipe||void 0!==c.swipeStatus))c.allowPageScroll=G;c||(c={});c=g.extend({},g.fn.swipe.defaults,c);return this.each(function(){var b=g(this),f=b.data(w);f||(f=new W(this,c),b.data(w,f))})}function W(c,b){var f,p,r,s;function H(a){var a=a.originalEvent,c,Q=n?a.touches[0]:a;d=R;n?h=a.touches.length:a.preventDefault();i=0;j=null;k=0;!n||h===b.fingers||b.fingers===x?(r=f=Q.pageX,s=p=Q.pageY,y=(new Date).getTime(),b.swipeStatus&&(c=l(a,d))):t(a);if(!1===c)return d=m,l(a,d),c;e.bind(I,J);e.bind(K,L)}function J(a){a=a.originalEvent;if(!(d===q||d===m)){var c,e=n?a.touches[0]:a;f=e.pageX;p=e.pageY;u=(new Date).getTime();j=S();n&&(h=a.touches.length);d=z;var e=a,g=j;if(b.allowPageScroll===G)e.preventDefault();else{var o=b.allowPageScroll===T;switch(g){case v:(b.swipeLeft&&o||!o&&b.allowPageScroll!=M)&&e.preventDefault();break;case A:(b.swipeRight&&o||!o&&b.allowPageScroll!=M)&&e.preventDefault();break;case B:(b.swipeUp&&o||!o&&b.allowPageScroll!=N)&&e.preventDefault();break;case C:(b.swipeDown&&o||!o&&b.allowPageScroll!=N)&&e.preventDefault()}}h===b.fingers||b.fingers===x||!n?(i=U(),k=u-y,b.swipeStatus&&(c=l(a,d,j,i,k)),b.triggerOnTouchEnd||(e=!(b.maxTimeThreshold?!(k>=b.maxTimeThreshold):1),!0===D()?(d=q,c=l(a,d)):e&&(d=m,l(a,d)))):(d=m,l(a,d));!1===c&&(d=m,l(a,d))}}function L(a){a=a.originalEvent;u=(new Date).getTime();i=U();j=S();k=u-y;if(b.triggerOnTouchEnd||!1===b.triggerOnTouchEnd&&d===z)if(d=q,(h===b.fingers||b.fingers===x||!n)&&0!==f){var c=!(b.maxTimeThreshold?!(k>=b.maxTimeThreshold):1);if((!0===D()||null===D())&&!c)l(a,d);else if(c||!1===D())d=m,l(a,d)}else d=m,l(a,d);else d===z&&(d=m,l(a,d));e.unbind(I,J,!1);e.unbind(K,L,!1)}function t(){y=u=p=f=s=r=h=0}function l(a,c){var d=void 0;b.swipeStatus&&(d=b.swipeStatus.call(e,a,c,j||null,i||0,k||0,h));if(c===m&&b.click&&(1===h||!n)&&(isNaN(i)||0===i))d=b.click.call(e,a,a.target);if(c==q)switch(b.swipe&&(d=b.swipe.call(e,a,j,i,k,h)),j){case v:b.swipeLeft&&(d=b.swipeLeft.call(e,a,j,i,k,h));break;case A:b.swipeRight&&(d=b.swipeRight.call(e,a,j,i,k,h));break;case B:b.swipeUp&&(d=b.swipeUp.call(e,a,j,i,k,h));break;case C:b.swipeDown&&(d=b.swipeDown.call(e,a,j,i,k,h))}(c===m||c===q)&&t(a);return d}function D(){return null!==b.threshold?i>=b.threshold:null}function U(){return Math.round(Math.sqrt(Math.pow(f-r,2)+Math.pow(p-s,2)))}function S(){var a;a=Math.atan2(p-s,r-f);a=Math.round(180*a/Math.PI);0>a&&(a=360-Math.abs(a));return 45>=a&&0<=a?v:360>=a&&315<=a?v:135<=a&&225>=a?A:45<a&&135>a?C:B}function V(){e.unbind(E,H);e.unbind(F,t);e.unbind(I,J);e.unbind(K,L)}var O=n||!b.fallbackToMouseEvents,E=O?"touchstart":"mousedown",I=O?"touchmove":"mousemove",K=O?"touchend":"mouseup",F="touchcancel",i=0,j=null,k=0,e=g(c),d="start",h=0,y=p=f=s=r=0,u=0;try{e.bind(E,H),e.bind(F,t)}catch(P){g.error("events not supported "+E+","+F+" on jQuery.swipe")}this.enable=function(){e.bind(E,H);e.bind(F,t);return e};this.disable=function(){V();return e};this.destroy=function(){V();e.data(w,null);return e}}var v="left",A="right",B="up",C="down",G="none",T="auto",M="horizontal",N="vertical",x="all",R="start",z="move",q="end",m="cancel",n="ontouchstart"in window,w="TouchSwipe";g.fn.swipe=function(c){var b=g(this),f=b.data(w);if(f&&"string"===typeof c){if(f[c])return f[c].apply(this,Array.prototype.slice.call(arguments,1));g.error("Method "+c+" does not exist on jQuery.swipe")}else if(!f&&("object"===typeof c||!c))return P.apply(this,arguments);return b};g.fn.swipe.defaults={fingers:1,threshold:75,maxTimeThreshold:null,swipe:null,swipeLeft:null,swipeRight:null,swipeUp:null,swipeDown:null,swipeStatus:null,click:null,triggerOnTouchEnd:!0,allowPageScroll:"auto",fallbackToMouseEvents:!0};g.fn.swipe.phases={PHASE_START:R,PHASE_MOVE:z,PHASE_END:q,PHASE_CANCEL:m};g.fn.swipe.directions={LEFT:v,RIGHT:A,UP:B,DOWN:C};g.fn.swipe.pageScroll={NONE:G,HORIZONTAL:M,VERTICAL:N,AUTO:T};g.fn.swipe.fingers={ONE:1,TWO:2,THREE:3,ALL:x}})(jQuery);
|
||||
@@ -0,0 +1,160 @@
|
||||
/*!
|
||||
* jQuery UI Touch Punch 0.2.2
|
||||
*
|
||||
* Copyright 2011, Dave Furfero
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
*
|
||||
* Depends:
|
||||
* jquery.ui.widget.js
|
||||
* jquery.ui.mouse.js
|
||||
*/
|
||||
(function ($) {
|
||||
|
||||
// Detect touch support
|
||||
$.support.touch = 'ontouchend' in document;
|
||||
|
||||
// Ignore browsers without touch support
|
||||
if (!$.support.touch) {
|
||||
return;
|
||||
}
|
||||
|
||||
var mouseProto = $.ui.mouse.prototype,
|
||||
_mouseInit = mouseProto._mouseInit,
|
||||
touchHandled;
|
||||
|
||||
/**
|
||||
* Simulate a mouse event based on a corresponding touch event
|
||||
* @param {Object} event A touch event
|
||||
* @param {String} simulatedType The corresponding mouse event
|
||||
*/
|
||||
function simulateMouseEvent (event, simulatedType) {
|
||||
|
||||
// Ignore multi-touch events
|
||||
if (event.originalEvent.touches.length > 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
var touch = event.originalEvent.changedTouches[0],
|
||||
simulatedEvent = document.createEvent('MouseEvents');
|
||||
|
||||
// Initialize the simulated mouse event using the touch event's coordinates
|
||||
simulatedEvent.initMouseEvent(
|
||||
simulatedType, // type
|
||||
true, // bubbles
|
||||
true, // cancelable
|
||||
window, // view
|
||||
1, // detail
|
||||
touch.screenX, // screenX
|
||||
touch.screenY, // screenY
|
||||
touch.clientX, // clientX
|
||||
touch.clientY, // clientY
|
||||
false, // ctrlKey
|
||||
false, // altKey
|
||||
false, // shiftKey
|
||||
false, // metaKey
|
||||
0, // button
|
||||
null // relatedTarget
|
||||
);
|
||||
|
||||
// Dispatch the simulated event to the target element
|
||||
event.target.dispatchEvent(simulatedEvent);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle the jQuery UI widget's touchstart events
|
||||
* @param {Object} event The widget element's touchstart event
|
||||
*/
|
||||
mouseProto._touchStart = function (event) {
|
||||
|
||||
var self = this;
|
||||
|
||||
// Ignore the event if another widget is already being handled
|
||||
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set the flag to prevent other widgets from inheriting the touch event
|
||||
touchHandled = true;
|
||||
|
||||
// Track movement to determine if interaction was a click
|
||||
self._touchMoved = false;
|
||||
|
||||
// Simulate the mouseover event
|
||||
simulateMouseEvent(event, 'mouseover');
|
||||
|
||||
// Simulate the mousemove event
|
||||
simulateMouseEvent(event, 'mousemove');
|
||||
|
||||
// Simulate the mousedown event
|
||||
simulateMouseEvent(event, 'mousedown');
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle the jQuery UI widget's touchmove events
|
||||
* @param {Object} event The document's touchmove event
|
||||
*/
|
||||
mouseProto._touchMove = function (event) {
|
||||
|
||||
// Ignore event if not handled
|
||||
if (!touchHandled) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Interaction was not a click
|
||||
this._touchMoved = true;
|
||||
|
||||
// Simulate the mousemove event
|
||||
simulateMouseEvent(event, 'mousemove');
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle the jQuery UI widget's touchend events
|
||||
* @param {Object} event The document's touchend event
|
||||
*/
|
||||
mouseProto._touchEnd = function (event) {
|
||||
|
||||
// Ignore event if not handled
|
||||
if (!touchHandled) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Simulate the mouseup event
|
||||
simulateMouseEvent(event, 'mouseup');
|
||||
|
||||
// Simulate the mouseout event
|
||||
simulateMouseEvent(event, 'mouseout');
|
||||
|
||||
// If the touch interaction did not move, it should trigger a click
|
||||
if (!this._touchMoved) {
|
||||
|
||||
// Simulate the click event
|
||||
simulateMouseEvent(event, 'click');
|
||||
}
|
||||
|
||||
// Unset the flag to allow other widgets to inherit the touch event
|
||||
touchHandled = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* A duck punch of the $.ui.mouse _mouseInit method to support touch events.
|
||||
* This method extends the widget with bound touch event handlers that
|
||||
* translate touch events to mouse events and pass them to the widget's
|
||||
* original mouse event handling methods.
|
||||
*/
|
||||
mouseProto._mouseInit = function () {
|
||||
|
||||
var self = this;
|
||||
|
||||
// Delegate the touch handlers to the widget's element
|
||||
self.element
|
||||
.bind('touchstart', $.proxy(self, '_touchStart'))
|
||||
.bind('touchmove', $.proxy(self, '_touchMove'))
|
||||
.bind('touchend', $.proxy(self, '_touchEnd'));
|
||||
|
||||
// Call the original $.ui.mouse init method
|
||||
_mouseInit.call(self);
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,122 @@
|
||||
/*
|
||||
* Plugin for draggable pagination for tmMultimediaGallery
|
||||
*Version: 1.0;
|
||||
*Author: Smart;
|
||||
*/
|
||||
|
||||
(function($){
|
||||
$.fn.tmDraggablePagination = function(o){
|
||||
return this.each(function(){
|
||||
var $this = $(this),
|
||||
data = $this.data('tmDraggablePagination'),
|
||||
options = {
|
||||
itemClass: '.item',
|
||||
prevButtonClass: '.prev',
|
||||
nextButtonClass: '.next',
|
||||
controlHiddenClass: '.hide-button',
|
||||
step: null,
|
||||
|
||||
constructor: function () {
|
||||
var $paginHolder = $this.find(">div"),
|
||||
$win = $(window),
|
||||
$next = $(options.nextButtonClass),
|
||||
$prev = $(options.prevButtonClass),
|
||||
totalWidth = 0,
|
||||
step = (options.step) ? options.step : $paginHolder.find(options.itemClass).outerWidth(true);
|
||||
|
||||
init();
|
||||
|
||||
function checkFunction(rule, position){
|
||||
if ($paginHolder.length) {
|
||||
if (rule){
|
||||
$paginHolder.stop().animate({'left': position});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function checkLeftBorder(){
|
||||
return checkFunction(($paginHolder.position().left > 0), 0);
|
||||
}
|
||||
|
||||
function checkWidth(){
|
||||
return checkFunction(($paginHolder.width() < $this.width()), 0);
|
||||
}
|
||||
|
||||
function checkRightBorder(){
|
||||
var leftPos = Math.abs($paginHolder.position().left) + $this.width();
|
||||
return checkFunction((leftPos > $paginHolder.width()), (-1*($paginHolder.width() - $this.width())));
|
||||
}
|
||||
|
||||
function init(){
|
||||
var controlHiddenClassName = options.controlHiddenClass.substr(1);
|
||||
$paginHolder
|
||||
.find(options.itemClass).each(function(){
|
||||
totalWidth += $(this).outerWidth(true);
|
||||
})
|
||||
.end()
|
||||
.width(totalWidth)
|
||||
.draggable({
|
||||
axis: "x",
|
||||
start: onDragStart,
|
||||
stop: onDragStop
|
||||
});
|
||||
onDragStart();
|
||||
|
||||
// set listeners
|
||||
$next && $next.on('click', onClickNext);
|
||||
$prev && $prev.on('click', onClickPrev);
|
||||
$win.on('resize', onResize);
|
||||
|
||||
function onClickPrev(e){
|
||||
var leftPosNew = $paginHolder.position().left + step;
|
||||
(leftPosNew > 0) && (leftPosNew = 0);
|
||||
|
||||
checkFunction(true, leftPosNew);
|
||||
}
|
||||
|
||||
function onClickNext(e){
|
||||
var leftPosNew = $paginHolder.position().left - step,
|
||||
leftPos = -($paginHolder.width() - $this.width());
|
||||
(leftPosNew < leftPos) && (leftPosNew = leftPos);
|
||||
|
||||
checkFunction(true, leftPosNew);
|
||||
}
|
||||
|
||||
function onDragStart(event, ui){
|
||||
if ($this.width() > totalWidth) {
|
||||
$next && $next.addClass(controlHiddenClassName);
|
||||
$prev && $prev.addClass(controlHiddenClassName);
|
||||
return false;
|
||||
} else {
|
||||
$next && $next.removeClass(controlHiddenClassName);
|
||||
$prev && $prev.removeClass(controlHiddenClassName);
|
||||
}
|
||||
}
|
||||
|
||||
function onDragStop(event, ui){
|
||||
checkWidth();
|
||||
checkRightBorder();
|
||||
checkLeftBorder();
|
||||
}
|
||||
|
||||
function onResize(e){
|
||||
onDragStart();
|
||||
if($paginHolder.width() > $this.width()){
|
||||
checkRightBorder();
|
||||
}else{
|
||||
$paginHolder.css('left', 0);
|
||||
checkLeftBorder();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
data?$this=data:$this.data({tmDraggablePagination: options});
|
||||
typeof o=='object' && $.extend(options, o);
|
||||
options.me || options.constructor(options.me=$this);
|
||||
});
|
||||
}
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,71 @@
|
||||
/*
|
||||
* Plugin for getting list of files from directory
|
||||
*Version: 1.0;
|
||||
*Author: Smart;
|
||||
*/
|
||||
|
||||
(function($){
|
||||
$.fn.tmFileList = function(o){
|
||||
return this.each(function(){
|
||||
var $this = $(this),
|
||||
data = $this.data('tmFileList'),
|
||||
options = {
|
||||
relativePath: '../../', // relative path of script, this value will be added to pathThumb, pathFull for getting file list
|
||||
pathThumb: '', // path to thumbnails relatively index.html
|
||||
pathFull: '', // path to full images relatively index.html
|
||||
url: './gallery/php/file_list.php', // url to php file
|
||||
urlThumb: [], // array for thumbnails
|
||||
urlFull: [], // array for full images
|
||||
|
||||
// constructor of plugin
|
||||
constructor: function () {
|
||||
options.getData(options.pathThumb, options.setUrlThumb, output1);
|
||||
|
||||
// get data from ajax request #1
|
||||
function output1(){
|
||||
options.getData(options.pathFull, options.setUrlFull, output2);
|
||||
}
|
||||
// get data from ajax request #2
|
||||
function output2(){
|
||||
options.output(options.urlThumb, options.urlFull);
|
||||
}
|
||||
},
|
||||
// setters
|
||||
setUrlThumb: function(inData){
|
||||
options.urlThumb = inData;
|
||||
},
|
||||
setUrlFull: function(inData){
|
||||
options.urlFull = inData;
|
||||
|
||||
},
|
||||
// get file list from php via ajax
|
||||
getData: function(inData, callback, output){
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: options.url,
|
||||
data: {path: options.relativePath + inData},
|
||||
success: function(results){
|
||||
results = results.split(';');
|
||||
results.length && results.pop();
|
||||
|
||||
$.each(results, function(i){
|
||||
results[i] = inData + results[i];
|
||||
});
|
||||
|
||||
callback(results.sort());
|
||||
output && output();
|
||||
}
|
||||
});
|
||||
},
|
||||
// return file lists
|
||||
output: function (urlThumbList, urlFullList){
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
data?$this=data:$this.data({tmFileList: options});
|
||||
typeof o=='object' && $.extend(options, o);
|
||||
options.me || options.constructor(options.me=$this);
|
||||
});
|
||||
}
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,751 @@
|
||||
/*
|
||||
* Plugin for stretching images and video on fullscreen
|
||||
*Version: 2.0;
|
||||
*Author: Smart;
|
||||
*/
|
||||
|
||||
(function($){
|
||||
$.fn.tmMultimediaGallery = function(o){
|
||||
return this.each(function(){
|
||||
var object = $(this),
|
||||
data = object.data('tmMultimediaGallery'),
|
||||
getObject = {
|
||||
startIndex: 0, // initial postion for gallery
|
||||
showOnInit: true, // show gallery after init
|
||||
autoPlayState: false, // on/off autoplay
|
||||
autoPlayTime: 4, // autoplay timeout
|
||||
alignIMG:"center", // align of image
|
||||
alignMode: 'fill', // mode of align 'fill' or 'fit'
|
||||
mouseMove: false, // use mouse move actions for images
|
||||
controlDisplay: false, // on/off controls display
|
||||
hideControlsOnClick: true, // hide controls on click or on tap event
|
||||
paginationDisplay: true, // on/off pagination display
|
||||
animationSpeed:'0.7', // speed of animation
|
||||
mobile: false, // if mobile
|
||||
resizableContainer: false, // change the size of the container on the size of the window
|
||||
galleryOpenClass: 'galleryOpen', // class, that adds to body when gallery is open
|
||||
container: '.galleryContainer', // container of gallery (window or other DOM element)
|
||||
imageHolder: '.imageHolder', // imageHolder selector
|
||||
pagination: '.inner', // pagination selector
|
||||
paginationItem: '.item', // pagination item
|
||||
outerPagination: false, // outer pagination
|
||||
description: '.galleryDescription', // description selector
|
||||
descriptionActiveClass: '.active', // active class for current description item
|
||||
descriptionShowClass: '.show', // show class for description holder
|
||||
outerNavigation: false, // outer navigation
|
||||
next: '.nextButton', // next button selector
|
||||
prev: '.prevButton', // prev button selector
|
||||
play: '.playButton', // play button selector
|
||||
pause: '.pauseButton', // pause button selector
|
||||
spinner: '.imgSpinner', // prev button selector
|
||||
backClass: '.backImg', // back class
|
||||
frontClass: '.frontImg', // front class
|
||||
animationClass: 'flip', // class for main animation
|
||||
animationClassSub: 'scale', // class for secondary animation
|
||||
noAnimationClass: '.animationDisable', // class for quick image changing
|
||||
onShowActions: function(){}, // actions when gallery is active
|
||||
onHideActions: function(){}, // actions when gallery is not active,
|
||||
onBeforeChange: function(){}, // actions before change image
|
||||
onAfterChange: function(){}, // actions after change image
|
||||
onShowControls: function(){}, // actions shows controls of gallery
|
||||
onHideControls: function(){}, // actions hide controls of gallery
|
||||
// constructor of plugin
|
||||
constructor: function (params) {
|
||||
if (object.length) {
|
||||
getObject.container = object.parents(getObject.container);
|
||||
getObject.imageHolder = $(getObject.imageHolder, getObject.container);
|
||||
if (!getObject.outerPagination) {
|
||||
getObject.pagination = $(getObject.pagination, getObject.container);
|
||||
} else {
|
||||
getObject.pagination = $(getObject.pagination);
|
||||
}
|
||||
getObject.description = $(getObject.description, getObject.container);
|
||||
getObject.descriptionActiveClass = getObject.descriptionActiveClass.substr(1);
|
||||
getObject.descriptionShowClass = getObject.descriptionShowClass.substr(1);
|
||||
if (!getObject.outerNavigation) {
|
||||
getObject.next = $(getObject.next, getObject.container);
|
||||
getObject.prev = $(getObject.prev, getObject.container);
|
||||
} else {
|
||||
getObject.next = $(getObject.next);
|
||||
getObject.prev = $(getObject.prev);
|
||||
}
|
||||
getObject.play = $(getObject.play, getObject.container);
|
||||
getObject.pause = $(getObject.pause, getObject.container);
|
||||
getObject.spinner = $(getObject.spinner);
|
||||
getObject.noAnimationClass = getObject.noAnimationClass.substr(1);
|
||||
|
||||
var image = $("img", getObject.imageHolder),
|
||||
video = $("video", getObject.imageHolder),
|
||||
imageSRCLink = $(getObject.paginationItem + " a", getObject.pagination.eq(0)),
|
||||
description = $("li", getObject.description),
|
||||
imageDeltaX,
|
||||
imageDeltaY,
|
||||
prevImg = -1,
|
||||
currImg = -1,
|
||||
allImg = imageSRCLink.length,
|
||||
loadComplete = true,
|
||||
autoPlayTimer,
|
||||
dragDirection = 1,
|
||||
doc = $(document),
|
||||
win = $(window),
|
||||
body = $('body'),
|
||||
galleryActive = false,
|
||||
showControls = false,
|
||||
mouseDrag = false,
|
||||
mouseDown = false,
|
||||
msie9 = Boolean(navigator.userAgent.match(/MSIE ([9]+)\./));
|
||||
|
||||
getObject.startIndex = (getObject.startIndex < allImg) ? getObject.startIndex : 0;
|
||||
|
||||
init();
|
||||
}
|
||||
|
||||
function init(){
|
||||
msie9&&getObject.imageHolder.addClass('ie9');
|
||||
|
||||
getObject.autoPlayTime*=1000;
|
||||
getObject.animationSpeed = getObject.animationSpeed.replace(",", ".");
|
||||
|
||||
getObject.spinner.removeClass('spinnerShow');
|
||||
|
||||
object.css({"position":"absolute", width:"100%", height:"100%", "z-index":"0"});
|
||||
getObject.imageHolder.css({"position":"absolute", width:"100%", height:"100%", "z-index":0, "top":0});
|
||||
|
||||
if (!$(getObject.frontClass, getObject.imageHolder).length)
|
||||
image.wrap('<div class="'+getObject.frontClass.substr(1)+'"></div>');
|
||||
if (!$(getObject.backClass, getObject.imageHolder).length)
|
||||
getObject.imageHolder.append('<div class="'+getObject.backClass.substr(1)+'" style="display:none"></div>');
|
||||
|
||||
setTimeout(function() {
|
||||
getObject.imageHolder.removeClass('flip90');
|
||||
object.css('zIndex','0');
|
||||
}, 1000);
|
||||
|
||||
if (getObject.autoPlayState){
|
||||
autoPlayHandler();
|
||||
}
|
||||
|
||||
getObject.mouseMove && init_mouse_move();
|
||||
|
||||
window.orientation==undefined?usedDevice = "desktop":usedDevice = "fixedOptions";
|
||||
|
||||
if(usedDevice != "desktop"){
|
||||
window.addEventListener("orientationchange", function(){
|
||||
resizeImageHandler();
|
||||
}, true);
|
||||
}
|
||||
win.resize(resizeImageHandler);
|
||||
object.on('resize', resizeImageHandler);
|
||||
resizeImageHandler();
|
||||
|
||||
if ((!getObject.controlDisplay) || (allImg <= 1)){
|
||||
getObject.next.css({display:"none"});
|
||||
getObject.prev.css({display:"none"});
|
||||
}else{
|
||||
getObject.next.css({display:"block"});
|
||||
getObject.prev.css({display:"block"});
|
||||
}
|
||||
getObject.next.on("click", clickNext);
|
||||
getObject.prev.on("click", clickPrev);
|
||||
|
||||
var id = 0;
|
||||
if(getObject.paginationDisplay){
|
||||
$(getObject.pagination)
|
||||
.find(getObject.paginationItem + " a")
|
||||
.on('mousedown', function(){
|
||||
mouseDown = true;
|
||||
})
|
||||
.on('mouseup',function(){
|
||||
clearTimeout(id);
|
||||
id = setTimeout(function(){ mouseDown = false; }, 10);
|
||||
})
|
||||
.on('mousemove', function(){
|
||||
mouseDrag = mouseDown;
|
||||
})
|
||||
.on('click', clickPagination);
|
||||
}else{
|
||||
getObject.pagination.css({display:"none"});
|
||||
}
|
||||
|
||||
// object listeners
|
||||
object
|
||||
.on('showGallery', function(e, d){
|
||||
reset();
|
||||
|
||||
body.addClass(getObject.galleryOpenClass);
|
||||
|
||||
if (!galleryActive){
|
||||
!getObject.mobile&&videoInit();
|
||||
}
|
||||
getObject.onShowActions();
|
||||
|
||||
galleryActive = true;
|
||||
|
||||
descriptionChange();
|
||||
descriptionToggle(true);
|
||||
resizeImageHandler();
|
||||
|
||||
doc.on('keydown', keyboardEvent);
|
||||
object.on('goTo', goTo);
|
||||
|
||||
if (!d) { d = getObject.startIndex.toString(); }
|
||||
object.trigger('goTo', d);
|
||||
})
|
||||
.on('hideGallery',function(e){
|
||||
getObject.onHideActions();
|
||||
|
||||
body.removeClass(getObject.galleryOpenClass);
|
||||
|
||||
videoStop();
|
||||
|
||||
getObject.imageHolder
|
||||
.removeClass('videoInside')
|
||||
.off('click')
|
||||
.children('div').removeClass('videoShow')
|
||||
|
||||
getObject.autoPlayState = false;
|
||||
descriptionToggle(false);
|
||||
galleryActive = false;
|
||||
|
||||
doc.off('keydown', keyboardEvent);
|
||||
object.off('goTo', goTo);
|
||||
|
||||
resetCounters();
|
||||
})
|
||||
.on('setGalleryActivity', function(e, d){
|
||||
if (d) {
|
||||
if (d === 'true') {
|
||||
galleryActive = true;
|
||||
} else if (d === 'false') {
|
||||
galleryActive = false;
|
||||
}
|
||||
}
|
||||
})
|
||||
.on('showControls', function(e){
|
||||
showControls = true;
|
||||
getObject.onShowControls();
|
||||
})
|
||||
.on('hideControls', function(e){
|
||||
showControls = false;
|
||||
getObject.onHideControls();
|
||||
})
|
||||
.on('toggleControls', function(e, d){
|
||||
if (d) {
|
||||
if (d === 'true') {
|
||||
object.trigger('showControls');
|
||||
} else if (d === 'false') {
|
||||
object.trigger('hideControls');
|
||||
}
|
||||
}
|
||||
})
|
||||
.on('click', function(){
|
||||
if (getObject.hideControlsOnClick)
|
||||
object.trigger('toggleControls', (showControls=!showControls).toString());
|
||||
})
|
||||
|
||||
if ($.fn.swipe) {
|
||||
object
|
||||
.swipe({
|
||||
swipeLeft:function(event, direction, distance, duration, fingerCount) {
|
||||
galleryActive && clickNext();
|
||||
},
|
||||
swipeRight:function(event, direction, distance, duration, fingerCount) {
|
||||
galleryActive && clickPrev();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (getObject.showOnInit) {
|
||||
object.trigger('showGallery');
|
||||
} else {
|
||||
reset();
|
||||
}
|
||||
}
|
||||
|
||||
// keyboard listeners
|
||||
function keyboardEvent(e){
|
||||
if (galleryActive) {
|
||||
if (e.keyCode == 37) { clickPrev(); }
|
||||
else if (e.keyCode == 39) { clickNext(); }
|
||||
}
|
||||
}
|
||||
|
||||
// reset couters and remove active class from pagination
|
||||
function resetCounters(){
|
||||
currImg = prevImg = -1;
|
||||
$(getObject.paginationItem, getObject.pagination).removeClass('active');
|
||||
}
|
||||
|
||||
// reset actions
|
||||
function reset () {
|
||||
var img = $(getObject.imageHolder).find(getObject.frontClass + ' img, '+getObject.backClass + ' img');
|
||||
img.length && img.attr('src', '').css('visibility', 'hidden');
|
||||
resetCounters();
|
||||
}
|
||||
|
||||
// mouse move actions
|
||||
function init_mouse_move(){
|
||||
/* mouse move actions */
|
||||
var currTop = 0;
|
||||
if (!getObject.mobile) {
|
||||
getObject.imageHolder
|
||||
.on('mousemove', function(e){
|
||||
if (!galleryActive) { return false; }
|
||||
currTop = e.pageY * ($('.frontImg>img, .backImg>img').height()-win.height()) / win.height();
|
||||
$('.frontImg, .backImg', getObject.imageHolder).stop().animate({'scrollTop': currTop}, 1500);
|
||||
});
|
||||
/* end mouse move */
|
||||
} else {
|
||||
if ($.fn.swipe) {
|
||||
getObject.imageHolder
|
||||
.find('.frontImg, .backImg')
|
||||
.swipe({
|
||||
swipe:function(event, direction, distance, duration, fingerCount) {
|
||||
if (direction == 'down') {
|
||||
currTop -= distance;
|
||||
} else if (direction == 'up'){
|
||||
currTop += distance;
|
||||
}
|
||||
var h = $('.frontImg>img, .backImg>img').height();
|
||||
currTop = (currTop > h) ? h : currTop;
|
||||
currTop = (currTop < 0) ? 0 : currTop;
|
||||
$('.frontImg, .backImg', getObject.imageHolder).stop().animate({'scrollTop': currTop}, 1500);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// function for go to element (number - parameter d)
|
||||
function goTo(e, d, q){
|
||||
if (d){
|
||||
d = parseInt(d);
|
||||
if (getObject.pagination &&
|
||||
getObject.pagination.find('a') &&
|
||||
getObject.pagination.find('a').eq(d)) {
|
||||
getObject.pagination.find('a').eq(d).trigger('click', q);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// show / hide description holder
|
||||
function descriptionToggle(value){
|
||||
if (value){
|
||||
getObject.description.addClass(getObject.descriptionShowClass);
|
||||
} else {
|
||||
getObject.description.removeClass(getObject.descriptionShowClass);
|
||||
}
|
||||
}
|
||||
|
||||
// change description
|
||||
function descriptionChange(){
|
||||
description
|
||||
.stop(true)
|
||||
.removeClass(getObject.descriptionActiveClass)
|
||||
.eq(currImg)
|
||||
.addClass(getObject.descriptionActiveClass).end();
|
||||
descriptionResize();
|
||||
// .delay(500).queue(descriptionResize);
|
||||
}
|
||||
|
||||
function descriptionResize(){
|
||||
getObject.description.css('height', description.eq(currImg).outerHeight(true));
|
||||
}
|
||||
|
||||
// next listener
|
||||
function clickNext(e){
|
||||
if(loadComplete){
|
||||
getObject.autoPlayState = false;
|
||||
prevImg = currImg;
|
||||
currImg++;
|
||||
if(currImg>allImg-1){
|
||||
currImg = 0;
|
||||
}
|
||||
dragDirection=1;
|
||||
changeImageHandler();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// prev listener
|
||||
function clickPrev(e){
|
||||
if(loadComplete){
|
||||
getObject.autoPlayState = false;
|
||||
prevImg = currImg;
|
||||
currImg--;
|
||||
if(currImg<0){
|
||||
currImg = allImg-1;
|
||||
}
|
||||
dragDirection=-1;
|
||||
changeImageHandler();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// pagination listener
|
||||
function clickPagination(e, d){
|
||||
if (!mouseDrag) {
|
||||
var index = $(this).parents(getObject.paginationItem).index();
|
||||
if((index !== currImg) && loadComplete){
|
||||
if (!galleryActive) {
|
||||
object.trigger('showGallery');
|
||||
}
|
||||
prevImg = currImg;
|
||||
currImg = index;
|
||||
|
||||
clearTimeout(autoPlayTimer);
|
||||
getObject.autoPlayState = false;
|
||||
|
||||
dragDirection = prevImg<currImg ? 1 : -1;
|
||||
changeImageHandler(d);
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// autoplay
|
||||
function autoPlayHandler(){
|
||||
autoPlayTimer = setTimeout(function(){
|
||||
if(getObject.autoPlayState){
|
||||
prevImg = currImg;
|
||||
currImg++;
|
||||
if(currImg>=allImg){
|
||||
currImg = 0;
|
||||
}
|
||||
changeImageHandler();
|
||||
}
|
||||
}, getObject.autoPlayTime);
|
||||
}
|
||||
|
||||
// video initialize
|
||||
function videoInit(){
|
||||
function imageHolderClick(e){
|
||||
video&&video[0].paused ? videoPlay() : videoPause();
|
||||
}
|
||||
|
||||
image.stop(true).fadeIn(1200);
|
||||
getObject.imageHolder
|
||||
.removeClass('videoInside')
|
||||
.off('click')
|
||||
.find('video').remove().end()
|
||||
.children('div').removeClass('videoShow');
|
||||
|
||||
video = null;
|
||||
|
||||
getObject.pause.removeClass('showButton').off('click');
|
||||
getObject.play.removeClass('showButton').off('click');
|
||||
|
||||
// if video tag exist
|
||||
if ($(getObject.paginationItem, getObject.pagination).eq(currImg).hasClass('video')){
|
||||
var videoArray = $(getObject.paginationItem, getObject.pagination).eq(currImg).find('a').attr('data-video-href');
|
||||
if (videoArray.length) videoArray = videoArray.split(',');
|
||||
|
||||
getObject.imageHolder
|
||||
.addClass('videoInside')
|
||||
image
|
||||
.after('<video preload poster="'+image.attr('src')+'" style="display: none;"><source src="'+videoArray[0]+'" type="video/mp4" /><source src="'+videoArray[1]+'" type="video/webm" /><source src="'+videoArray[2]+'" type="video/ogg" />Video tag not supported. Download the video <a href="'+videoArray[0]+'.webm">here</a>.</video>');
|
||||
|
||||
getObject.play.addClass('showButton').on('click',videoPlay);
|
||||
getObject.pause.on('click', videoPause);
|
||||
getObject.imageHolder.on('click', imageHolderClick);
|
||||
|
||||
video = getObject.imageHolder.find('video');
|
||||
}
|
||||
}
|
||||
|
||||
// video play
|
||||
function videoPlay(e){
|
||||
getObject.autoPlayState = false;
|
||||
|
||||
resizeElement(video);
|
||||
|
||||
getObject.play.removeClass('showButton');
|
||||
getObject.pause.addClass('showButton');
|
||||
|
||||
descriptionToggle(false);
|
||||
|
||||
image.stop(true).fadeOut(600, function(){
|
||||
video.stop(true).fadeIn(1200);
|
||||
getObject.imageHolder.children(getObject.frontClass).addClass('videoShow');
|
||||
video[0].play();
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
// video pause
|
||||
function videoPause(e){
|
||||
getObject.play.addClass('showButton');
|
||||
getObject.pause.removeClass('showButton');
|
||||
|
||||
descriptionToggle(true);
|
||||
|
||||
if (video&&video.length) {
|
||||
video[0].pause();
|
||||
video.stop(true).fadeOut(600,function () {
|
||||
getObject.imageHolder.children('div').removeClass('videoShow');
|
||||
image.stop(true).fadeIn(1200);
|
||||
});
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// video stop
|
||||
function videoStop(e){
|
||||
videoPause(e);
|
||||
getObject.play.removeClass('showButton');
|
||||
getObject.pause.removeClass('showButton');
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// function for getting container height
|
||||
function windowH() {
|
||||
var result;
|
||||
if (getObject.container == window) {
|
||||
result = ((getObject.container.height()>=parseInt($('body').css('minHeight')))?getObject.container.height():parseInt($('body').css('minHeight')));
|
||||
} else {
|
||||
result = getObject.container.height();
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
// function for getting container width
|
||||
function windowW() {
|
||||
var result;
|
||||
if (getObject.container == window) {
|
||||
return ((getObject.container.width()>=parseInt($('body').css('minWidth')))?getObject.container.width():parseInt($('body').css('minWidth')));
|
||||
} else {
|
||||
result = getObject.container.width();
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
// function for controlling resize element
|
||||
function resizeElement(obj) {
|
||||
if (obj.length) {
|
||||
var imageWidth = obj.width(),
|
||||
imageHeight = obj.height(),
|
||||
screenWidth = windowW(),
|
||||
screenHeight = windowH(),
|
||||
imageCoef = imageHeight/imageWidth,
|
||||
holderCoef = screenHeight/screenWidth,
|
||||
imageDeltaX = 0,
|
||||
imageDeltaY = 0;
|
||||
|
||||
if (getObject.alignMode === 'fill') {
|
||||
obj.css({'width': windowW(), 'height':"auto", 'position':"absolute", "max-width":"none"});
|
||||
imageWidth = obj.width();
|
||||
imageHeight = obj.height();
|
||||
|
||||
var alignIMG = obj.attr('data-image-align') ? obj.attr('data-image-align') : getObject.alignIMG,
|
||||
imageScroll = obj.attr('data-image-scroll');
|
||||
|
||||
if (imageScroll === "enable") {
|
||||
imageScroll = true;
|
||||
alignIMG = 'top';
|
||||
obj.parent().css('overflow-y','visible');
|
||||
} else {
|
||||
imageScroll = false;
|
||||
obj.parent().css('overflow-y','hidden');
|
||||
}
|
||||
|
||||
// imageCoef = imageHeight/imageWidth;
|
||||
// holderCoef = screenHeight/screenWidth;
|
||||
|
||||
obj.css({height: screenHeight, width:"auto"});
|
||||
if ((imageCoef > holderCoef) || ((imageScroll || getObject.mouseMove) && (screenHeight < imageHeight))){
|
||||
obj.css({height:"auto", width: screenWidth});
|
||||
}
|
||||
|
||||
imageWidth = obj.width();
|
||||
imageHeight = obj.height();
|
||||
|
||||
switch(alignIMG){
|
||||
case "top":
|
||||
imageDeltaX=-(imageWidth-screenWidth)*.5;
|
||||
imageDeltaY=0;
|
||||
break;
|
||||
case "bottom":
|
||||
imageDeltaX=-(imageWidth-screenWidth)*.5;
|
||||
imageDeltaY=-(imageHeight-screenHeight);
|
||||
break;
|
||||
case "right":
|
||||
imageDeltaX=-(imageWidth-screenWidth);
|
||||
imageDeltaY=-(imageHeight-screenHeight)*.5;
|
||||
break;
|
||||
case "left":
|
||||
imageDeltaX=0;
|
||||
imageDeltaY=-(imageHeight-screenHeight)*.5;
|
||||
break;
|
||||
case "top_left":
|
||||
imageDeltaX=0;
|
||||
imageDeltaY=0;
|
||||
break;
|
||||
case "top_right":
|
||||
imageDeltaX=-(imageWidth-screenWidth);
|
||||
imageDeltaY=0;
|
||||
break;
|
||||
case "bottom_right":
|
||||
imageDeltaX=-(imageWidth-screenWidth);
|
||||
imageDeltaY=-(imageWidth-screenHeight);
|
||||
break;
|
||||
case "bottom_left":
|
||||
imageDeltaX=0;
|
||||
imageDeltaY=-(imageHeight-screenHeight);
|
||||
break;
|
||||
default:
|
||||
imageDeltaX=-(imageWidth-screenWidth)*.5;
|
||||
imageDeltaY= -(imageHeight-screenHeight)*.5;
|
||||
}
|
||||
|
||||
if (!getObject.mouseMove) {
|
||||
obj.css({'left':imageDeltaX, 'top':imageDeltaY});
|
||||
} else {
|
||||
obj.css({'left':imageDeltaX});
|
||||
}
|
||||
|
||||
} else if (getObject.alignMode === 'fit') {
|
||||
if (imageCoef > holderCoef){
|
||||
obj.css({ width: 'auto', height: screenHeight });
|
||||
} else {
|
||||
obj.css({ height: 'auto', width: screenWidth });
|
||||
}
|
||||
|
||||
imageWidth = obj.width();
|
||||
imageHeight = obj.height();
|
||||
imageDeltaX = -(imageWidth-screenWidth)*.5;
|
||||
imageDeltaY = -(imageHeight-screenHeight)*.5;
|
||||
|
||||
obj.css({'position':"absolute", "max-width":"none", 'left':imageDeltaX, 'top':imageDeltaY});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// main function for controlling resize element
|
||||
function resizeImageHandler(){
|
||||
descriptionResize();
|
||||
if (getObject.resizableContainer) {
|
||||
getObject.container.css({
|
||||
'width': win.width(),
|
||||
'height': win.height()
|
||||
});
|
||||
}
|
||||
image = $("img", getObject.imageHolder);
|
||||
image.length&&image.each(function(ind, img){
|
||||
resizeElement($(img));
|
||||
})
|
||||
|
||||
video = $('video', getObject.imageHolder);
|
||||
resizeElement(video);
|
||||
}
|
||||
|
||||
// function for controlling change image
|
||||
function changeImageHandler(d){
|
||||
if (allImg > 1) {
|
||||
// galleryActive = false;
|
||||
getObject.spinner.addClass('spinnerShow');
|
||||
|
||||
$(getObject.pagination).each(function(){
|
||||
$(this).find(getObject.paginationItem)
|
||||
.eq(currImg)
|
||||
.addClass("active").end()
|
||||
.eq(prevImg).removeClass("active");
|
||||
});
|
||||
|
||||
loadComplete = false;
|
||||
|
||||
image = $("img", getObject.imageHolder);
|
||||
|
||||
var imgSRC = imageSRCLink.eq(currImg).attr("href"),
|
||||
alignIMG = imageSRCLink.eq(currImg).attr("data-image-align"),
|
||||
imageScroll = imageSRCLink.eq(currImg).attr("data-image-scroll");
|
||||
alignIMG = alignIMG?'data-image-align="'+alignIMG+'"':"";
|
||||
imageScroll = imageScroll?'data-image-scroll="'+imageScroll+'"':"";
|
||||
|
||||
$(getObject.backClass, getObject.imageHolder)
|
||||
.css({'display':'block'})
|
||||
.empty()
|
||||
.append('<img src="'+imgSRC+'" alt="" '+alignIMG+' '+imageScroll+'>')
|
||||
.find('img')
|
||||
.on("load", loadHandler);
|
||||
|
||||
descriptionChange();
|
||||
descriptionToggle(true);
|
||||
}
|
||||
function loadHandler(){
|
||||
loadImageHandler(d);
|
||||
}
|
||||
}
|
||||
|
||||
// function for controlling load image
|
||||
function loadImageHandler(quickChange){
|
||||
getObject.onBeforeChange();
|
||||
getObject.imageHolder.addClass(getObject.animationClassSub);
|
||||
resizeElement(getObject.imageHolder.find(getObject.backClass+'>img'));
|
||||
resizeElement(getObject.imageHolder.find(getObject.frontClass+'>img'));
|
||||
|
||||
var time = 1000;
|
||||
if (quickChange === 'quick') {
|
||||
time = 10;
|
||||
getObject.container.addClass(getObject.noAnimationClass);
|
||||
$(getObject.frontClass, getObject.imageHolder).empty().css({'zIndex':1, 'display':'none'});
|
||||
}
|
||||
|
||||
setTimeout(function(){
|
||||
getObject.spinner.removeClass('spinnerShow');
|
||||
|
||||
// add or remove animation class
|
||||
!getObject.imageHolder.hasClass(getObject.animationClass)?getObject.imageHolder.addClass(getObject.animationClass):getObject.imageHolder.removeClass(getObject.animationClass);
|
||||
|
||||
if (msie9) {
|
||||
getObject.imageHolder
|
||||
.find(getObject.frontClass).stop(true).animate({'opacity':0}, time).end()
|
||||
.find(getObject.backClass).css('opacity',0).stop(true, true).animate({'opacity':1}, time).end()
|
||||
}
|
||||
|
||||
getObject.imageHolder.find(getObject.backClass+">img")
|
||||
.off("load", loadImageHandler);
|
||||
|
||||
getObject.imageHolder
|
||||
.stop(true,true)
|
||||
.delay(getObject.animationSpeed*time)
|
||||
.queue(onAnimateComplete);
|
||||
|
||||
function onAnimateComplete(e){
|
||||
if (quickChange) {
|
||||
getObject.container.removeClass(getObject.noAnimationClass);
|
||||
}
|
||||
var $this = $(this);
|
||||
|
||||
$(getObject.frontClass, $this).empty().css({'zIndex':1, 'display':'none'});
|
||||
$(getObject.backClass, $this).css('zIndex',2);
|
||||
|
||||
image = $(getObject.backClass + ' img', $this);
|
||||
|
||||
$this.removeClass(getObject.animationClassSub);
|
||||
|
||||
// swap classes
|
||||
var tmp = getObject.backClass;
|
||||
getObject.backClass = getObject.frontClass;
|
||||
getObject.frontClass = tmp;
|
||||
|
||||
// initialize video if exist
|
||||
!getObject.mobile&&videoInit();
|
||||
|
||||
loadComplete = true;
|
||||
// galleryActive = true;
|
||||
autoPlayHandler();
|
||||
|
||||
getObject.onAfterChange();
|
||||
}
|
||||
}, time)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
data?object=data:object.data({tmMultimediaGallery: getObject});
|
||||
typeof o=='object' && $.extend(getObject, o);
|
||||
getObject.me || getObject.constructor(getObject.me=object);
|
||||
});
|
||||
}
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,173 @@
|
||||
// initialize tmMultimediaGallery
|
||||
var pathThumb = pathFull = '';
|
||||
|
||||
$(window).load(function(){
|
||||
var $spinner = $('.content-load-spinner');
|
||||
|
||||
// get file list
|
||||
$('#content .inner').tmFileList({
|
||||
pathThumb: pathThumb,
|
||||
pathFull: pathFull,
|
||||
output: function(urlThumbList, urlFullList){
|
||||
buildPagination({urlThumb: urlThumbList, urlFull: urlFullList});
|
||||
}
|
||||
});
|
||||
|
||||
// build pagination function
|
||||
function buildPagination(urlList){
|
||||
// automatic build pagination for isotope
|
||||
var $inner_1 = $('#content .inner');
|
||||
$inner_1
|
||||
.addClass('loading')
|
||||
.tmPaginationGenerator({
|
||||
urlList: urlList,
|
||||
// divWrapper: true,
|
||||
anchorInnerHtml: '<span class="magnifier-overlay"></span><span class="fa fa-expand"></span>',
|
||||
generateComplete: function($ul){
|
||||
},
|
||||
loadComplete: function($ul){
|
||||
// apply isotope for items
|
||||
$ul.isotope({
|
||||
itemSelector : '#content .inner>div>div',
|
||||
resizable: true,
|
||||
layoutMode: 'masonry',
|
||||
itemPositionDataEnabled: true
|
||||
});
|
||||
|
||||
// remove spinner
|
||||
setTimeout(function(){
|
||||
$spinner.fadeOut(600);
|
||||
$inner_1.removeClass('loading');
|
||||
}, 400);
|
||||
|
||||
// automatic build pagination for carousel
|
||||
$('.galleryContainer .inner').tmPaginationGenerator({
|
||||
urlList: urlList,
|
||||
anchorInnerHtml: '<span class="magnifier-overlay"></span><span class="fa fa-expand"></span>',
|
||||
generateComplete: function($ul){
|
||||
// apply carousel items
|
||||
|
||||
initFullGallery();
|
||||
|
||||
$('.carousel.inner').tmDraggablePagination({
|
||||
step: 50
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initFullGallery(){
|
||||
var id = 0,
|
||||
$gallery = $('.galleryHolder'),
|
||||
$description = $('.galleryDescription li');
|
||||
|
||||
$gallery.tmMultimediaGallery({
|
||||
startIndex: 0, // initial postion for gallery
|
||||
showOnInit: false, // show gallery after init
|
||||
autoPlayState: false, // on/off autoplay
|
||||
autoPlayTime: 12, // autoplay timeout
|
||||
alignIMG:"center", // align of image (center, top, bottom, right, left, top_left, top_right, bottom_roght, bottom_left)
|
||||
alignMode: 'fit', // mode of align 'fill' or 'fit'
|
||||
controlDisplay: true, // on/off controls display
|
||||
paginationDisplay: true, // on/off pagination display
|
||||
animationSpeed:'0.7', // speed of animation
|
||||
mobile: false, // if mobile
|
||||
resizableContainer: true, // change the size of the container on the size of the window
|
||||
container: '.galleryContainer', // container of gallery (window or other DOM element)
|
||||
imageHolder: '.imageHolder', // imageHolder selector
|
||||
pagination: '.inner', // pagination selector
|
||||
paginationItem: '.item', // pagination item selector
|
||||
outerPagination: true, // outer pagination
|
||||
description: '.galleryDescription', // description selector
|
||||
descriptionActiveClass: '.active', // active class for current description item
|
||||
descriptionShowClass: '.showDescription', // show class for description holder
|
||||
outerNavigation: false, // outer navigation
|
||||
mouseMove: false, // mouse move reaction of image
|
||||
next: '.nextButton', // next button selector
|
||||
prev: '.prevButton', // prev button selector
|
||||
play: '.playButton', // play button selector
|
||||
pause: '.pauseButton', // pause button selector
|
||||
spinner: '.imgSpinner', // prev button selector
|
||||
backClass: '.backImg', // back class
|
||||
frontClass: '.frontImg', // front class
|
||||
animationClass: 'flip', // class for main animation
|
||||
animationClassSub: 'scale', // class for secondary animation
|
||||
noAnimationClass: '.animationDisable', // class for quick image changing
|
||||
onShowActions: function(){
|
||||
id = setTimeout(function(){
|
||||
// $('#inner').removeClass('hideFromScreen');
|
||||
$gallery.trigger('showControls');
|
||||
|
||||
$(window).trigger('resize');
|
||||
}, 2000);
|
||||
},
|
||||
onHideActions: function(){
|
||||
clearTimeout(id);
|
||||
// $('#inner').addClass('hideFromScreen');
|
||||
$gallery.trigger('hideControls');
|
||||
},
|
||||
onBeforeChange: function(){
|
||||
},
|
||||
onAfterChange: function(){
|
||||
},
|
||||
onHideControls: function(){
|
||||
$('.prevButton, .nextButton, .close-icon, .info-icon, .gallery_nav, .prev, .next').removeClass('showButton');
|
||||
$('.galleryDescription').removeClass('show');
|
||||
$('.carousel-holder').removeClass('show');
|
||||
},
|
||||
onShowControls: function(){
|
||||
$('.prevButton, .nextButton, .close-icon, .gallery_nav, .prev, .next').addClass('showButton');
|
||||
if ($description.length) {
|
||||
$('.info-icon').addClass('showButton');
|
||||
}
|
||||
$('.carousel-holder').addClass('show');
|
||||
}
|
||||
});
|
||||
|
||||
// click function for close button
|
||||
$('.close-icon').click(function(){
|
||||
$gallery.trigger('hideGallery');
|
||||
return false;
|
||||
});
|
||||
$(document).keyup(function(e){
|
||||
if(e.keyCode === 27)
|
||||
$gallery.trigger('hideGallery');
|
||||
return false;
|
||||
});
|
||||
|
||||
// click function for info button
|
||||
if ($description.length) {
|
||||
$('.info-icon').on('click', function(){
|
||||
$(this).removeClass('showButton');
|
||||
$('.galleryDescription').addClass('show');
|
||||
return false;
|
||||
});
|
||||
|
||||
// click function for close-details button
|
||||
$('.close-info-icon').on('click', function(){
|
||||
$('.info-icon').addClass('showButton');
|
||||
$('.galleryDescription').removeClass('show');
|
||||
return false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
$(function(){
|
||||
// IPad/IPhone
|
||||
var viewportmeta = document.querySelector && document.querySelector('meta[name="viewport"]'),
|
||||
ua = navigator.userAgent,
|
||||
|
||||
gestureStart = function () {
|
||||
viewportmeta.content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6, initial-scale=1.0";
|
||||
},
|
||||
|
||||
scaleFix = function () {
|
||||
if (viewportmeta && /iPhone|iPad/.test(ua) && !/Opera Mini/.test(ua)) {
|
||||
viewportmeta.content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
|
||||
document.addEventListener("gesturestart", gestureStart, false);
|
||||
}
|
||||
};
|
||||
scaleFix();
|
||||
});
|
||||
@@ -0,0 +1,59 @@
|
||||
/*
|
||||
* Plugin for pagination generation for tmMultimediaGallery
|
||||
*Version: 1.0;
|
||||
*Author: Smart;
|
||||
*/
|
||||
|
||||
(function($){
|
||||
$.fn.tmPaginationGenerator = function(o){
|
||||
return this.each(function(){
|
||||
var $this = $(this),
|
||||
data = $this.data('tmPaginationGenerator'),
|
||||
options = {
|
||||
urlList: {urlThumb: [], urlFull: []}, // url of images
|
||||
divWrapper: false, // wrap all li in div
|
||||
itemClass: 'item', // class for item
|
||||
anchorInnerHtml: '', // class for hover hmtl in <a> element
|
||||
// constructor of plugin
|
||||
constructor: function () {
|
||||
if (!options.urlList.urlThumb.length || !options.urlList.urlFull.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$this
|
||||
.empty()
|
||||
.append('<div></div>');
|
||||
|
||||
var length = Math.min(options.urlList.urlThumb.length, options.urlList.urlFull.length),
|
||||
$ul = $this.find('>div');
|
||||
for (var i = 0; i < length; i++){
|
||||
var appendString = '<div class="' + options.itemClass + '"><a href="' + options.urlList.urlFull[i] + '">' + options.anchorInnerHtml + '<img src="' + options.urlList.urlThumb[i] + '" alt/></a></div>';
|
||||
options.divWrapper && (appendString = '<div>' + appendString + '</div>');
|
||||
$ul.append(appendString);
|
||||
}
|
||||
|
||||
options.generateComplete($ul);
|
||||
|
||||
var images = $ul.find('img'),
|
||||
counter = images.length;
|
||||
images.on('load abort error', function(){
|
||||
--counter;
|
||||
if(counter === 0) {
|
||||
options.loadComplete($ul);
|
||||
}
|
||||
})
|
||||
},
|
||||
// function called when building html tree complete
|
||||
generateComplete: function(ul){
|
||||
},
|
||||
// function called when loading images complete
|
||||
loadComplete: function(ul){
|
||||
}
|
||||
}
|
||||
|
||||
data?$this=data:$this.data({tmPaginationGenerator: options});
|
||||
typeof o=='object' && $.extend(options, o);
|
||||
options.me || options.constructor(options.me=$this);
|
||||
});
|
||||
}
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user