261 lines
7.4 KiB
JavaScript
261 lines
7.4 KiB
JavaScript
var CustomGalleryTheater = function(){
|
|
var gt = this,
|
|
currentPic = {},
|
|
windowHeight = 0,
|
|
windowWidth = 0;
|
|
gt.stage = null;
|
|
gt.closeBtn = null;
|
|
gt.mainStageImage = null;
|
|
gt.prevStageImage = null;
|
|
gt.nextStageImage = null;
|
|
gt.custom_albumData = {};
|
|
gt.thumbStrip = null;
|
|
gt.isTheaterInitialized = false;
|
|
|
|
var initialize = function(){
|
|
gt.stage = $("#custom_gallery-theater-stage");
|
|
gt.closeBtn = gt.stage.find(".custom_gallery-close");
|
|
gt.switchBtn = gt.stage.find(".custom_gallery-theme-switch");
|
|
gt.mainStageImage = gt.stage.find(".gal-active");
|
|
gt.prevStageImage = gt.stage.find(".gal-prev");
|
|
gt.nextStageImage = gt.stage.find(".gal-next");
|
|
gt.thumbStrip = gt.stage.find(".custom_gallery-thumb-wrap");
|
|
windowHeight = $(window).height();
|
|
windowWidth = $(window).width();
|
|
bindHandler();
|
|
if(window.location.hash != "" && window.location.hash != "#"){
|
|
var id = window.location.hash.split("#")[1];
|
|
gt.createTheater("/xhr/custom_galleries/theater/" + id);
|
|
}
|
|
}
|
|
|
|
var bindHandler = function(){
|
|
// handler to close the theater
|
|
gt.closeBtn.on("click",function(){
|
|
gt.destroyTheater();
|
|
})
|
|
|
|
// handler to show theater
|
|
$("div[data-list=images] a").on("click",function(){
|
|
gt.createTheater($(this).attr("href"));
|
|
return false;
|
|
})
|
|
|
|
// handler to show next image
|
|
gt.nextStageImage.on("click",function(){
|
|
if($(this).attr("src") != "#"){
|
|
gt.nextPic();
|
|
}
|
|
})
|
|
// handler to show prev image
|
|
gt.prevStageImage.on("click",function(){
|
|
if($(this).attr("src") != "#"){
|
|
gt.previousPic();
|
|
}
|
|
})
|
|
|
|
// handler to go to next image on center image click
|
|
gt.mainStageImage.on("click",gt.nextPic);
|
|
|
|
gt.switchBtn.on("click", function() {
|
|
var themeWhiteKlass = "theme-white",
|
|
nightKlass = "fa fa-circle",
|
|
dayKlass = "fa fa-circle-o",
|
|
$body = $("body");
|
|
|
|
if (!$(this).hasClass(themeWhiteKlass)) {
|
|
$(this)
|
|
.addClass(themeWhiteKlass)
|
|
.find("i")
|
|
.attr("class", dayKlass);
|
|
|
|
$body.addClass(themeWhiteKlass);
|
|
|
|
} else {
|
|
$(this)
|
|
.removeClass(themeWhiteKlass)
|
|
.find("i")
|
|
.attr("class", nightKlass);
|
|
|
|
$body.removeClass(themeWhiteKlass);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
//handler for window resize
|
|
$(window).resize(function(){
|
|
windowHeight = $(window).height();
|
|
windowWidth = $(window).width();
|
|
})
|
|
}
|
|
|
|
var bindKeyHandlers = function(){
|
|
$(document).on("keyup",function(e){
|
|
switch(e.keyCode){
|
|
case 39:
|
|
gt.nextPic();
|
|
break;
|
|
case 37:
|
|
gt.previousPic();
|
|
break;
|
|
case 27:
|
|
gt.destroyTheater();
|
|
break;
|
|
}
|
|
})
|
|
}
|
|
|
|
var unBindKeyHandlers = function(){
|
|
$(document).unbind("keypress");
|
|
}
|
|
|
|
gt.destroyTheater = function(){
|
|
gt.stage.hide();
|
|
$("body").removeClass("custom_gallery-mode-on");
|
|
unBindKeyHandlers();
|
|
window.location.hash = "";
|
|
}
|
|
|
|
gt.createTheater = function(link){
|
|
gt.stage.show();
|
|
$("body").addClass("custom_gallery-mode-on");
|
|
bindKeyHandlers();
|
|
if(!gt.isTheaterInitialized){
|
|
$.ajax({
|
|
url : link,
|
|
dataType : "json",
|
|
type : "get"
|
|
}).done(function(data){
|
|
gt.custom_albumData = data.data;
|
|
var cp = gt.custom_albumData.images.filter(function(x){return x._id == gt.custom_albumData.image})[0];
|
|
currentPic = {"image" : cp, "index" : gt.custom_albumData.images.indexOf(cp)};
|
|
createThumbStrip();
|
|
})
|
|
}else{
|
|
var id = link.split("/")[4],
|
|
cp = gt.custom_albumData.images.filter(function(x){return x._id == id})[0];
|
|
currentPic = {"image" : cp, "index" : gt.custom_albumData.images.indexOf(cp)};
|
|
createThumbStrip();
|
|
}
|
|
}
|
|
|
|
gt.nextPic = function(){
|
|
if((currentPic.index + 1) <= (gt.custom_albumData.images.length - 1)){
|
|
currentPic.image = gt.custom_albumData.images[currentPic.index + 1];
|
|
currentPic.index = currentPic.index + 1;
|
|
setMainPic();
|
|
}
|
|
}
|
|
|
|
gt.previousPic = function(){
|
|
if(currentPic.index > 0) {
|
|
currentPic.image = gt.custom_albumData.images[currentPic.index - 1];
|
|
currentPic.index = currentPic.index - 1;
|
|
setMainPic();
|
|
}
|
|
}
|
|
|
|
var createThumbStrip = function(){
|
|
if(!gt.isTheaterInitialized){
|
|
$.each(gt.custom_albumData.images,function(index, image){
|
|
var li = $("<li class='custom_gallery-item'></li>"),
|
|
a = $("<a href=''></a>"),
|
|
img = $("<img class='custom_gallery-thumb' src='' alt='Image Thumb'>");
|
|
a.on("click",function(){
|
|
currentPic.image = gt.custom_albumData.images[index];
|
|
currentPic.index = index;
|
|
setMainPic();
|
|
return false;
|
|
})
|
|
img.attr("src",image.file.thumb.url);
|
|
img.attr("alt",image.alt_title);
|
|
li.attr("data-index",index);
|
|
a.append(img);
|
|
li.append(a);
|
|
gt.thumbStrip.append(li);
|
|
})
|
|
gt.isTheaterInitialized = true;
|
|
}
|
|
setMainPic();
|
|
}
|
|
|
|
var setMainPic = function(){
|
|
var obj = currentPic.image;
|
|
gt.mainStageImage.fadeOut(100,function(){
|
|
gt.mainStageImage.attr("src",obj.file.theater.url);
|
|
gt.mainStageImage.attr("alt",obj.alt_title);
|
|
gt.mainStageImage.one("load",function(){
|
|
var h = 0,
|
|
w = 0,
|
|
new_width = 0;
|
|
if(typeof currentPic.image.height == "undefined"){
|
|
h = gt.mainStageImage.height();
|
|
currentPic.image.height = h;
|
|
w = gt.mainStageImage.width();
|
|
currentPic.image.width = w;
|
|
}else{
|
|
h = currentPic.image.height;
|
|
w = currentPic.image.width;
|
|
}
|
|
if(h > (windowHeight - 100)){
|
|
new_width = Math.round((windowHeight - 100) * w / h);
|
|
new_width = (new_width / windowWidth) * 100;
|
|
gt.mainStageImage.width(new_width + "%");
|
|
}else{
|
|
if(windowWidth < 770){
|
|
gt.mainStageImage.width("90%");
|
|
}else{
|
|
gt.mainStageImage.width("65%");
|
|
}
|
|
}
|
|
gt.mainStageImage.fadeIn(100);
|
|
})
|
|
});
|
|
gt.thumbStrip.find("li.active").removeClass("active");
|
|
gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
|
|
changeUrl();
|
|
setNextPic();
|
|
setPrevPic();
|
|
}
|
|
|
|
var changeUrl = function(){
|
|
window.location.hash = currentPic.image._id
|
|
}
|
|
|
|
var setNextPic = function(){
|
|
gt.nextStageImage.attr("src","#");
|
|
if((currentPic.index + 1) <= (gt.custom_albumData.images.length - 1)) {
|
|
gt.nextStageImage.hide();
|
|
var obj = gt.custom_albumData.images[currentPic.index + 1];
|
|
gt.nextStageImage.attr("src",obj.file.theater.url);
|
|
gt.nextStageImage.on("load",function(){
|
|
gt.nextStageImage.show();
|
|
});
|
|
}else{
|
|
gt.nextStageImage.hide();
|
|
}
|
|
}
|
|
|
|
var setPrevPic = function(){
|
|
gt.prevStageImage.attr("src","#");
|
|
if(currentPic.index > 0) {
|
|
gt.prevStageImage.hide();
|
|
var obj = gt.custom_albumData.images[currentPic.index - 1];
|
|
gt.prevStageImage.attr("src",obj.file.theater.url);
|
|
gt.prevStageImage.on("load",function(){
|
|
gt.prevStageImage.show();
|
|
});
|
|
}else{
|
|
gt.prevStageImage.hide();
|
|
}
|
|
}
|
|
|
|
var l = function(x){
|
|
console.log(x)
|
|
}
|
|
|
|
$(document).ready(function(){
|
|
initialize();
|
|
})
|
|
} |