576 lines
20 KiB
JavaScript
576 lines
20 KiB
JavaScript
$('.show-gallery .show-content.col-sm-2').ready(function() {
|
|
if ($('.show-gallery .show-content.col-sm-2').eq(0).css('float') == 'left') {
|
|
$('.show-gallery .show-content.col-sm-2').eq(0).parent().css('float', 'left');
|
|
$('.show-gallery .show-content.col-sm-2').eq(0).parent().css('width', '100%');
|
|
}
|
|
})
|
|
window.GalleryTheater = function() {
|
|
var parent_divs = $('.gallery').parents('div'),
|
|
parent_div_z_index = parent_divs.eq(parent_divs.length - 1).css('z-index')
|
|
parent_divs.eq(parent_divs.length - 1).css('z-index', '2000')
|
|
var currentPic = {},
|
|
windowHeight = 0,
|
|
windowWidth = 0,
|
|
swipeController = null,
|
|
resizing = null,
|
|
loadingInterval = null,
|
|
mainPicLoading = 0,
|
|
nextPicLoading = 0,
|
|
prevPicLoading = 0,
|
|
currentSwipeImageDom = null,
|
|
currentSwipeImageDomLeftPos = 0,
|
|
windowScreenThresholdForTouch = 0,
|
|
loadingProcess = 0,
|
|
stage = null,
|
|
stripNextBtn = null,
|
|
stripPrevBtn = null,
|
|
thumbToggle = null,
|
|
descriptionToggle = null,
|
|
closeBtn = null,
|
|
switchBtn = null,
|
|
imageContainer = null,
|
|
albumData = {},
|
|
loader = null,
|
|
thumbStrip = null,
|
|
descriptionArea = null,
|
|
isTheaterInitialized = false;
|
|
|
|
var play_flag = false;
|
|
var button_left_string = '<button id ="theaterPreviousButton" class="theaterButton">< </button>',
|
|
button_right_string = '<button id ="theaterNextButton" class="theaterButton">> </button>',
|
|
button_play_string = '<button id ="theaterPlayButton" class="theaterButton">▶ </button>',
|
|
button_stop_string = '<button id ="theaterStopButton" class="theaterButton">|| </button>',
|
|
playtimeoutID;
|
|
var set_margin = function () {
|
|
if ($('#orbit-bar').height()>0){ //for show page
|
|
$('#gallery-theater-stage>.gallery').css('margin-top','2.4em')
|
|
}else{
|
|
$('#gallery-theater-stage>.gallery').css('margin-top','')
|
|
}
|
|
}
|
|
var initialize = function() {
|
|
set_margin();
|
|
stage = $("#gallery-theater-stage");
|
|
closeBtn = stage.find(".gallery-close");
|
|
switchBtn = stage.find(".gallery-theme-switch");
|
|
imageContainer = stage.find(".image-container");
|
|
thumbStrip = stage.find(".gallery-thumb-wrap");
|
|
thumbToggle = stage.find(".gallery-thumb-toggle");
|
|
loader = stage.find(".gallery-loader");
|
|
stripNextBtn = stage.find(".gallery-thumb-next");
|
|
stripPrevBtn = stage.find(".gallery-thumb-prev");
|
|
descriptionArea = stage.find(".gallery-img-desc");
|
|
descriptionToggle = stage.find(".gallery-toggle-desc");
|
|
windowScreenThresholdForTouch = windowWidth / 3;
|
|
startLoading();
|
|
windowHeight = $(window).height();
|
|
windowWidth = $(window).width();
|
|
var addButton = function() {
|
|
$('.theaterButton').remove();
|
|
if (!play_flag) {
|
|
$(button_left_string + button_play_string + button_right_string).insertAfter($('img.gal-active'));
|
|
} else {
|
|
$(button_left_string + button_stop_string + button_right_string).insertAfter($('img.gal-active'));
|
|
}
|
|
if (!$(".gal-prev").length) {
|
|
$('#theaterPreviousButton').remove();
|
|
}
|
|
if (!$(".gal-next").length) {
|
|
$('#theaterNextButton').remove();
|
|
}
|
|
|
|
$('#theaterPreviousButton').click(function() {
|
|
previousPic();
|
|
});
|
|
$('#theaterNextButton').click(function() {
|
|
nextPic();
|
|
});
|
|
$('#theaterPlayButton').click(function() {
|
|
play_flag = true;
|
|
playtimeoutID = window.setInterval(function() {
|
|
playallPic();
|
|
}, 3000)
|
|
window.onhashchange()
|
|
});
|
|
$('#theaterStopButton').click(function() {
|
|
play_flag = false;
|
|
window.onhashchange()
|
|
window.clearInterval(playtimeoutID)
|
|
});
|
|
}
|
|
window.onhashchange = locationHashChanged;
|
|
bindHandler();
|
|
if (window.location.hash != "" && window.location.hash != "#") {
|
|
var id = window.location.hash.split("#")[1];
|
|
createTheater("/xhr/galleries/theater/" + id);
|
|
}
|
|
|
|
|
|
addButton();
|
|
|
|
function locationHashChanged() {
|
|
addButton();
|
|
}
|
|
|
|
}
|
|
|
|
var bindHandler = function() {
|
|
// handler to close the theater
|
|
closeBtn.off('click').on("click", destroyTheater);
|
|
|
|
// handler to show theater
|
|
$("div[data-list=images] a").filter(":not(.preview)").off('click').on("click", function() {
|
|
var id = $(this).attr('href').split("#")[1];
|
|
createTheater("/xhr/galleries/theater/" + id);
|
|
window.location.hash = '#' + id;
|
|
return false;
|
|
})
|
|
|
|
switchBtn.off('click').on("click", switchTheme);
|
|
descriptionToggle.off('click').on("click", toggleDescription)
|
|
stripPrevBtn.off('click').on("click", scrollStripRight);
|
|
stripNextBtn.off('click').on("click", scrollStripLeft);
|
|
|
|
if (Modernizr.touch) {
|
|
imageContainer.swipe({
|
|
swipe: function(event, direction, distance, duration, fingerCount) {
|
|
if (direction == "left") {
|
|
nextPic();
|
|
} else if (direction == "right") {
|
|
previousPic();
|
|
}
|
|
}
|
|
})
|
|
thumbToggle.swipe({
|
|
swipe: function(event, direction, distance, duration, fingerCount) {
|
|
if (direction == "up") {
|
|
thumbStrip.parent().addClass("show");
|
|
thumbToggle.addClass("up");
|
|
thumbToggle.find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down");
|
|
} else if (direction == "down") {
|
|
thumbStrip.parent().removeClass("show");
|
|
thumbToggle.removeClass("up");
|
|
thumbToggle.find("i").removeClass("fa-angle-double-down").addClass("fa-angle-double-up");
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
//handler for window resize
|
|
$(window).resize(function() {
|
|
clearTimeout(resizing);
|
|
resizing = setTimeout(doneResizing, 1000);
|
|
})
|
|
}
|
|
|
|
var bindKeyHandlers = function() {
|
|
if (!Modernizr.touch) {
|
|
$(document.body).on("click", ".gal-active", nextPic);
|
|
$(document.body).on("click", ".gal-prev", previousPic);
|
|
$(document.body).on("click", ".gal-next", nextPic);
|
|
$(document).on("keyup", function(e) {
|
|
switch (e.keyCode) {
|
|
case 39:
|
|
nextPic();
|
|
break;
|
|
case 37:
|
|
previousPic();
|
|
break;
|
|
case 27:
|
|
destroyTheater();
|
|
break;
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
var doneResizing = function() {
|
|
windowHeight = $(window).height();
|
|
windowWidth = $(window).width();
|
|
setThumbNavs();
|
|
}
|
|
|
|
var unBindKeyHandlers = function() {
|
|
$(document).unbind("keyup");
|
|
}
|
|
|
|
var destroyTheater = function() {
|
|
parent_divs.eq(parent_divs.length - 1).css('z-index', parent_div_z_index)
|
|
stage.hide();
|
|
$("body").removeClass("gallery-mode-on");
|
|
imageContainer.empty()
|
|
unBindKeyHandlers();
|
|
window.location.hash = "";
|
|
}
|
|
|
|
var createTheater = function(link) {
|
|
$('.gallery-img-desc').removeClass('active');
|
|
bindKeyHandlers();
|
|
stage.show();
|
|
$("body").addClass("gallery-mode-on");
|
|
if (!isTheaterInitialized) {
|
|
$.ajax({
|
|
url: link,
|
|
dataType: "json",
|
|
type: "get",
|
|
async: false
|
|
}).done(function(data) {
|
|
albumData = data.data;
|
|
var cp = albumData.images.filter(function(x) {
|
|
return x._id == albumData.image
|
|
})[0];
|
|
currentPic = {
|
|
"image": cp,
|
|
"index": albumData.images.indexOf(cp)
|
|
};
|
|
createThumbStrip();
|
|
})
|
|
isTheaterInitialized = false;
|
|
} else {
|
|
var id = link.split("/")[4],
|
|
cp = albumData.images.filter(function(x) {
|
|
return x._id == id
|
|
})[0];
|
|
currentPic = {
|
|
"image": cp,
|
|
"index": albumData.images.indexOf(cp)
|
|
};
|
|
createThumbStrip();
|
|
}
|
|
}
|
|
|
|
var hasNextImage = function() {
|
|
return (currentPic.index + 1) <= (albumData.images.length - 1);
|
|
}
|
|
|
|
var hasPreviousImage = function() {
|
|
return (currentPic.index > 0);
|
|
}
|
|
|
|
var nextPic = function() {
|
|
if (loadingProcess == 0) {
|
|
if (hasNextImage()) {
|
|
startLoading();
|
|
currentPic.image = albumData.images[currentPic.index + 1];
|
|
currentPic.index = currentPic.index + 1;
|
|
setMainPic("next");
|
|
}
|
|
}
|
|
}
|
|
var playallPic = function() {
|
|
if (loadingProcess == 0) {
|
|
mainPicLoading = 1;
|
|
nextPicLoading = 1;
|
|
prevPicLoading = 1;
|
|
if (hasNextImage()) {
|
|
currentPic.image = albumData.images[currentPic.index + 1];
|
|
currentPic.index = currentPic.index + 1;
|
|
setMainPic("next");
|
|
} else {
|
|
currentPic.image = albumData.images[0];
|
|
currentPic.index = 0;
|
|
setMainPic();
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
var previousPic = function() {
|
|
if (loadingProcess == 0) {
|
|
if (hasPreviousImage()) {
|
|
startLoading();
|
|
currentPic.image = albumData.images[currentPic.index - 1];
|
|
currentPic.index = currentPic.index - 1;
|
|
setMainPic("prev");
|
|
}
|
|
}
|
|
}
|
|
|
|
var scrollStripLeft = function() {
|
|
pixels_to_move = parseInt(thumbStrip.css("left")) - (66 * 3);
|
|
maximum_pixels = (windowWidth / 2) - (66 * (albumData.images.length - 1));
|
|
if (pixels_to_move < maximum_pixels) {
|
|
pixels_to_move = maximum_pixels;
|
|
}
|
|
thumbStrip.css("left", pixels_to_move + "px");
|
|
}
|
|
|
|
var scrollStripRight = function() {
|
|
pixels_to_move = parseInt(thumbStrip.css("left")) + (66 * 3);
|
|
maximum_pixels = (windowWidth / 2);
|
|
if (pixels_to_move > maximum_pixels) {
|
|
pixels_to_move = maximum_pixels;
|
|
}
|
|
thumbStrip.css("left", pixels_to_move + "px");
|
|
}
|
|
|
|
|
|
var switchTheme = function() {
|
|
var themeWhiteKlass = "theme-white",
|
|
nightKlass = "fa fa-circle",
|
|
dayKlass = "fa fa-circle-o",
|
|
$body = $("body");
|
|
|
|
if (!switchBtn.hasClass(themeWhiteKlass)) {
|
|
switchBtn
|
|
.addClass(themeWhiteKlass)
|
|
.find("i")
|
|
.attr("class", dayKlass);
|
|
|
|
$body.addClass(themeWhiteKlass);
|
|
|
|
} else {
|
|
switchBtn
|
|
.removeClass(themeWhiteKlass)
|
|
.find("i")
|
|
.attr("class", nightKlass);
|
|
|
|
$body.removeClass(themeWhiteKlass);
|
|
|
|
}
|
|
}
|
|
|
|
var toggleDescription = function() {
|
|
$(this).toggleClass("active");
|
|
descriptionArea.toggleClass("active");
|
|
}
|
|
|
|
var startLoading = function() {
|
|
loadingProcess = 1;
|
|
mainPicLoading = 0;
|
|
nextPicLoading = 0;
|
|
prevPicLoading = 0;
|
|
loader.show();
|
|
loadingInterval = setInterval(stopLoading, 300);
|
|
|
|
}
|
|
|
|
var stopLoading = function() {
|
|
if (mainPicLoading == 1 && nextPicLoading == 1 && prevPicLoading == 1) {
|
|
clearInterval(loadingInterval);
|
|
setTimeout(function() {
|
|
loadingProcess = 0;
|
|
loader.hide();
|
|
}, 100)
|
|
}
|
|
}
|
|
|
|
var createThumbStrip = function() {
|
|
if (!isTheaterInitialized) {
|
|
thumbStrip.html("")
|
|
$.each(albumData.images, function(index, image) {
|
|
var li = $("<li class='gallery-item'></li>"),
|
|
a = $("<a href=''></a>"),
|
|
img = $("<img class='gallery-thumb' src='' alt='Image Thumb'>");
|
|
a.on("click", function() {
|
|
startLoading();
|
|
var old_index = currentPic.index;
|
|
currentPic.image = albumData.images[index];
|
|
currentPic.index = index;
|
|
if (old_index > index) {
|
|
setMainPic("prev", true);
|
|
} else if (old_index < index) {
|
|
setMainPic("next", true);
|
|
}else{
|
|
setMainPic();
|
|
}
|
|
return false;
|
|
})
|
|
|
|
img.attr("src", image.file.thumb.url);
|
|
img.attr("alt", image.alt_title);
|
|
li.attr("data-index", index);
|
|
a.append(img);
|
|
li.append(a);
|
|
thumbStrip.append(li);
|
|
})
|
|
setThumbNavs();
|
|
}
|
|
setMainPic();
|
|
if (!$('.theaterButton').length) {
|
|
window.onhashchange()
|
|
}
|
|
}
|
|
|
|
|
|
var setThumbNavs = function() {
|
|
var $thumbNav = stage.find('.gallery-thumb-navs'),
|
|
$thumb = thumbStrip.find('img'),
|
|
thumbs = $thumb.length,
|
|
thumbWidth = $thumb.eq(0).width(),
|
|
thumbGap = parseInt($thumb.closest('li').css('margin-right'), 10),
|
|
widthSum = (thumbWidth + thumbGap) * thumbs,
|
|
margin = widthSum * 0.1,
|
|
totalWidth = widthSum + margin;
|
|
|
|
if (windowWidth < totalWidth) {
|
|
$thumbNav.addClass('show');
|
|
} else {
|
|
$thumbNav.removeClass('show');
|
|
}
|
|
};
|
|
|
|
function one_load(img) {
|
|
if (img[0].complete) {
|
|
setTimeout(loaded(img), 100)
|
|
} else {
|
|
setTimeout(one_load, 20)
|
|
}
|
|
}
|
|
|
|
function loaded(img) {
|
|
calculateHeight(img);
|
|
mainPicLoading = 1;
|
|
img.fadeIn(100);
|
|
}
|
|
window.setMainPic = function(direction, selectedFromStrip) {
|
|
var img = null;
|
|
$('div.gallery-show-original a').eq(0).attr('href', currentPic.image.url)
|
|
img = imageContainer.find(".gal-active");
|
|
if (direction == null) {
|
|
if (img.length==0){
|
|
img = $("<img class='gallery-image gal-active'>");
|
|
img.hide();
|
|
imageContainer.append(img);
|
|
img.one("load", function() {
|
|
one_load(img)
|
|
})
|
|
}
|
|
img.attr("src", currentPic.image.file.theater.url);
|
|
img.attr("alt", currentPic.image.alt_title);
|
|
isTheaterInitialized = true;
|
|
} else {
|
|
if (selectedFromStrip) {
|
|
img.attr("src", currentPic.image.file.theater.url);
|
|
img.attr("alt", currentPic.image.alt_title);
|
|
}else{
|
|
if (direction == "next") {
|
|
imageContainer.find(".gal-prev").remove();
|
|
img.removeClass("gal-active").addClass("gal-prev gal-inactive temp");
|
|
imageContainer.find(".gal-next").removeClass("gal-inactive gal-next").addClass("gal-active");
|
|
thumbStrip.css("left", (parseInt(thumbStrip.css("left")) - 66) + "px");
|
|
} else if (direction == "prev") {
|
|
imageContainer.find(".gal-next").remove();
|
|
img.removeClass("gal-active").addClass("gal-next gal-inactive temp");
|
|
imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active");
|
|
thumbStrip.css("left", (parseInt(thumbStrip.css("left")) + 66) + "px");
|
|
}
|
|
}
|
|
|
|
mainPicLoading = 1;
|
|
}
|
|
descriptionArea.html("<p>" + currentPic.image.description + "</p>");
|
|
if (currentPic.image.description == null) {
|
|
descriptionArea.addClass("hide");
|
|
} else {
|
|
descriptionArea.removeClass("hide");
|
|
}
|
|
if (direction != null) {
|
|
calculateHeight(imageContainer.find(".gal-active"));
|
|
}
|
|
thumbStrip.find("li.active").removeClass("active");
|
|
thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
|
|
|
|
setStripToCenter();
|
|
setNextPic();
|
|
setPrevPic();
|
|
changeUrl();
|
|
}
|
|
|
|
var calculateHeight = function(img) {
|
|
var h = 0,
|
|
w = 0,
|
|
new_width = 0;
|
|
if (!Modernizr.touch) {
|
|
if (typeof currentPic.image.height == "undefined") {
|
|
h = img.height();
|
|
currentPic.image.height = h;
|
|
w = img.width();
|
|
currentPic.image.width = w;
|
|
} else {
|
|
h = currentPic.image.height;
|
|
w = currentPic.image.width;
|
|
}
|
|
} else {
|
|
h = img.height();
|
|
w = img.width();
|
|
}
|
|
if (h > (windowHeight - 150)) {
|
|
new_width = Math.round((windowHeight - 100) * w / h);
|
|
new_width = (new_width / windowWidth) * 100;
|
|
img.width(new_width + "%");
|
|
} else {
|
|
if (windowWidth < 770) {
|
|
img.width("90%");
|
|
} else {
|
|
img.width("65%");
|
|
}
|
|
}
|
|
if (typeof set_gallery_height != 'undefined') {
|
|
set_gallery_height()
|
|
}
|
|
}
|
|
|
|
var changeUrl = function() {
|
|
window.location.hash = currentPic.image._id
|
|
}
|
|
|
|
var setStripToCenter = function() {
|
|
left = (windowWidth / 2) - (66 * currentPic.index);
|
|
thumbStrip.css("left", left + "px");
|
|
}
|
|
|
|
var setNextPic = function() {
|
|
imageContainer.find(".gal-next.temp").remove()
|
|
if (hasNextImage()) {
|
|
var obj = albumData.images[currentPic.index + 1],
|
|
nextImg = $("<img class='gallery-image gal-next gal-inactive'>");
|
|
nextImg.attr("src", obj.file.theater.url);
|
|
nextImg.attr("alt", obj.alt_title);
|
|
nextImg.hide();
|
|
imageContainer.append(nextImg);
|
|
nextImg.on("load", function() {
|
|
calculateHeight(nextImg);
|
|
nextPicLoading = 1;
|
|
nextImg.fadeIn(100);
|
|
})
|
|
} else {
|
|
nextPicLoading = 1;
|
|
$("img.gallery-image.gal-next.gal-inactive").remove();
|
|
}
|
|
}
|
|
|
|
var setPrevPic = function() {
|
|
imageContainer.find(".gal-prev.temp").remove()
|
|
if (hasPreviousImage()) {
|
|
var obj = albumData.images[currentPic.index - 1],
|
|
prevImg = $("<img class='gallery-image gal-prev gal-inactive'>");
|
|
prevImg.attr("src", obj.file.theater.url);
|
|
prevImg.attr("alt", obj.alt_title);
|
|
prevImg.hide();
|
|
imageContainer.prepend(prevImg);
|
|
prevImg.on("load", function() {
|
|
calculateHeight(prevImg);
|
|
prevPicLoading = 1;
|
|
prevImg.fadeIn(100);
|
|
})
|
|
} else {
|
|
prevPicLoading = 1;
|
|
$("img.gallery-image.gal-prev.gal-inactive").remove();
|
|
}
|
|
}
|
|
|
|
var l = function(x) {
|
|
console.log(x)
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
initialize();
|
|
});
|
|
$(window).load(function() {
|
|
set_margin();
|
|
});
|
|
}
|
|
|
|
// gallery-image gal-prev gal-inactive
|