new theater for gallery..
This commit is contained in:
parent
863d89e46b
commit
f211afc523
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,428 @@
|
||||||
|
var GalleryTheater = function(){
|
||||||
|
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.closeBtn = null;
|
||||||
|
gt.imageContainer = null;
|
||||||
|
gt.albumData = {};
|
||||||
|
gt.loader = null;
|
||||||
|
gt.thumbStrip = null;
|
||||||
|
gt.isTheaterInitialized = false;
|
||||||
|
|
||||||
|
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");
|
||||||
|
windowScreenThresholdForTouch = windowWidth / 3;
|
||||||
|
startLoading();
|
||||||
|
windowHeight = $(window).height();
|
||||||
|
windowWidth = $(window).width();
|
||||||
|
bindHandler();
|
||||||
|
if(window.location.hash != "" && window.location.hash != "#"){
|
||||||
|
var id = window.location.hash.split("#")[1];
|
||||||
|
gt.createTheater("/xhr/galleries/theater/" + id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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.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(){
|
||||||
|
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"
|
||||||
|
}).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.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);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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 = $("<li class='gallery-item'></li>"),
|
||||||
|
a = $("<a href=''></a>"),
|
||||||
|
img = $("<img class='gallery-thumb' src='' alt='Image Thumb'>");
|
||||||
|
a.on("click",function(){
|
||||||
|
startLoading();
|
||||||
|
var old_index = currentPic.index;
|
||||||
|
currentPic.image = 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();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var setMainPic = function(direction,selectedFromStrip){
|
||||||
|
var img = null;
|
||||||
|
if(direction == null){
|
||||||
|
img = $("<img class='gallery-image gal-active'>");
|
||||||
|
img.hide();
|
||||||
|
img.attr("src", currentPic.image.file.theater.url);
|
||||||
|
gt.imageContainer.append(img);
|
||||||
|
img.one("load", function(){
|
||||||
|
calculateHeight(img);
|
||||||
|
mainPicLoading = 1;
|
||||||
|
img.fadeIn(100);
|
||||||
|
})
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
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 = $("<img class='gallery-image gal-next gal-inactive'>");
|
||||||
|
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 = $("<img class='gallery-image gal-prev gal-inactive'>");
|
||||||
|
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
|
||||||
|
|
@ -0,0 +1,261 @@
|
||||||
|
var GalleryTheater = 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.albumData = {};
|
||||||
|
gt.thumbStrip = null;
|
||||||
|
gt.isTheaterInitialized = false;
|
||||||
|
|
||||||
|
var initialize = function(){
|
||||||
|
gt.stage = $("#gallery-theater-stage");
|
||||||
|
gt.closeBtn = gt.stage.find(".gallery-close");
|
||||||
|
gt.switchBtn = gt.stage.find(".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(".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/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("gallery-mode-on");
|
||||||
|
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"
|
||||||
|
}).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.nextPic = function(){
|
||||||
|
if((currentPic.index + 1) <= (gt.albumData.images.length - 1)){
|
||||||
|
currentPic.image = gt.albumData.images[currentPic.index + 1];
|
||||||
|
currentPic.index = currentPic.index + 1;
|
||||||
|
setMainPic();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
gt.previousPic = function(){
|
||||||
|
if(currentPic.index > 0) {
|
||||||
|
currentPic.image = gt.albumData.images[currentPic.index - 1];
|
||||||
|
currentPic.index = currentPic.index - 1;
|
||||||
|
setMainPic();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var createThumbStrip = function(){
|
||||||
|
if(!gt.isTheaterInitialized){
|
||||||
|
$.each(gt.albumData.images,function(index, image){
|
||||||
|
var li = $("<li class='gallery-item'></li>"),
|
||||||
|
a = $("<a href=''></a>"),
|
||||||
|
img = $("<img class='gallery-thumb' src='' alt='Image Thumb'>");
|
||||||
|
a.on("click",function(){
|
||||||
|
currentPic.image = gt.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.albumData.images.length - 1)) {
|
||||||
|
gt.nextStageImage.hide();
|
||||||
|
var obj = gt.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.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();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,405 @@
|
||||||
|
/* Reset and basic styles */
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-size: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-mode-on {
|
||||||
|
/*overflow-y: hidden;*/
|
||||||
|
}
|
||||||
|
/* Gallery */
|
||||||
|
|
||||||
|
#gallery-theater-stage {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#gallery-theater-stage > .gallery {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background: #000;
|
||||||
|
z-index: 2000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-loader {
|
||||||
|
padding: 10px;
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
left: 50%;
|
||||||
|
top: 10px;
|
||||||
|
-webkit-transform: translate(-50%, 50%);
|
||||||
|
transform: translate(-50%, 50%);
|
||||||
|
border-radius: 2px;
|
||||||
|
z-index: 2000;
|
||||||
|
background-color: rgba(0, 0, 0, .6);
|
||||||
|
transition: .3s all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 50px;
|
||||||
|
height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner > div {
|
||||||
|
background-color: #e8e8e8;
|
||||||
|
height: 100%;
|
||||||
|
width: 4px;
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
|
||||||
|
animation: stretchdelay 1.2s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner .rect2 {
|
||||||
|
-webkit-animation-delay: -1.1s;
|
||||||
|
animation-delay: -1.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner .rect3 {
|
||||||
|
-webkit-animation-delay: -1.0s;
|
||||||
|
animation-delay: -1.0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner .rect4 {
|
||||||
|
-webkit-animation-delay: -0.9s;
|
||||||
|
animation-delay: -0.9s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner .rect5 {
|
||||||
|
-webkit-animation-delay: -0.8s;
|
||||||
|
animation-delay: -0.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes stretchdelay {
|
||||||
|
0%, 40%, 100% {
|
||||||
|
-webkit-transform: scaleY(0.4)
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
-webkit-transform: scaleY(1.0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes stretchdelay {
|
||||||
|
0%, 40%, 100% {
|
||||||
|
transform: scaleY(0.4);
|
||||||
|
-webkit-transform: scaleY(0.4);
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
transform: scaleY(1.0);
|
||||||
|
-webkit-transform: scaleY(1.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-actions {
|
||||||
|
position: absolute;
|
||||||
|
right: 1rem;
|
||||||
|
top: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
background: rgba(255, 255, 255, .7);
|
||||||
|
border-radius: 2px;
|
||||||
|
z-index: 2000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-actions-btn {
|
||||||
|
padding: 8px 12px 8px 10px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.touch .gallery-actions-btn {
|
||||||
|
padding: 12px 15px 12px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-theme-switch {
|
||||||
|
border-right: 1px solid rgba(255, 255, 255, .2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-close {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-theme-switch:hover,
|
||||||
|
.gallery-close:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.touch .image-container {
|
||||||
|
height: 100%;
|
||||||
|
padding-bottom: 150px;
|
||||||
|
z-index: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-image {
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
width: 60%;
|
||||||
|
height: auto;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-touch .gallery-image {
|
||||||
|
-webkit-transition: .3s all;
|
||||||
|
transition: .3s all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gal-prev {
|
||||||
|
display: none;
|
||||||
|
left: 0;
|
||||||
|
-webkit-transform: translate(-95%, -50%);
|
||||||
|
transform: translate(-95%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gal-prev:hover {
|
||||||
|
-webkit-transform: translate(-94%, -50%);
|
||||||
|
transform: translate(-94%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gal-next {
|
||||||
|
display: none;
|
||||||
|
left: auto;
|
||||||
|
right: 0;
|
||||||
|
-webkit-transform: translate(95%, -50%);
|
||||||
|
transform: translate(95%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gal-next:hover {
|
||||||
|
-webkit-transform: translate(94%, -50%);
|
||||||
|
transform: translate(94%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gal-inactive {
|
||||||
|
-webkit-transition: .3s all;
|
||||||
|
transition: .3s all;
|
||||||
|
opacity: .3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gal-inactive:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gal-active {
|
||||||
|
display: none;
|
||||||
|
-webkit-transform: translate(-50%, -50%);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
/* Thumbnails */
|
||||||
|
.gallery-thumb-toggle {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -1000px;
|
||||||
|
}
|
||||||
|
.gallery-thumb-wrap {
|
||||||
|
overflow-y: hidden;
|
||||||
|
overflow-x: hidden;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 10px 0;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 0;
|
||||||
|
-webkit-transition: .3s all;
|
||||||
|
transition: .3s all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item {
|
||||||
|
margin-right: 1em;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item.active {
|
||||||
|
border-radius: 2px;
|
||||||
|
border-radius: 0.125rem;
|
||||||
|
border: 5px solid #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-thumb {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
opacity: .5;
|
||||||
|
-webkit-transition: .3s opacity;
|
||||||
|
transition: .3s opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-thumb:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-thumb-container {
|
||||||
|
height: 80px;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: #1b1b1b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-thumb-navs {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-thumb-navs.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-thumb-nav {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: rgba(255, 255, 255, .7);
|
||||||
|
background: #222;
|
||||||
|
height: 80px;
|
||||||
|
line-height: 80px;
|
||||||
|
width: 50px;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-thumb-nav:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-thumb-prev {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-thumb-next {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active .gallery-thumb {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
/* White theme */
|
||||||
|
|
||||||
|
.theme-white #gallery-theater-stage > .gallery {
|
||||||
|
background-color: #fffdf7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-white .gallery-actions {
|
||||||
|
background-color: #eee;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-white .gallery-theme-switch {
|
||||||
|
border-right: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-white .gallery-thumb-toggle,
|
||||||
|
.theme-white .gallery-thumb-toggle:before,
|
||||||
|
.theme-white .gallery-thumb-toggle:after {
|
||||||
|
color: #777;
|
||||||
|
border-color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-white .gallery-thumb-container {
|
||||||
|
background-color: #e2e2e2;
|
||||||
|
border-top: 1px solid #c7c7c7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-white .gallery-actions-btn {
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-white .gallery-actions-btn:hover {
|
||||||
|
color: #ff4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-white .gallery-item.active {
|
||||||
|
border-color: #ff4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-white .gallery-thumb-nav {
|
||||||
|
color: #777;
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-white .gallery-thumb-prev {
|
||||||
|
border-right: 1px solid #c7c7c7;
|
||||||
|
}
|
||||||
|
.theme-white .gallery-thumb-next {
|
||||||
|
border-left: 1px solid #c7c7c7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-white .gallery-thumb-nav:hover {
|
||||||
|
color: #ff4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-white .gallery-loader {
|
||||||
|
background-color: #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-white .spinner > div {
|
||||||
|
color: #ff4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
|
||||||
|
.gal-prev {
|
||||||
|
-webkit-transform: translate(-101%, -50%);
|
||||||
|
transform: translate(-101%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gal-next {
|
||||||
|
-webkit-transform: translate(101%, -50%);
|
||||||
|
transform: translate(101%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-thumb-toggle {
|
||||||
|
bottom: 50px;
|
||||||
|
left: 0;
|
||||||
|
color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
-webkit-transition: .1s all;
|
||||||
|
transition: .1s all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-thumb-toggle.up {
|
||||||
|
bottom: 96px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-thumb-toggle:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 10%;
|
||||||
|
margin: auto;
|
||||||
|
width: 38%;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, .2);
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-thumb-toggle:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 10%;
|
||||||
|
margin: auto;
|
||||||
|
width: 38%;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, .2);
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-thumb-container {
|
||||||
|
bottom: -1000px;
|
||||||
|
-webkit-transition: .1s all;
|
||||||
|
transition: .1s all;
|
||||||
|
}
|
||||||
|
.gallery-thumb-container.show {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -27,7 +27,7 @@ class GalleriesController < ApplicationController
|
||||||
{
|
{
|
||||||
"image-description" => a.description,
|
"image-description" => a.description,
|
||||||
"alt_title" => alt_text,
|
"alt_title" => alt_text,
|
||||||
"link_to_show" => "/" + I18n.locale.to_s + params[:url] + "/-" + a.id.to_s + "?method=theater",
|
"link_to_show" => "/xhr/galleries/theater/" + a.id.to_s,
|
||||||
"thumb-src" => a.file.thumb.url
|
"thumb-src" => a.file.thumb.url
|
||||||
}
|
}
|
||||||
end
|
end
|
||||||
|
|
@ -64,7 +64,7 @@ class GalleriesController < ApplicationController
|
||||||
alt_text = (a.description.nil? || a.description == "" ? "gallery image" : a.description)
|
alt_text = (a.description.nil? || a.description == "" ? "gallery image" : a.description)
|
||||||
|
|
||||||
{
|
{
|
||||||
"link_to_show" => OrbitHelper.widget_more_url + "/-" + a.id.to_s + "?method=theater",
|
"link_to_show" => OrbitHelper.widget_more_url + "/" + a.album.to_param + "#" + a.id.to_s,
|
||||||
"alt_title" => alt_text,
|
"alt_title" => alt_text,
|
||||||
"thumb-src" => a.file.thumb.url
|
"thumb-src" => a.file.thumb.url
|
||||||
}
|
}
|
||||||
|
|
@ -94,17 +94,17 @@ class GalleriesController < ApplicationController
|
||||||
end
|
end
|
||||||
|
|
||||||
def theater
|
def theater
|
||||||
params = OrbitHelper.params
|
image = AlbumImage.find(params[:id])
|
||||||
image = AlbumImage.find(params[:uid])
|
|
||||||
albumid = image.album_id
|
albumid = image.album_id
|
||||||
album = Album.find(albumid)
|
album = Album.find(albumid)
|
||||||
images = album.album_images.asc(:order)
|
images = album.album_images.asc(:order)
|
||||||
{
|
data = {
|
||||||
"album" => album,
|
"album" => album,
|
||||||
"images" => images,
|
# "images" => images,
|
||||||
"image" => image,
|
"image" => image.id.to_s,
|
||||||
"wall_images" => imgs(albumid),
|
"images" => imgs(albumid)
|
||||||
"back_to_albums" => OrbitHelper.url_to_show(album.to_param)
|
}
|
||||||
}
|
|
||||||
|
render :json => {"data" => data}.to_json
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
@ -1 +1,46 @@
|
||||||
<%= render_view %>
|
<%= render_view %>
|
||||||
|
<% OrbitHelper.render_css_in_head(["theater.css"]) %>
|
||||||
|
<%= javascript_include_tag "jquery.touchSwipe.min" %>
|
||||||
|
<%= javascript_include_tag "theater" %>
|
||||||
|
<% OrbitHelper.render_meta_tags([{"name" => "mobile-web-app-capable","content" => "yes"},{"name" => "apple-mobile-web-app-status-bar-style","content" => "black-translucent"}]) %>
|
||||||
|
<div id="gallery-theater-stage">
|
||||||
|
<div class="gallery">
|
||||||
|
<div class="gallery-loader">
|
||||||
|
<div class="spinner">
|
||||||
|
<div class="rect1"></div>
|
||||||
|
<div class="rect2"></div>
|
||||||
|
<div class="rect3"></div>
|
||||||
|
<div class="rect4"></div>
|
||||||
|
<div class="rect5"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="gallery-actions">
|
||||||
|
<div class="gallery-theme-switch gallery-actions-btn">
|
||||||
|
<i class="fa fa-circle"></i>
|
||||||
|
</div>
|
||||||
|
<div class="gallery-close gallery-actions-btn">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="image-container" id="image-container"></div>
|
||||||
|
<div class="gallery-thumb-toggle gallery-thumb-line">
|
||||||
|
<i class="fa fa-angle-double-up"></i>
|
||||||
|
</div>
|
||||||
|
<div class="gallery-thumb-container">
|
||||||
|
<div class="gallery-thumb-navs">
|
||||||
|
<div class="gallery-thumb-prev gallery-thumb-nav">
|
||||||
|
<i class="fa fa-arrow-circle-o-left"></i>
|
||||||
|
</div>
|
||||||
|
<div class="gallery-thumb-next gallery-thumb-nav">
|
||||||
|
<i class="fa fa-arrow-circle-o-right"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="gallery-thumb-wrap">
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
var gt = new GalleryTheater();
|
||||||
|
</script>
|
||||||
|
|
@ -3,6 +3,7 @@ Rails.application.routes.draw do
|
||||||
locales = Site.first.in_use_locales rescue I18n.available_locales
|
locales = Site.first.in_use_locales rescue I18n.available_locales
|
||||||
|
|
||||||
scope "(:locale)", locale: Regexp.new(locales.join("|")) do
|
scope "(:locale)", locale: Regexp.new(locales.join("|")) do
|
||||||
|
get "/xhr/galleries/theater/:id" => "galleries#theater"
|
||||||
namespace :admin do
|
namespace :admin do
|
||||||
get "galleries/get_photoData_json" => "galleries#get_photoData_json"
|
get "galleries/get_photoData_json" => "galleries#get_photoData_json"
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue