mirror of
https://github.com/pinry/pinry.git
synced 2025-11-13 16:45:41 +01:00
106 lines
3.6 KiB
JavaScript
106 lines
3.6 KiB
JavaScript
/**
|
|
* Lightbox for Pinry
|
|
* Descrip: A lightbox plugin for pinry so that I don't have to rely on some of
|
|
* the massive code bases of other lightboxes, this one uses data
|
|
* fields to acquire the info we need and dynamically loads comments.
|
|
* It also has a nice parallax view mode where the top scrolls and the
|
|
* background stays stationary.
|
|
* Authors: Pinry Contributors
|
|
* Updated: Feb 4th, 2016
|
|
* Require: jQuery, Pinry JavaScript Helpers
|
|
*/
|
|
|
|
|
|
$(window).load(function() {
|
|
// Start Helper Functions
|
|
function freezeScroll(freeze) {
|
|
freeze = typeof freeze !== 'undefined' ? freeze : true;
|
|
if (freeze) {
|
|
$('body').data('scroll-level', $(window).scrollTop());
|
|
$('#pins').css({
|
|
'position': 'fixed',
|
|
'margin-top': -$('body').data('scroll-level')
|
|
});
|
|
$(window).scrollTop(0);
|
|
/* disable the global pin-loading scroll handler so we don't
|
|
load pins when scrolling a selected image */
|
|
$(window).off('scroll');
|
|
} else {
|
|
$('#pins').css({
|
|
'position': 'static',
|
|
'margin-top': 0
|
|
});
|
|
$(window).scrollTop($('body').data('scroll-level'));
|
|
/* enable the pin-loading scroll handler unless we've already
|
|
loaded all pins from the server (in which case an element
|
|
with id 'the-end' exists */
|
|
var theEnd = document.getElementById('the-end');
|
|
if (!theEnd) {
|
|
$(window).scroll(scrollHandler);
|
|
}
|
|
}
|
|
}
|
|
// End Helper Functions
|
|
|
|
|
|
// Start View Functions
|
|
function createBox(context) {
|
|
freezeScroll();
|
|
$('body').append(renderTemplate('#lightbox-template', context));
|
|
var box = $('.lightbox-background');
|
|
box.css('height', $(document).height());
|
|
$('.lightbox-image-wrapper').css('height', context.image.standard.height);
|
|
box.fadeIn(200);
|
|
$('.lightbox-image').load(function() {
|
|
$(this).fadeIn(200);
|
|
});
|
|
$('.lightbox-wrapper').css({
|
|
'width': context.image.standard.width,
|
|
'margin-top': 80,
|
|
'margin-bottom': 80,
|
|
'margin-left': -context.image.standard.width/2
|
|
});
|
|
if ($('.lightbox-wrapper').height()+140 > $(window).height())
|
|
$('.lightbox-background').height($('.lightbox-wrapper').height()+160);
|
|
|
|
box.click(function() {
|
|
$(this).fadeOut(200);
|
|
setTimeout(function() {
|
|
box.remove();
|
|
}, 200);
|
|
freezeScroll(false);
|
|
});
|
|
}
|
|
// End View Functions
|
|
|
|
|
|
// Start Global Init Function
|
|
window.lightbox = function() {
|
|
var links = $('body').find('.lightbox');
|
|
if (pinFilter) {
|
|
var promise = getPinData(pinFilter);
|
|
promise.success(function(pin) {
|
|
createBox(pin);
|
|
});
|
|
promise.error(function() {
|
|
message('Problem problem fetching pin data.', 'alert alert-danger');
|
|
});
|
|
}
|
|
return links.each(function() {
|
|
$(this).off('click');
|
|
$(this).click(function(e) {
|
|
e.preventDefault();
|
|
var promise = getPinData($(this).data('id'));
|
|
promise.success(function(pin) {
|
|
createBox(pin);
|
|
});
|
|
promise.error(function() {
|
|
message('Problem problem fetching pin data.', 'alert alert-danger');
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
// End Global Init Function
|
|
});
|