var 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; 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.on("click",gt.destroyTheater); // handler to show theater $("div[data-list=images] a").on("click",function(){ gt.createTheater($(this).attr("href")); 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){ $(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){ gt.stage.show(); $("body").addClass("gallery-mode-on"); bindKeyHandlers(); 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(); } } 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()){ 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){ $.each(gt.albumData.images,function(index, image){ var li = $("
"), a = $(""), img = $(""); 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); } 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(); } setMainPic(); if (!$('.theaterButton').length){ window.onhashchange() } } 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; 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); } var 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(); } 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 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 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 l = function(x){ console.log(x) } $(document).ready(function(){ initialize(); }) } // gallery-image gal-prev gal-inactive