164 lines
4.0 KiB
JavaScript
164 lines
4.0 KiB
JavaScript
/**
|
|
* Get looped index depending on number of slides
|
|
*/
|
|
var _getLoopedId = function(index) {
|
|
var numSlides = mfp.items.length;
|
|
if(index > numSlides - 1) {
|
|
return index - numSlides;
|
|
} else if(index < 0) {
|
|
return numSlides + index;
|
|
}
|
|
return index;
|
|
},
|
|
_replaceCurrTotal = function(text, curr, total) {
|
|
return text.replace(/%curr%/gi, curr + 1).replace(/%total%/gi, total);
|
|
};
|
|
|
|
$.magnificPopup.registerModule('gallery', {
|
|
|
|
options: {
|
|
enabled: false,
|
|
arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
|
|
preload: [0,2],
|
|
navigateByImgClick: true,
|
|
arrows: true,
|
|
|
|
tPrev: 'Previous (Left arrow key)',
|
|
tNext: 'Next (Right arrow key)',
|
|
tCounter: '%curr% of %total%'
|
|
},
|
|
|
|
proto: {
|
|
initGallery: function() {
|
|
|
|
var gSt = mfp.st.gallery,
|
|
ns = '.mfp-gallery';
|
|
|
|
mfp.direction = true; // true - next, false - prev
|
|
|
|
if(!gSt || !gSt.enabled ) return false;
|
|
|
|
_wrapClasses += ' mfp-gallery';
|
|
|
|
_mfpOn(OPEN_EVENT+ns, function() {
|
|
|
|
if(gSt.navigateByImgClick) {
|
|
mfp.wrap.on('click'+ns, '.mfp-img', function() {
|
|
if(mfp.items.length > 1) {
|
|
mfp.next();
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
|
|
_document.on('keydown'+ns, function(e) {
|
|
if (e.keyCode === 37) {
|
|
mfp.prev();
|
|
} else if (e.keyCode === 39) {
|
|
mfp.next();
|
|
}
|
|
});
|
|
});
|
|
|
|
_mfpOn('UpdateStatus'+ns, function(e, data) {
|
|
if(data.text) {
|
|
data.text = _replaceCurrTotal(data.text, mfp.currItem.index, mfp.items.length);
|
|
}
|
|
});
|
|
|
|
_mfpOn(MARKUP_PARSE_EVENT+ns, function(e, element, values, item) {
|
|
var l = mfp.items.length;
|
|
values.counter = l > 1 ? _replaceCurrTotal(gSt.tCounter, item.index, l) : '';
|
|
});
|
|
|
|
_mfpOn('BuildControls' + ns, function() {
|
|
if(mfp.items.length > 1 && gSt.arrows && !mfp.arrowLeft) {
|
|
var markup = gSt.arrowMarkup,
|
|
arrowLeft = mfp.arrowLeft = $( markup.replace(/%title%/gi, gSt.tPrev).replace(/%dir%/gi, 'left') ).addClass(PREVENT_CLOSE_CLASS),
|
|
arrowRight = mfp.arrowRight = $( markup.replace(/%title%/gi, gSt.tNext).replace(/%dir%/gi, 'right') ).addClass(PREVENT_CLOSE_CLASS);
|
|
|
|
arrowLeft.click(function() {
|
|
mfp.prev();
|
|
});
|
|
arrowRight.click(function() {
|
|
mfp.next();
|
|
});
|
|
|
|
mfp.container.append(arrowLeft.add(arrowRight));
|
|
}
|
|
});
|
|
|
|
_mfpOn(CHANGE_EVENT+ns, function() {
|
|
if(mfp._preloadTimeout) clearTimeout(mfp._preloadTimeout);
|
|
|
|
mfp._preloadTimeout = setTimeout(function() {
|
|
mfp.preloadNearbyImages();
|
|
mfp._preloadTimeout = null;
|
|
}, 16);
|
|
});
|
|
|
|
|
|
_mfpOn(CLOSE_EVENT+ns, function() {
|
|
_document.off(ns);
|
|
mfp.wrap.off('click'+ns);
|
|
mfp.arrowRight = mfp.arrowLeft = null;
|
|
});
|
|
|
|
},
|
|
next: function() {
|
|
mfp.direction = true;
|
|
mfp.index = _getLoopedId(mfp.index + 1);
|
|
mfp.updateItemHTML();
|
|
},
|
|
prev: function() {
|
|
mfp.direction = false;
|
|
mfp.index = _getLoopedId(mfp.index - 1);
|
|
mfp.updateItemHTML();
|
|
},
|
|
goTo: function(newIndex) {
|
|
mfp.direction = (newIndex >= mfp.index);
|
|
mfp.index = newIndex;
|
|
mfp.updateItemHTML();
|
|
},
|
|
preloadNearbyImages: function() {
|
|
var p = mfp.st.gallery.preload,
|
|
preloadBefore = Math.min(p[0], mfp.items.length),
|
|
preloadAfter = Math.min(p[1], mfp.items.length),
|
|
i;
|
|
|
|
for(i = 1; i <= (mfp.direction ? preloadAfter : preloadBefore); i++) {
|
|
mfp._preloadItem(mfp.index+i);
|
|
}
|
|
for(i = 1; i <= (mfp.direction ? preloadBefore : preloadAfter); i++) {
|
|
mfp._preloadItem(mfp.index-i);
|
|
}
|
|
},
|
|
_preloadItem: function(index) {
|
|
index = _getLoopedId(index);
|
|
|
|
if(mfp.items[index].preloaded) {
|
|
return;
|
|
}
|
|
|
|
var item = mfp.items[index];
|
|
if(!item.parsed) {
|
|
item = mfp.parseEl( index );
|
|
}
|
|
|
|
_mfpTrigger('LazyLoad', item);
|
|
|
|
if(item.type === 'image') {
|
|
item.img = $('<img class="mfp-img" />').on('load.mfploader', function() {
|
|
item.hasSize = true;
|
|
}).on('error.mfploader', function() {
|
|
item.hasSize = true;
|
|
item.loadError = true;
|
|
_mfpTrigger('LazyLoadError', item);
|
|
}).attr('src', item.src);
|
|
}
|
|
|
|
|
|
item.preloaded = true;
|
|
}
|
|
}
|
|
}); |