saurabh
/
gallery
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix error

This commit is contained in:
邱博亞 2022-09-24 13:00:50 +08:00
parent 3242e76211
commit 14f4e91817
2 changed files with 1061 additions and 1034 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

475
app/assets/javascripts/theater-widget.js
View File

@ -1,13 +1,12 @@
var GalleryTheaterWidget = function(widget){ var GalleryTheaterWidget = function(widget) {
var parent_divs = widget, var parent_divs = widget,
parent_div_z_index = parent_divs.eq(parent_divs.length-1).css('z-index') 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') parent_divs.eq(parent_divs.length - 1).css('z-index', '2000')
var gt = this, var currentPic = {},
currentPic = {},
windowHeight = 0, windowHeight = 0,
windowWidth = 0, windowWidth = 0,
swipeController = null, swipeController = null,
resizing = null; resizing = null,
loadingInterval = null, loadingInterval = null,
mainPicLoading = 0, mainPicLoading = 0,
nextPicLoading = 0, nextPicLoading = 0,
@ -15,19 +14,20 @@ var GalleryTheaterWidget = function(widget){
currentSwipeImageDom = null, currentSwipeImageDom = null,
currentSwipeImageDomLeftPos = 0, currentSwipeImageDomLeftPos = 0,
windowScreenThresholdForTouch = 0, windowScreenThresholdForTouch = 0,
loadingProcess = 0; loadingProcess = 0,
gt.stage = null; stage = null,
gt.stripNextBtn = null; stripNextBtn = null,
gt.stripPrevBtn = null; stripPrevBtn = null,
gt.thumbToggle = null; thumbToggle = null,
gt.descriptionToggle = null; descriptionToggle = null,
gt.closeBtn = null; closeBtn = null,
gt.imageContainer = null; switchBtn = null,
gt.albumData = {}; imageContainer = null,
gt.loader = null; albumData = {},
gt.thumbStrip = null; loader = null,
gt.descriptionArea = null; thumbStrip = null,
gt.isTheaterInitialized = false; descriptionArea = null,
isTheaterInitialized = false;
var play_flag = false; var play_flag = false;
var button_left_string = '<button id ="theaterPreviousButton" class="theaterButton">< </button>', var button_left_string = '<button id ="theaterPreviousButton" class="theaterButton">< </button>',
@ -35,123 +35,126 @@ var GalleryTheaterWidget = function(widget){
button_play_string = '<button id ="theaterPlayButton" class="theaterButton">▶ </button>', button_play_string = '<button id ="theaterPlayButton" class="theaterButton">▶ </button>',
button_stop_string = '<button id ="theaterStopButton" class="theaterButton">|| </button>', button_stop_string = '<button id ="theaterStopButton" class="theaterButton">|| </button>',
playtimeoutID; playtimeoutID;
var initialize = function(){ var initialize = function() {
gt.stage = widget.find('#gallery-theater-stage'); stage = widget.find('#gallery-theater-stage');
gt.closeBtn = gt.stage.find(".gallery-close"); closeBtn = stage.find(".gallery-close");
gt.switchBtn = gt.stage.find(".gallery-theme-switch"); switchBtn = stage.find(".gallery-theme-switch");
gt.imageContainer = gt.stage.find(".image-container"); imageContainer = stage.find(".image-container");
gt.thumbStrip = gt.stage.find(".gallery-thumb-wrap"); thumbStrip = stage.find(".gallery-thumb-wrap");
gt.thumbToggle = gt.stage.find(".gallery-thumb-toggle"); thumbToggle = stage.find(".gallery-thumb-toggle");
gt.loader = gt.stage.find(".gallery-loader"); loader = stage.find(".gallery-loader");
gt.stripNextBtn = gt.stage.find(".gallery-thumb-next"); stripNextBtn = stage.find(".gallery-thumb-next");
gt.stripPrevBtn = gt.stage.find(".gallery-thumb-prev"); stripPrevBtn = stage.find(".gallery-thumb-prev");
gt.descriptionArea = gt.stage.find(".gallery-img-desc"); descriptionArea = stage.find(".gallery-img-desc");
gt.descriptionToggle = gt.stage.find(".gallery-toggle-desc"); descriptionToggle = stage.find(".gallery-toggle-desc");
windowScreenThresholdForTouch = windowWidth / 3; windowScreenThresholdForTouch = windowWidth / 3;
startLoading(); startLoading();
windowHeight = $(window).height(); windowHeight = $(window).height();
windowWidth = $(window).width(); windowWidth = $(window).width();
var addButton = function () { var addButton = function() {
widget.find('.theaterButton').remove(); widget.find('.theaterButton').remove();
if (!play_flag){ if (!play_flag) {
$(button_left_string+button_play_string+button_right_string).insertAfter(widget.find('img.gal-active')); $(button_left_string + button_play_string + button_right_string).insertAfter(widget.find('img.gal-active'));
} else {
$(button_left_string + button_stop_string + button_right_string).insertAfter(widget.find('img.gal-active'));
} }
else{ if (!widget.find(".gal-prev").length) {
$(button_left_string+button_stop_string+button_right_string).insertAfter(widget.find('img.gal-active')); widget.find('#theaterPreviousButton').remove();
}
if (!widget.find(".gal-next").length) {
widget.find('#theaterNextButton').remove();
} }
if (!widget.find(".gal-prev").length) { widget.find('#theaterPreviousButton').remove(); }
if (!widget.find(".gal-next").length) { widget.find('#theaterNextButton').remove(); }
widget.find('#theaterPreviousButton').click(function () { widget.find('#theaterPreviousButton').click(function() {
gt.previousPic(); previousPic();
addButton() addButton()
}); });
widget.find('#theaterNextButton').click(function () { widget.find('#theaterNextButton').click(function() {
gt.nextPic(); nextPic();
addButton() addButton()
}); });
widget.find('#theaterPlayButton').click(function () { widget.find('#theaterPlayButton').click(function() {
play_flag = true; play_flag = true;
playtimeoutID = window.setInterval(function(){ playtimeoutID = window.setInterval(function() {
gt.playallPic(); playallPic();
},3000) }, 3000)
addButton() addButton()
}); });
widget.find('#theaterStopButton').click(function () { widget.find('#theaterStopButton').click(function() {
play_flag = false; play_flag = false;
addButton() addButton()
window.clearInterval(playtimeoutID) window.clearInterval(playtimeoutID)
}); });
} }
bindHandler(); bindHandler();
gt.createTheater(); createTheater();
addButton(); addButton();
} }
var bindHandler = function(){ var bindHandler = function() {
// handler to close the theater // handler to close the theater
gt.closeBtn.on("click",gt.destroyTheater); closeBtn.on("click", destroyTheater);
// handler to show theater // handler to show theater
widget.find("div[data-list=images] a").on("click",function(){ widget.find("div[data-list=images] a").on("click", function() {
gt.createTheater(); createTheater();
return false; return false;
}) })
gt.switchBtn.on("click",gt.switchTheme); switchBtn.on("click", switchTheme);
gt.descriptionToggle.on("click", gt.toggleDescription) descriptionToggle.on("click", toggleDescription)
gt.stripPrevBtn.on("click", gt.scrollStripRight); stripPrevBtn.on("click", scrollStripRight);
gt.stripNextBtn.on("click", gt.scrollStripLeft); stripNextBtn.on("click", scrollStripLeft);
if(Modernizr.touch){ if (Modernizr.touch) {
gt.imageContainer.swipe({ imageContainer.swipe({
swipe : function(event, direction, distance, duration, fingerCount){ swipe: function(event, direction, distance, duration, fingerCount) {
if(direction == "left"){ if (direction == "left") {
gt.nextPic(); nextPic();
}else if(direction == "right"){ } else if (direction == "right") {
gt.previousPic(); previousPic();
} }
} }
}) })
gt.thumbToggle.swipe({ thumbToggle.swipe({
swipe : function(event, direction, distance, duration, fingerCount){ swipe: function(event, direction, distance, duration, fingerCount) {
if(direction == "up"){ if (direction == "up") {
gt.thumbStrip.parent().addClass("show"); thumbStrip.parent().addClass("show");
gt.thumbToggle.addClass("up"); thumbToggle.addClass("up");
gt.thumbToggle.find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down"); thumbToggle.find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down");
}else if(direction == "down"){ } else if (direction == "down") {
gt.thumbStrip.parent().removeClass("show"); thumbStrip.parent().removeClass("show");
gt.thumbToggle.removeClass("up"); thumbToggle.removeClass("up");
gt.thumbToggle.find("i").removeClass("fa-angle-double-down").addClass("fa-angle-double-up"); thumbToggle.find("i").removeClass("fa-angle-double-down").addClass("fa-angle-double-up");
} }
} }
}) })
} }
//handler for window resize //handler for window resize
$(window).resize(function(){ $(window).resize(function() {
clearTimeout(resizing); clearTimeout(resizing);
resizing = setTimeout(doneResizing,1000); resizing = setTimeout(doneResizing, 1000);
}) })
} }
var bindKeyHandlers = function(){ var bindKeyHandlers = function() {
if(!Modernizr.touch){ if (!Modernizr.touch) {
widget.on("click",".gal-active", gt.nextPic); widget.on("click", ".gal-active", nextPic);
widget.on("click",".gal-prev", gt.previousPic); widget.on("click", ".gal-prev", previousPic);
widget.on("click",".gal-next", gt.nextPic); widget.on("click", ".gal-next", nextPic);
$(document).on("keyup",function(e){ $(document).on("keyup", function(e) {
switch(e.keyCode){ switch (e.keyCode) {
case 39: case 39:
gt.nextPic(); nextPic();
break; break;
case 37: case 37:
gt.previousPic(); previousPic();
break; break;
case 27: case 27:
gt.destroyTheater(); destroyTheater();
break; break;
} }
}) })
@ -159,131 +162,139 @@ var GalleryTheaterWidget = function(widget){
} }
var doneResizing = function(){ var doneResizing = function() {
windowHeight = $(window).height(); windowHeight = $(window).height();
windowWidth = $(window).width(); windowWidth = $(window).width();
setThumbNavs(); setThumbNavs();
} }
var unBindKeyHandlers = function(){ var unBindKeyHandlers = function() {
$(document).unbind("keyup"); $(document).unbind("keyup");
} }
gt.destroyTheater = function(){ var destroyTheater = function() {
parent_divs.eq(parent_divs.length-1).css('z-index',parent_div_z_index) parent_divs.eq(parent_divs.length - 1).css('z-index', parent_div_z_index)
gt.stage.hide(); stage.hide();
widget.removeClass("gallery-mode-on"); widget.removeClass("gallery-mode-on");
gt.imageContainer.empty() imageContainer.empty()
unBindKeyHandlers(); unBindKeyHandlers();
} }
gt.createTheater = function(){ var createTheater = function() {
gt.stage.show(); stage.show();
widget.addClass("gallery-mode-on"); widget.addClass("gallery-mode-on");
bindKeyHandlers(); bindKeyHandlers();
gt.isTheaterInitialized = false; isTheaterInitialized = false;
gt.albumData = {} albumData = {}
gt.albumData.images = $.map(widget.find('img.gallery-thumb'),function(v){ albumData.images = $.map(widget.find('img.gallery-thumb'), function(v) {
var url = $(v).attr('data-link'), var url = $(v).attr('data-link'),
theater_url = $(v).attr('data-theater-url'), theater_url = $(v).attr('data-theater-url'),
thumb_url = $(v).attr('src') thumb_url = $(v).attr('src')
return {'url': url, return {
'file': {'theater': {url: theater_url}, 'url': url,
'thumb': {url: thumb_url} 'file': {
'theater': {
url: theater_url
},
'thumb': {
url: thumb_url
}
} }
} }
}) })
var cp = gt.albumData.images[0]; var cp = albumData.images[0];
currentPic = {"image" : cp, "index" : 0}; currentPic = {
"image": cp,
"index": 0
};
createThumbStrip(); createThumbStrip();
currentPic = currentPic; currentPic = currentPic;
} }
gt.hasNextImage = function(){ var hasNextImage = function() {
return (currentPic.index + 1) <= (gt.albumData.images.length - 1); return (currentPic.index + 1) <= (albumData.images.length - 1);
} }
gt.hasPreviousImage = function(){ var hasPreviousImage = function() {
return (currentPic.index > 0); return (currentPic.index > 0);
} }
gt.nextPic = function(){ var nextPic = function() {
if(loadingProcess == 0){ if (loadingProcess == 0) {
if(gt.hasNextImage()){ if (hasNextImage()) {
startLoading(); startLoading();
currentPic.image = gt.albumData.images[currentPic.index + 1]; currentPic.image = albumData.images[currentPic.index + 1];
currentPic.index = currentPic.index + 1; currentPic.index = currentPic.index + 1;
setMainPic("next"); setMainPic("next");
} }
} }
} }
gt.playallPic = function(){ var playallPic = function() {
if(loadingProcess == 0){ if (loadingProcess == 0) {
mainPicLoading = 1; mainPicLoading = 1;
nextPicLoading = 1; nextPicLoading = 1;
prevPicLoading = 1; prevPicLoading = 1;
if(gt.hasNextImage()){ if (hasNextImage()) {
currentPic.image = gt.albumData.images[currentPic.index + 1]; currentPic.image = albumData.images[currentPic.index + 1];
currentPic.index = currentPic.index + 1; currentPic.index = currentPic.index + 1;
setMainPic("next"); setMainPic("next");
} } else {
else{ currentPic.image = albumData.images[0];
currentPic.image = gt.albumData.images[0];
currentPic.index = 0; currentPic.index = 0;
setMainPic(); setMainPic();
gt.isTheaterInitialized = false; isTheaterInitialized = false;
setTimeout(function(){ setTimeout(function() {
loadingProcess = 0; loadingProcess = 0;
nextPicLoading = 0; nextPicLoading = 0;
widget.find('.theaterButton').remove() widget.find('.theaterButton').remove()
widget.find("img.gallery-image.gal-prev.gal-inactive").remove(); widget.find("img.gallery-image.gal-prev.gal-inactive").remove();
img = widget.find("img.gallery-image.gal-active"); img = widget.find("img.gallery-image.gal-active");
img.eq(0).remove(); img.eq(0).remove();
},100) }, 100)
} }
} }
} }
gt.previousPic = function(){ var previousPic = function() {
if(loadingProcess == 0){ if (loadingProcess == 0) {
if(gt.hasPreviousImage()) { if (hasPreviousImage()) {
startLoading(); startLoading();
currentPic.image = gt.albumData.images[currentPic.index - 1]; currentPic.image = albumData.images[currentPic.index - 1];
currentPic.index = currentPic.index - 1; currentPic.index = currentPic.index - 1;
setMainPic("prev"); setMainPic("prev");
} }
} }
} }
gt.scrollStripLeft = function(){ var scrollStripLeft = function() {
pixels_to_move = parseInt(gt.thumbStrip.css("left")) - (66 * 3); pixels_to_move = parseInt(thumbStrip.css("left")) - (66 * 3);
maximum_pixels = (windowWidth / 2) - (66 * (gt.albumData.images.length - 1)); maximum_pixels = (windowWidth / 2) - (66 * (albumData.images.length - 1));
if(pixels_to_move < maximum_pixels){ if (pixels_to_move < maximum_pixels) {
pixels_to_move = maximum_pixels; pixels_to_move = maximum_pixels;
} }
gt.thumbStrip.css("left",pixels_to_move + "px"); thumbStrip.css("left", pixels_to_move + "px");
} }
gt.scrollStripRight = function(){ var scrollStripRight = function() {
pixels_to_move = parseInt(gt.thumbStrip.css("left")) + (66 * 3); pixels_to_move = parseInt(thumbStrip.css("left")) + (66 * 3);
maximum_pixels = (windowWidth / 2); maximum_pixels = (windowWidth / 2);
if(pixels_to_move > maximum_pixels){ if (pixels_to_move > maximum_pixels) {
pixels_to_move = maximum_pixels; pixels_to_move = maximum_pixels;
} }
gt.thumbStrip.css("left",pixels_to_move + "px"); thumbStrip.css("left", pixels_to_move + "px");
} }
gt.switchTheme = function(){ var switchTheme = function() {
var themeWhiteKlass = "theme-white", var themeWhiteKlass = "theme-white",
nightKlass = "fa fa-circle", nightKlass = "fa fa-circle",
dayKlass = "fa fa-circle-o", dayKlass = "fa fa-circle-o",
$body = widget; $body = widget;
if (!gt.switchBtn.hasClass(themeWhiteKlass)) { if (!switchBtn.hasClass(themeWhiteKlass)) {
gt.switchBtn switchBtn
.addClass(themeWhiteKlass) .addClass(themeWhiteKlass)
.find("i") .find("i")
.attr("class", dayKlass); .attr("class", dayKlass);
@ -291,7 +302,7 @@ var GalleryTheaterWidget = function(widget){
$body.addClass(themeWhiteKlass); $body.addClass(themeWhiteKlass);
} else { } else {
gt.switchBtn switchBtn
.removeClass(themeWhiteKlass) .removeClass(themeWhiteKlass)
.find("i") .find("i")
.attr("class", nightKlass); .attr("class", nightKlass);
@ -301,57 +312,57 @@ var GalleryTheaterWidget = function(widget){
} }
} }
gt.toggleDescription = function(){ var toggleDescription = function() {
$(this).toggleClass("active"); $(this).toggleClass("active");
gt.descriptionArea.toggleClass("active"); descriptionArea.toggleClass("active");
} }
var startLoading = function(){ var startLoading = function() {
loadingProcess = 1; loadingProcess = 1;
mainPicLoading = 0; mainPicLoading = 0;
nextPicLoading = 0; nextPicLoading = 0;
prevPicLoading = 0; prevPicLoading = 0;
gt.loader.show(); loader.show();
loadingInterval = setInterval(stopLoading, 300); loadingInterval = setInterval(stopLoading, 300);
} }
var stopLoading = function(){ var stopLoading = function() {
if(mainPicLoading == 1 && nextPicLoading == 1 && prevPicLoading == 1){ if (mainPicLoading == 1 && nextPicLoading == 1 && prevPicLoading == 1) {
clearInterval(loadingInterval); clearInterval(loadingInterval);
setTimeout(function(){ setTimeout(function() {
loadingProcess = 0; loadingProcess = 0;
gt.loader.hide(); loader.hide();
},100) }, 100)
} }
} }
var createThumbStrip = function(){ var createThumbStrip = function() {
if(!gt.isTheaterInitialized){ if (!isTheaterInitialized) {
gt.thumbStrip.html('') thumbStrip.html('')
$.each(gt.albumData.images,function(index, image){ $.each(albumData.images, function(index, image) {
var li = $("<li class='gallery-item'></li>"), var li = $("<li class='gallery-item'></li>"),
a = $("<a style=\"cursor: pointer;\"></a>"), a = $("<a style=\"cursor: pointer;\"></a>"),
img = $("<img class='gallery-thumb' src='' alt='Image Thumb'>"); img = $("<img class='gallery-thumb' src='' alt='Image Thumb'>");
a.on("click",function(){ a.on("click", function() {
startLoading(); startLoading();
var old_index = currentPic.index; var old_index = currentPic.index;
currentPic.image = gt.albumData.images[index]; currentPic.image = albumData.images[index];
currentPic.index = index; currentPic.index = index;
if(old_index > index){ if (old_index > index) {
setMainPic("prev",true); setMainPic("prev", true);
}else if(old_index < index){ } else if (old_index < index) {
setMainPic("next",true); setMainPic("next", true);
} }
return false; return false;
}) })
img.attr("src",image.file.thumb.url); img.attr("src", image.file.thumb.url);
img.attr("alt",image.alt_title); img.attr("alt", image.alt_title);
li.attr("data-index",index); li.attr("data-index", index);
a.append(img); a.append(img);
li.append(a); li.append(a);
gt.thumbStrip.append(li); thumbStrip.append(li);
}) })
setThumbNavs(); setThumbNavs();
} }
@ -360,8 +371,8 @@ var GalleryTheaterWidget = function(widget){
var setThumbNavs = function() { var setThumbNavs = function() {
var $thumbNav = gt.stage.find('.gallery-thumb-navs'), var $thumbNav = stage.find('.gallery-thumb-navs'),
$thumb = gt.thumbStrip.find('img'), $thumb = thumbStrip.find('img'),
thumbs = $thumb.length, thumbs = $thumb.length,
thumbWidth = $thumb.eq(0).width(), thumbWidth = $thumb.eq(0).width(),
thumbGap = parseInt($thumb.closest('li').css('margin-right'), 10), thumbGap = parseInt($thumb.closest('li').css('margin-right'), 10),
@ -371,164 +382,166 @@ var GalleryTheaterWidget = function(widget){
if (windowWidth < totalWidth) { if (windowWidth < totalWidth) {
$thumbNav.addClass('show'); $thumbNav.addClass('show');
}else{ } else {
$thumbNav.removeClass('show'); $thumbNav.removeClass('show');
} }
}; };
function one_load(img){
if (img[0].complete){ function one_load(img) {
setTimeout(loaded(img),100) if (img[0].complete) {
}else{ setTimeout(loaded(img), 100)
setTimeout(one_load,20) } else {
setTimeout(one_load, 20)
} }
} }
function loaded(img){
function loaded(img) {
calculateHeight(img); calculateHeight(img);
mainPicLoading = 1; mainPicLoading = 1;
img.fadeIn(100); img.fadeIn(100);
} }
window.setMainPic = function(direction,selectedFromStrip){ window.setMainPic = function(direction, selectedFromStrip) {
var img = null; var img = null;
widget.find('div.gallery-show-original a').eq(0).attr('href',currentPic.image.url) widget.find('div.gallery-show-original a').eq(0).attr('href', currentPic.image.url)
if(direction == null){ if (direction == null) {
img = $("<img class='gallery-image gal-active'>"); img = $("<img class='gallery-image gal-active'>");
img.hide(); img.hide();
img.attr("src", currentPic.image.file.theater.url); img.attr("src", currentPic.image.file.theater.url);
gt.imageContainer.append(img); imageContainer.append(img);
img.one("load", function(){ img.one("load", function() {
one_load(img) one_load(img)
}) })
gt.isTheaterInitialized = true; isTheaterInitialized = true;
}else{ } else {
img = gt.imageContainer.find(".gal-active"); img = imageContainer.find(".gal-active");
if(selectedFromStrip){ if (selectedFromStrip) {
gt.imageContainer.find(".gal-" + direction).attr("src",currentPic.image.file.theater.url); imageContainer.find(".gal-" + direction).attr("src", currentPic.image.file.theater.url);
} }
if(direction == "next"){ if (direction == "next") {
gt.imageContainer.find(".gal-prev").remove(); imageContainer.find(".gal-prev").remove();
img.removeClass("gal-active").addClass("gal-prev gal-inactive temp"); img.removeClass("gal-active").addClass("gal-prev gal-inactive temp");
gt.imageContainer.find(".gal-next").removeClass("gal-inactive gal-next").addClass("gal-active"); imageContainer.find(".gal-next").removeClass("gal-inactive gal-next").addClass("gal-active");
gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) - 66) + "px"); thumbStrip.css("left", (parseInt(thumbStrip.css("left")) - 66) + "px");
}else if(direction == "prev"){ } else if (direction == "prev") {
gt.imageContainer.find(".gal-next").remove(); imageContainer.find(".gal-next").remove();
img.removeClass("gal-active").addClass("gal-next gal-inactive temp"); img.removeClass("gal-active").addClass("gal-next gal-inactive temp");
gt.imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active"); imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active");
gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) + 66) + "px"); thumbStrip.css("left", (parseInt(thumbStrip.css("left")) + 66) + "px");
} }
mainPicLoading = 1; mainPicLoading = 1;
} }
gt.descriptionArea.html("<p>" + currentPic.image.description + "</p>"); descriptionArea.html("<p>" + currentPic.image.description + "</p>");
if(currentPic.image.description == null){ if (currentPic.image.description == null) {
gt.descriptionArea.addClass("hide"); descriptionArea.addClass("hide");
}else{ } else {
gt.descriptionArea.removeClass("hide"); descriptionArea.removeClass("hide");
} }
if (direction!=null){ if (direction != null) {
calculateHeight(gt.imageContainer.find(".gal-active")); calculateHeight(imageContainer.find(".gal-active"));
} }
gt.thumbStrip.find("li.active").removeClass("active"); thumbStrip.find("li.active").removeClass("active");
gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active"); thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
setStripToCenter(); setStripToCenter();
setNextPic(); setNextPic();
setPrevPic(); setPrevPic();
} }
var calculateHeight = function(img){ var calculateHeight = function(img) {
var h = 0, var h = 0,
w = 0, w = 0,
new_width = 0; new_width = 0;
if(!Modernizr.touch){ if (!Modernizr.touch) {
if(typeof currentPic.image.height == "undefined"){ if (typeof currentPic.image.height == "undefined") {
h = img.height(); h = img.height();
currentPic.image.height = h; currentPic.image.height = h;
w = img.width(); w = img.width();
currentPic.image.width = w; currentPic.image.width = w;
}else{ } else {
h = currentPic.image.height; h = currentPic.image.height;
w = currentPic.image.width; w = currentPic.image.width;
} }
}else{ } else {
h = img.height(); h = img.height();
w = img.width(); w = img.width();
} }
if(h > (windowHeight - 150)){ if (h > (windowHeight - 150)) {
new_width = Math.round((windowHeight - 100) * w / h); new_width = Math.round((windowHeight - 100) * w / h);
new_width = (new_width / windowWidth) * 100; new_width = (new_width / windowWidth) * 100;
img.width(new_width + "%"); img.width(new_width + "%");
}else{ } else {
if(windowWidth < 770){ if (windowWidth < 770) {
img.width("90%"); img.width("90%");
}else{ } else {
img.width("65%"); img.width("65%");
} }
} }
if (typeof set_gallery_height != 'undefined'){ if (typeof set_gallery_height != 'undefined') {
set_gallery_height(widget) set_gallery_height(widget)
} }
} }
var setStripToCenter = function(){ var setStripToCenter = function() {
left = (windowWidth / 2) - (66 * currentPic.index); left = (windowWidth / 2) - (66 * currentPic.index);
gt.thumbStrip.css("left",left + "px"); thumbStrip.css("left", left + "px");
} }
var setNextPic = function(){ var setNextPic = function() {
gt.imageContainer.find(".gal-next.temp").remove() imageContainer.find(".gal-next.temp").remove()
if(gt.hasNextImage()) { if (hasNextImage()) {
var obj = gt.albumData.images[currentPic.index + 1], var obj = albumData.images[currentPic.index + 1],
nextImg = $("<img class='gallery-image gal-next gal-inactive'>"); nextImg = $("<img class='gallery-image gal-next gal-inactive'>");
nextImg.attr("src",obj.file.theater.url); nextImg.attr("src", obj.file.theater.url);
nextImg.hide(); nextImg.hide();
gt.imageContainer.append(nextImg); imageContainer.append(nextImg);
nextImg.on("load",function(){ nextImg.on("load", function() {
calculateHeight(nextImg); calculateHeight(nextImg);
nextPicLoading = 1; nextPicLoading = 1;
nextImg.fadeIn(100); nextImg.fadeIn(100);
}) })
}else{ } else {
nextPicLoading = 1; nextPicLoading = 1;
} }
} }
var setPrevPic = function(){ var setPrevPic = function() {
gt.imageContainer.find(".gal-prev.temp").remove() imageContainer.find(".gal-prev.temp").remove()
if(gt.hasPreviousImage()) { if (hasPreviousImage()) {
var obj = gt.albumData.images[currentPic.index - 1], var obj = albumData.images[currentPic.index - 1],
prevImg = $("<img class='gallery-image gal-prev gal-inactive'>"); prevImg = $("<img class='gallery-image gal-prev gal-inactive'>");
prevImg.attr("src",obj.file.theater.url); prevImg.attr("src", obj.file.theater.url);
prevImg.hide(); prevImg.hide();
gt.imageContainer.prepend(prevImg); imageContainer.prepend(prevImg);
prevImg.on("load",function(){ prevImg.on("load", function() {
calculateHeight(prevImg); calculateHeight(prevImg);
prevPicLoading = 1; prevPicLoading = 1;
prevImg.fadeIn(100); prevImg.fadeIn(100);
}) })
}else{ } else {
prevPicLoading = 1; prevPicLoading = 1;
} }
} }
var l = function(x){ var l = function(x) {
console.log(x) console.log(x)
} }
initialize(); initialize();
} }
if (typeof bind_gallery_widget_slide == 'undefined'){ if (typeof bind_gallery_widget_slide == 'undefined') {
function set_gallery_height(widget){ function set_gallery_height(widget) {
var h = widget.find('.gallery-thumb-container').height()+widget.find('.gallery-image.gal-active').height()+widget.find('.gallery-actions').height()+widget.find('.theaterButton').height()+20 var h = widget.find('.gallery-thumb-container').height() + widget.find('.gallery-image.gal-active').height() + widget.find('.gallery-actions').height() + widget.find('.theaterButton').height() + 20
widget.find('.show-gallery-2.gallery').css('height',h) widget.find('.show-gallery-2.gallery').css('height', h)
} }
var bind_gallery_widget_slide = function(){ var bind_gallery_widget_slide = function() {
$('.widget-gallery.widget5').each(function(){ $('.widget-gallery.widget5').each(function() {
GalleryTheaterWidget($(this)); GalleryTheaterWidget($(this));
$(window).resize(function(){ $(window).resize(function() {
set_gallery_height($(this)) set_gallery_height($(this))
}); });
}) })
} }
$(document).ready(function(){ $(document).ready(function() {
bind_gallery_widget_slide() bind_gallery_widget_slide()
}) })
} }

486
app/assets/javascripts/theater.js
View File

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