From 14f4e918177878d16086d99fa62333c2b8d1c7ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=B1=E5=8D=9A=E4=BA=9E?= Date: Sat, 24 Sep 2022 13:00:50 +0800 Subject: [PATCH] fix error --- app/assets/javascripts/theater-widget.js | 1037 ++++++++++----------- app/assets/javascripts/theater.js | 1058 +++++++++++----------- 2 files changed, 1061 insertions(+), 1034 deletions(-) diff --git a/app/assets/javascripts/theater-widget.js b/app/assets/javascripts/theater-widget.js index a3653d3..0967b62 100644 --- a/app/assets/javascripts/theater-widget.js +++ b/app/assets/javascripts/theater-widget.js @@ -1,536 +1,549 @@ -var GalleryTheaterWidget = function(widget){ - var parent_divs = widget, - 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 gt = this, - 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; - gt.stage = null; - gt.stripNextBtn = null; - gt.stripPrevBtn = null; - gt.thumbToggle = null; - gt.descriptionToggle = null; - gt.closeBtn = null; - gt.imageContainer = null; - gt.albumData = {}; - gt.loader = null; - gt.thumbStrip = null; - gt.descriptionArea = null; - gt.isTheaterInitialized = false; +var GalleryTheaterWidget = function(widget) { + var parent_divs = widget, + 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_right_string = '', - button_play_string = '', - button_stop_string = '', - playtimeoutID; - var initialize = function(){ - gt.stage = widget.find('#gallery-theater-stage'); - gt.closeBtn = gt.stage.find(".gallery-close"); - gt.switchBtn = gt.stage.find(".gallery-theme-switch"); - gt.imageContainer = gt.stage.find(".image-container"); - gt.thumbStrip = gt.stage.find(".gallery-thumb-wrap"); - gt.thumbToggle = gt.stage.find(".gallery-thumb-toggle"); - gt.loader = gt.stage.find(".gallery-loader"); - gt.stripNextBtn = gt.stage.find(".gallery-thumb-next"); - gt.stripPrevBtn = gt.stage.find(".gallery-thumb-prev"); - gt.descriptionArea = gt.stage.find(".gallery-img-desc"); - gt.descriptionToggle = gt.stage.find(".gallery-toggle-desc"); - windowScreenThresholdForTouch = windowWidth / 3; - startLoading(); - windowHeight = $(window).height(); - windowWidth = $(window).width(); - var addButton = function () { - widget.find('.theaterButton').remove(); - if (!play_flag){ - $(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')); - } - 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 () { - gt.previousPic(); - addButton() - }); - widget.find('#theaterNextButton').click(function () { - gt.nextPic(); - addButton() - }); - widget.find('#theaterPlayButton').click(function () { - play_flag = true; - playtimeoutID = window.setInterval(function(){ - gt.playallPic(); - },3000) - addButton() - }); - widget.find('#theaterStopButton').click(function () { - play_flag = false; - addButton() - window.clearInterval(playtimeoutID) - }); - } - bindHandler(); - gt.createTheater(); - - addButton(); - - } - - var bindHandler = function(){ - // handler to close the theater - gt.closeBtn.on("click",gt.destroyTheater); - - // handler to show theater - widget.find("div[data-list=images] a").on("click",function(){ - gt.createTheater(); - return false; - }) - - gt.switchBtn.on("click",gt.switchTheme); - gt.descriptionToggle.on("click", gt.toggleDescription) - gt.stripPrevBtn.on("click", gt.scrollStripRight); - gt.stripNextBtn.on("click", gt.scrollStripLeft); - - if(Modernizr.touch){ - gt.imageContainer.swipe({ - swipe : function(event, direction, distance, duration, fingerCount){ - if(direction == "left"){ - gt.nextPic(); - }else if(direction == "right"){ - gt.previousPic(); - } - } - }) - gt.thumbToggle.swipe({ - swipe : function(event, direction, distance, duration, fingerCount){ - if(direction == "up"){ - gt.thumbStrip.parent().addClass("show"); - gt.thumbToggle.addClass("up"); - gt.thumbToggle.find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down"); - }else if(direction == "down"){ - gt.thumbStrip.parent().removeClass("show"); - gt.thumbToggle.removeClass("up"); - gt.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){ - widget.on("click",".gal-active", gt.nextPic); - widget.on("click",".gal-prev", gt.previousPic); - widget.on("click",".gal-next", gt.nextPic); - $(document).on("keyup",function(e){ - switch(e.keyCode){ - case 39: - gt.nextPic(); - break; - case 37: - gt.previousPic(); - break; - case 27: - gt.destroyTheater(); - break; - } - }) - } - } - - - var doneResizing = function(){ - windowHeight = $(window).height(); - windowWidth = $(window).width(); - setThumbNavs(); - } - - var unBindKeyHandlers = function(){ - $(document).unbind("keyup"); - } - - gt.destroyTheater = function(){ - parent_divs.eq(parent_divs.length-1).css('z-index',parent_div_z_index) - gt.stage.hide(); - widget.removeClass("gallery-mode-on"); - gt.imageContainer.empty() - unBindKeyHandlers(); - } - - gt.createTheater = function(){ - gt.stage.show(); - widget.addClass("gallery-mode-on"); - bindKeyHandlers(); - gt.isTheaterInitialized = false; - gt.albumData = {} - gt.albumData.images = $.map(widget.find('img.gallery-thumb'),function(v){ - var url = $(v).attr('data-link'), - theater_url = $(v).attr('data-theater-url'), - thumb_url = $(v).attr('src') - return {'url': url, - 'file': {'theater': {url: theater_url}, - 'thumb': {url: thumb_url} - } - } - }) - var cp = gt.albumData.images[0]; - currentPic = {"image" : cp, "index" : 0}; - createThumbStrip(); - - currentPic = currentPic; - } - - gt.hasNextImage = function(){ - return (currentPic.index + 1) <= (gt.albumData.images.length - 1); - } - - gt.hasPreviousImage = function(){ - return (currentPic.index > 0); - } - - gt.nextPic = function(){ - if(loadingProcess == 0){ - if(gt.hasNextImage()){ + var play_flag = false; + var button_left_string = '', + button_right_string = '', + button_play_string = '', + button_stop_string = '', + playtimeoutID; + var initialize = function() { + stage = widget.find('#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(); - currentPic.image = gt.albumData.images[currentPic.index + 1]; - currentPic.index = currentPic.index + 1; - setMainPic("next"); - } - } - } - gt.playallPic = function(){ - if(loadingProcess == 0){ - mainPicLoading = 1; - nextPicLoading = 1; - prevPicLoading = 1; - if(gt.hasNextImage()){ - currentPic.image = gt.albumData.images[currentPic.index + 1]; - currentPic.index = currentPic.index + 1; - setMainPic("next"); - } - else{ - currentPic.image = gt.albumData.images[0]; - currentPic.index = 0; - setMainPic(); - gt.isTheaterInitialized = false; - setTimeout(function(){ - loadingProcess = 0; - nextPicLoading = 0; - widget.find('.theaterButton').remove() - widget.find("img.gallery-image.gal-prev.gal-inactive").remove(); - img = widget.find("img.gallery-image.gal-active"); - img.eq(0).remove(); - },100) - } - } - } - - - gt.previousPic = function(){ - if(loadingProcess == 0){ - if(gt.hasPreviousImage()) { - startLoading(); - currentPic.image = gt.albumData.images[currentPic.index - 1]; - currentPic.index = currentPic.index - 1; - setMainPic("prev"); - } - } - } - - gt.scrollStripLeft = function(){ - pixels_to_move = parseInt(gt.thumbStrip.css("left")) - (66 * 3); - maximum_pixels = (windowWidth / 2) - (66 * (gt.albumData.images.length - 1)); - if(pixels_to_move < maximum_pixels){ - pixels_to_move = maximum_pixels; - } - gt.thumbStrip.css("left",pixels_to_move + "px"); - } - - gt.scrollStripRight = function(){ - pixels_to_move = parseInt(gt.thumbStrip.css("left")) + (66 * 3); - maximum_pixels = (windowWidth / 2); - if(pixels_to_move > maximum_pixels){ - pixels_to_move = maximum_pixels; - } - gt.thumbStrip.css("left",pixels_to_move + "px"); - } - - - gt.switchTheme = function(){ - var themeWhiteKlass = "theme-white", - nightKlass = "fa fa-circle", - dayKlass = "fa fa-circle-o", - $body = widget; - - if (!gt.switchBtn.hasClass(themeWhiteKlass)) { - gt.switchBtn - .addClass(themeWhiteKlass) - .find("i") - .attr("class", dayKlass); - - $body.addClass(themeWhiteKlass); - - } else { - gt.switchBtn - .removeClass(themeWhiteKlass) - .find("i") - .attr("class", nightKlass); - - $body.removeClass(themeWhiteKlass); - - } - } - - gt.toggleDescription = function(){ - $(this).toggleClass("active"); - gt.descriptionArea.toggleClass("active"); - } - - var startLoading = function(){ - loadingProcess = 1; - mainPicLoading = 0; - nextPicLoading = 0; - prevPicLoading = 0; - gt.loader.show(); - loadingInterval = setInterval(stopLoading, 300); - - } - - var stopLoading = function(){ - if(mainPicLoading == 1 && nextPicLoading == 1 && prevPicLoading == 1){ - clearInterval(loadingInterval); - setTimeout(function(){ - loadingProcess = 0; - gt.loader.hide(); - },100) - } - } - - var createThumbStrip = function(){ - if(!gt.isTheaterInitialized){ - gt.thumbStrip.html('') - $.each(gt.albumData.images,function(index, image){ - var li = $("
  • "), - a = $(""), - img = $("Image Thumb"); - a.on("click",function(){ - startLoading(); - var old_index = currentPic.index; - currentPic.image = gt.albumData.images[index]; - currentPic.index = index; - if(old_index > index){ - setMainPic("prev",true); - }else if(old_index < index){ - setMainPic("next",true); + windowHeight = $(window).height(); + windowWidth = $(window).width(); + var addButton = function() { + widget.find('.theaterButton').remove(); + if (!play_flag) { + $(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')); } + 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() { + previousPic(); + addButton() + }); + widget.find('#theaterNextButton').click(function() { + nextPic(); + addButton() + }); + widget.find('#theaterPlayButton').click(function() { + play_flag = true; + playtimeoutID = window.setInterval(function() { + playallPic(); + }, 3000) + addButton() + }); + widget.find('#theaterStopButton').click(function() { + play_flag = false; + addButton() + window.clearInterval(playtimeoutID) + }); + } + bindHandler(); + createTheater(); + + addButton(); + + } + + var bindHandler = function() { + // handler to close the theater + closeBtn.on("click", destroyTheater); + + // handler to show theater + widget.find("div[data-list=images] a").on("click", function() { + createTheater(); 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); - gt.thumbStrip.append(li); - }) - setThumbNavs(); + }) + + switchBtn.on("click", switchTheme); + descriptionToggle.on("click", toggleDescription) + stripPrevBtn.on("click", scrollStripRight); + stripNextBtn.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) { + widget.on("click", ".gal-active", nextPic); + widget.on("click", ".gal-prev", previousPic); + widget.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; + } + }) + } } - setMainPic(); - } - var setThumbNavs = function() { - var $thumbNav = gt.stage.find('.gallery-thumb-navs'), - $thumb = gt.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; + var doneResizing = function() { + windowHeight = $(window).height(); + windowWidth = $(window).width(); + setThumbNavs(); + } - if (windowWidth < totalWidth) { - $thumbNav.addClass('show'); - }else{ - $thumbNav.removeClass('show'); + var unBindKeyHandlers = function() { + $(document).unbind("keyup"); } - }; - 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; - widget.find('div.gallery-show-original a').eq(0).attr('href',currentPic.image.url) - if(direction == null){ - img = $(""); - img.hide(); - img.attr("src", currentPic.image.file.theater.url); - gt.imageContainer.append(img); - img.one("load", function(){ - one_load(img) - }) - gt.isTheaterInitialized = true; - }else{ - img = gt.imageContainer.find(".gal-active"); - if(selectedFromStrip){ - gt.imageContainer.find(".gal-" + direction).attr("src",currentPic.image.file.theater.url); - } - if(direction == "next"){ - gt.imageContainer.find(".gal-prev").remove(); - img.removeClass("gal-active").addClass("gal-prev gal-inactive temp"); - gt.imageContainer.find(".gal-next").removeClass("gal-inactive gal-next").addClass("gal-active"); - gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) - 66) + "px"); - }else if(direction == "prev"){ - gt.imageContainer.find(".gal-next").remove(); - img.removeClass("gal-active").addClass("gal-next gal-inactive temp"); - gt.imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active"); - gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) + 66) + "px"); - } - mainPicLoading = 1; - } - gt.descriptionArea.html("

    " + currentPic.image.description + "

    "); - if(currentPic.image.description == null){ - gt.descriptionArea.addClass("hide"); - }else{ - gt.descriptionArea.removeClass("hide"); - } - if (direction!=null){ - calculateHeight(gt.imageContainer.find(".gal-active")); - } - gt.thumbStrip.find("li.active").removeClass("active"); - gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active"); - setStripToCenter(); - setNextPic(); - setPrevPic(); - } - - 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(); + var destroyTheater = function() { + parent_divs.eq(parent_divs.length - 1).css('z-index', parent_div_z_index) + stage.hide(); + widget.removeClass("gallery-mode-on"); + imageContainer.empty() + unBindKeyHandlers(); } - 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%"); - } + + var createTheater = function() { + stage.show(); + widget.addClass("gallery-mode-on"); + bindKeyHandlers(); + isTheaterInitialized = false; + albumData = {} + albumData.images = $.map(widget.find('img.gallery-thumb'), function(v) { + var url = $(v).attr('data-link'), + theater_url = $(v).attr('data-theater-url'), + thumb_url = $(v).attr('src') + return { + 'url': url, + 'file': { + 'theater': { + url: theater_url + }, + 'thumb': { + url: thumb_url + } + } + } + }) + var cp = albumData.images[0]; + currentPic = { + "image": cp, + "index": 0 + }; + createThumbStrip(); + + currentPic = currentPic; } - if (typeof set_gallery_height != 'undefined'){ - set_gallery_height(widget) + + var hasNextImage = function() { + return (currentPic.index + 1) <= (albumData.images.length - 1); } - } - var setStripToCenter = function(){ - left = (windowWidth / 2) - (66 * currentPic.index); - gt.thumbStrip.css("left",left + "px"); - } - - var setNextPic = function(){ - gt.imageContainer.find(".gal-next.temp").remove() - if(gt.hasNextImage()) { - var obj = gt.albumData.images[currentPic.index + 1], - nextImg = $(""); - nextImg.attr("src",obj.file.theater.url); - nextImg.hide(); - gt.imageContainer.append(nextImg); - nextImg.on("load",function(){ - calculateHeight(nextImg); - nextPicLoading = 1; - nextImg.fadeIn(100); - }) - }else{ - nextPicLoading = 1; + var hasPreviousImage = function() { + return (currentPic.index > 0); } - } - var setPrevPic = function(){ - gt.imageContainer.find(".gal-prev.temp").remove() - if(gt.hasPreviousImage()) { - var obj = gt.albumData.images[currentPic.index - 1], - prevImg = $(""); - prevImg.attr("src",obj.file.theater.url); - prevImg.hide(); - gt.imageContainer.prepend(prevImg); - prevImg.on("load",function(){ - calculateHeight(prevImg); - prevPicLoading = 1; - prevImg.fadeIn(100); - }) - }else{ - prevPicLoading = 1; + 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(); + isTheaterInitialized = false; + setTimeout(function() { + loadingProcess = 0; + nextPicLoading = 0; + widget.find('.theaterButton').remove() + widget.find("img.gallery-image.gal-prev.gal-inactive").remove(); + img = widget.find("img.gallery-image.gal-active"); + img.eq(0).remove(); + }, 100) + } + } } - } - var l = function(x){ - console.log(x) - } - initialize(); + 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 = widget; + + 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 = $("
  • "), + a = $(""), + img = $("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); + } + 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(); + } + + + 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; + widget.find('div.gallery-show-original a').eq(0).attr('href', currentPic.image.url) + if (direction == null) { + img = $(""); + img.hide(); + img.attr("src", currentPic.image.file.theater.url); + imageContainer.append(img); + img.one("load", function() { + one_load(img) + }) + isTheaterInitialized = true; + } else { + img = imageContainer.find(".gal-active"); + if (selectedFromStrip) { + imageContainer.find(".gal-" + direction).attr("src", currentPic.image.file.theater.url); + } + 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("

    " + currentPic.image.description + "

    "); + 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(); + } + + 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(widget) + } + } + + 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 = $(""); + nextImg.attr("src", obj.file.theater.url); + nextImg.hide(); + imageContainer.append(nextImg); + nextImg.on("load", function() { + calculateHeight(nextImg); + nextPicLoading = 1; + nextImg.fadeIn(100); + }) + } else { + nextPicLoading = 1; + } + } + + var setPrevPic = function() { + imageContainer.find(".gal-prev.temp").remove() + if (hasPreviousImage()) { + var obj = albumData.images[currentPic.index - 1], + prevImg = $(""); + prevImg.attr("src", obj.file.theater.url); + prevImg.hide(); + imageContainer.prepend(prevImg); + prevImg.on("load", function() { + calculateHeight(prevImg); + prevPicLoading = 1; + prevImg.fadeIn(100); + }) + } else { + prevPicLoading = 1; + } + } + + var l = function(x) { + console.log(x) + } + + initialize(); } -if (typeof bind_gallery_widget_slide == 'undefined'){ - 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 - widget.find('.show-gallery-2.gallery').css('height',h) - } - var bind_gallery_widget_slide = function(){ - $('.widget-gallery.widget5').each(function(){ - GalleryTheaterWidget($(this)); - $(window).resize(function(){ - set_gallery_height($(this)) - }); +if (typeof bind_gallery_widget_slide == 'undefined') { + 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 + widget.find('.show-gallery-2.gallery').css('height', h) + } + var bind_gallery_widget_slide = function() { + $('.widget-gallery.widget5').each(function() { + GalleryTheaterWidget($(this)); + $(window).resize(function() { + set_gallery_height($(this)) + }); + }) + } + $(document).ready(function() { + bind_gallery_widget_slide() }) - } - $(document).ready(function(){ - bind_gallery_widget_slide() - }) } // gallery-image gal-prev gal-inactive \ No newline at end of file diff --git a/app/assets/javascripts/theater.js b/app/assets/javascripts/theater.js index 2fdb073..0db4eae 100644 --- a/app/assets/javascripts/theater.js +++ b/app/assets/javascripts/theater.js @@ -1,546 +1,560 @@ -$('.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').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') + } }) -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 gt = this, - 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; - gt.stage = null; - gt.stripNextBtn = null; - gt.stripPrevBtn = null; - gt.thumbToggle = null; - gt.descriptionToggle = null; - gt.closeBtn = null; - gt.imageContainer = null; - gt.albumData = {}; - gt.loader = null; - gt.thumbStrip = null; - gt.descriptionArea = null; - gt.isTheaterInitialized = false; +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_right_string = '', - button_play_string = '', - button_stop_string = '', - playtimeoutID; - var initialize = function(){ - gt.stage = $("#gallery-theater-stage"); - gt.closeBtn = gt.stage.find(".gallery-close"); - gt.switchBtn = gt.stage.find(".gallery-theme-switch"); - gt.imageContainer = gt.stage.find(".image-container"); - gt.thumbStrip = gt.stage.find(".gallery-thumb-wrap"); - gt.thumbToggle = gt.stage.find(".gallery-thumb-toggle"); - gt.loader = gt.stage.find(".gallery-loader"); - gt.stripNextBtn = gt.stage.find(".gallery-thumb-next"); - gt.stripPrevBtn = gt.stage.find(".gallery-thumb-prev"); - gt.descriptionArea = gt.stage.find(".gallery-img-desc"); - gt.descriptionToggle = gt.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 () { - gt.previousPic(); - }); - $('#theaterNextButton').click(function () { - gt.nextPic(); - }); - $('#theaterPlayButton').click(function () { - play_flag = true; - playtimeoutID = window.setInterval(function(){ - gt.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]; - gt.createTheater("/xhr/galleries/theater/" + id); - } - - - addButton(); - function locationHashChanged() { - addButton(); - } - - } - - var bindHandler = function(){ - // handler to close the theater - gt.closeBtn.off('click').on("click",gt.destroyTheater); - - // handler to show theater - $("div[data-list=images] a").filter(":not(.preview)").off('click').on("click",function(){ - gt.createTheater($(this).attr("href")); - return false; - }) - - gt.switchBtn.off('click').on("click",gt.switchTheme); - gt.descriptionToggle.off('click').on("click", gt.toggleDescription) - gt.stripPrevBtn.off('click').on("click", gt.scrollStripRight); - gt.stripNextBtn.off('click').on("click", gt.scrollStripLeft); - - if(Modernizr.touch){ - gt.imageContainer.swipe({ - swipe : function(event, direction, distance, duration, fingerCount){ - if(direction == "left"){ - gt.nextPic(); - }else if(direction == "right"){ - gt.previousPic(); - } - } - }) - gt.thumbToggle.swipe({ - swipe : function(event, direction, distance, duration, fingerCount){ - if(direction == "up"){ - gt.thumbStrip.parent().addClass("show"); - gt.thumbToggle.addClass("up"); - gt.thumbToggle.find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down"); - }else if(direction == "down"){ - gt.thumbStrip.parent().removeClass("show"); - gt.thumbToggle.removeClass("up"); - gt.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", gt.nextPic); - $(document.body).on("click",".gal-prev", gt.previousPic); - $(document.body).on("click",".gal-next", gt.nextPic); - $(document).on("keyup",function(e){ - switch(e.keyCode){ - case 39: - gt.nextPic(); - break; - case 37: - gt.previousPic(); - break; - case 27: - gt.destroyTheater(); - break; - } - }) - } - } - - - var doneResizing = function(){ - windowHeight = $(window).height(); - windowWidth = $(window).width(); - setThumbNavs(); - } - - var unBindKeyHandlers = function(){ - $(document).unbind("keyup"); - } - - gt.destroyTheater = function(){ - parent_divs.eq(parent_divs.length-1).css('z-index',parent_div_z_index) - gt.stage.hide(); - $("body").removeClass("gallery-mode-on"); - gt.imageContainer.empty() - unBindKeyHandlers(); - window.location.hash = ""; - } - - gt.createTheater = function(link){ - $('.gallery-img-desc').removeClass('active'); - bindKeyHandlers(); - gt.stage.show(); - $("body").addClass("gallery-mode-on"); - gt.isTheaterInitialized = false; - if(!gt.isTheaterInitialized){ - $.ajax({ - url : link, - dataType : "json", - type : "get", - async:false - }).done(function(data){ - gt.albumData = data.data; - var cp = gt.albumData.images.filter(function(x){return x._id == gt.albumData.image})[0]; - currentPic = {"image" : cp, "index" : gt.albumData.images.indexOf(cp)}; - createThumbStrip(); - }) - }else{ - var id = link.split("/")[4], - cp = gt.albumData.images.filter(function(x){return x._id == id})[0]; - currentPic = {"image" : cp, "index" : gt.albumData.images.indexOf(cp)}; - createThumbStrip(); - } - window.currentPic = currentPic; - } - - gt.hasNextImage = function(){ - return (currentPic.index + 1) <= (gt.albumData.images.length - 1); - } - - gt.hasPreviousImage = function(){ - return (currentPic.index > 0); - } - - gt.nextPic = function(){ - if(loadingProcess == 0){ - if(gt.hasNextImage()){ + var play_flag = false; + var button_left_string = '', + button_right_string = '', + button_play_string = '', + button_stop_string = '', + playtimeoutID; + var initialize = function() { + 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(); - currentPic.image = gt.albumData.images[currentPic.index + 1]; - currentPic.index = currentPic.index + 1; - setMainPic("next"); - } - } - } - gt.playallPic = function(){ - if(loadingProcess == 0){ - mainPicLoading = 1; - nextPicLoading = 1; - prevPicLoading = 1; - if(gt.hasNextImage()){ - currentPic.image = gt.albumData.images[currentPic.index + 1]; - currentPic.index = currentPic.index + 1; - setMainPic("next"); - } - else{ - currentPic.image = gt.albumData.images[0]; - currentPic.index = 0; - setMainPic(); - gt.isTheaterInitialized = false; - setTimeout(function(){ - loadingProcess = 0; - nextPicLoading = 0; - $('.theaterButton').remove() - $("img.gallery-image.gal-prev.gal-inactive").remove(); - img = $("img.gallery-image.gal-active"); - img.eq(0).remove(); - window.onhashchange() - },100) - } - } - } - - - gt.previousPic = function(){ - if(loadingProcess == 0){ - if(gt.hasPreviousImage()) { - startLoading(); - currentPic.image = gt.albumData.images[currentPic.index - 1]; - currentPic.index = currentPic.index - 1; - setMainPic("prev"); - } - } - } - - gt.scrollStripLeft = function(){ - pixels_to_move = parseInt(gt.thumbStrip.css("left")) - (66 * 3); - maximum_pixels = (windowWidth / 2) - (66 * (gt.albumData.images.length - 1)); - if(pixels_to_move < maximum_pixels){ - pixels_to_move = maximum_pixels; - } - gt.thumbStrip.css("left",pixels_to_move + "px"); - } - - gt.scrollStripRight = function(){ - pixels_to_move = parseInt(gt.thumbStrip.css("left")) + (66 * 3); - maximum_pixels = (windowWidth / 2); - if(pixels_to_move > maximum_pixels){ - pixels_to_move = maximum_pixels; - } - gt.thumbStrip.css("left",pixels_to_move + "px"); - } - - - gt.switchTheme = function(){ - var themeWhiteKlass = "theme-white", - nightKlass = "fa fa-circle", - dayKlass = "fa fa-circle-o", - $body = $("body"); - - if (!gt.switchBtn.hasClass(themeWhiteKlass)) { - gt.switchBtn - .addClass(themeWhiteKlass) - .find("i") - .attr("class", dayKlass); - - $body.addClass(themeWhiteKlass); - - } else { - gt.switchBtn - .removeClass(themeWhiteKlass) - .find("i") - .attr("class", nightKlass); - - $body.removeClass(themeWhiteKlass); - - } - } - - gt.toggleDescription = function(){ - $(this).toggleClass("active"); - gt.descriptionArea.toggleClass("active"); - } - - var startLoading = function(){ - loadingProcess = 1; - mainPicLoading = 0; - nextPicLoading = 0; - prevPicLoading = 0; - gt.loader.show(); - loadingInterval = setInterval(stopLoading, 300); - - } - - var stopLoading = function(){ - if(mainPicLoading == 1 && nextPicLoading == 1 && prevPicLoading == 1){ - clearInterval(loadingInterval); - setTimeout(function(){ - loadingProcess = 0; - gt.loader.hide(); - },100) - } - } - - var createThumbStrip = function(){ - if(!gt.isTheaterInitialized){ - gt.thumbStrip.html("") - $.each(gt.albumData.images,function(index, image){ - var li = $("
  • "), - a = $(""), - img = $("Image Thumb"); - a.on("click",function(){ - startLoading(); - var old_index = currentPic.index; - currentPic.image = gt.albumData.images[index]; - currentPic.index = index; - if(old_index > index){ - setMainPic("prev",true); - }else if(old_index < index){ - setMainPic("next",true); + 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() { + createTheater($(this).attr("href")); 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); - gt.thumbStrip.append(li); - }) - setThumbNavs(); + }) + + 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); + }) } - setMainPic(); - if (!$('.theaterButton').length){ - window.onhashchange() + + 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 setThumbNavs = function() { - var $thumbNav = gt.stage.find('.gallery-thumb-navs'), - $thumb = gt.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; + var doneResizing = function() { + windowHeight = $(window).height(); + windowWidth = $(window).width(); + setThumbNavs(); + } - if (windowWidth < totalWidth) { - $thumbNav.addClass('show'); - }else{ - $thumbNav.removeClass('show'); + var unBindKeyHandlers = function() { + $(document).unbind("keyup"); } - }; - 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) - if(direction == null){ - img = $(""); - img.hide(); - img.attr("src", currentPic.image.file.theater.url); - gt.imageContainer.append(img); - img.one("load", function(){ - one_load(img) - }) - gt.isTheaterInitialized = true; - }else{ - img = gt.imageContainer.find(".gal-active"); - if(selectedFromStrip){ - gt.imageContainer.find(".gal-" + direction).attr("src",currentPic.image.file.theater.url); - } - if(direction == "next"){ - gt.imageContainer.find(".gal-prev").remove(); - img.removeClass("gal-active").addClass("gal-prev gal-inactive temp"); - gt.imageContainer.find(".gal-next").removeClass("gal-inactive gal-next").addClass("gal-active"); - gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) - 66) + "px"); - }else if(direction == "prev"){ - gt.imageContainer.find(".gal-next").remove(); - img.removeClass("gal-active").addClass("gal-next gal-inactive temp"); - gt.imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active"); - gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) + 66) + "px"); - } - mainPicLoading = 1; - } - gt.descriptionArea.html("

    " + currentPic.image.description + "

    "); - if(currentPic.image.description == null){ - gt.descriptionArea.addClass("hide"); - }else{ - gt.descriptionArea.removeClass("hide"); - } - if (direction!=null){ - calculateHeight(gt.imageContainer.find(".gal-active")); - } - gt.thumbStrip.find("li.active").removeClass("active"); - gt.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(); + 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 = ""; } - 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%"); - } + + 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(); + } } - if (typeof set_gallery_height != 'undefined'){ - set_gallery_height() + + var hasNextImage = function() { + return (currentPic.index + 1) <= (albumData.images.length - 1); } - } - var changeUrl = function(){ - window.location.hash = currentPic.image._id - } - - var setStripToCenter = function(){ - left = (windowWidth / 2) - (66 * currentPic.index); - gt.thumbStrip.css("left",left + "px"); - } - - var setNextPic = function(){ - gt.imageContainer.find(".gal-next.temp").remove() - if(gt.hasNextImage()) { - var obj = gt.albumData.images[currentPic.index + 1], - nextImg = $(""); - nextImg.attr("src",obj.file.theater.url); - nextImg.hide(); - gt.imageContainer.append(nextImg); - nextImg.on("load",function(){ - calculateHeight(nextImg); - nextPicLoading = 1; - nextImg.fadeIn(100); - }) - }else{ - nextPicLoading = 1; + var hasPreviousImage = function() { + return (currentPic.index > 0); } - } - var setPrevPic = function(){ - gt.imageContainer.find(".gal-prev.temp").remove() - if(gt.hasPreviousImage()) { - var obj = gt.albumData.images[currentPic.index - 1], - prevImg = $(""); - prevImg.attr("src",obj.file.theater.url); - prevImg.hide(); - gt.imageContainer.prepend(prevImg); - prevImg.on("load",function(){ - calculateHeight(prevImg); - prevPicLoading = 1; - prevImg.fadeIn(100); - }) - }else{ - prevPicLoading = 1; + 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(); + isTheaterInitialized = false; + setTimeout(function() { + loadingProcess = 0; + nextPicLoading = 0; + $('.theaterButton').remove() + $("img.gallery-image.gal-prev.gal-inactive").remove(); + img = $("img.gallery-image.gal-active"); + img.eq(0).remove(); + window.onhashchange() + }, 100) + } + } } - } - var l = function(x){ - console.log(x) - } - $(document).ready(function(){ - initialize(); - }) + 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 = $("
  • "), + a = $(""), + img = $("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); + } + 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) + if (direction == null) { + img = $(""); + img.hide(); + img.attr("src", currentPic.image.file.theater.url); + imageContainer.append(img); + img.one("load", function() { + one_load(img) + }) + isTheaterInitialized = true; + } else { + img = imageContainer.find(".gal-active"); + if (selectedFromStrip) { + imageContainer.find(".gal-" + direction).attr("src", currentPic.image.file.theater.url); + } + 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("

    " + currentPic.image.description + "

    "); + 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 = $(""); + nextImg.attr("src", obj.file.theater.url); + nextImg.hide(); + imageContainer.append(nextImg); + nextImg.on("load", function() { + calculateHeight(nextImg); + nextPicLoading = 1; + nextImg.fadeIn(100); + }) + } else { + nextPicLoading = 1; + } + } + + var setPrevPic = function() { + imageContainer.find(".gal-prev.temp").remove() + if (hasPreviousImage()) { + var obj = albumData.images[currentPic.index - 1], + prevImg = $(""); + prevImg.attr("src", obj.file.theater.url); + prevImg.hide(); + imageContainer.prepend(prevImg); + prevImg.on("load", function() { + calculateHeight(prevImg); + prevPicLoading = 1; + prevImg.fadeIn(100); + }) + } else { + prevPicLoading = 1; + } + } + + var l = function(x) { + console.log(x) + } + + $(document).ready(function() { + initialize(); + }) } // gallery-image gal-prev gal-inactive \ No newline at end of file