fix error
This commit is contained in:
邱博亞
parent
3242e76211
commit
14f4e91817
|
|
@ -2,12 +2,11 @@ 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 = {},
|
||||
var currentPic = {},
|
||||
windowHeight = 0,
|
||||
windowWidth = 0,
|
||||
swipeController = null,
|
||||
resizing = null;
|
||||
resizing = null,
|
||||
loadingInterval = null,
|
||||
mainPicLoading = 0,
|
||||
nextPicLoading = 0,
|
||||
|
|
@ -15,19 +14,20 @@ var GalleryTheaterWidget = function(widget){
|
|||
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;
|
||||
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 id ="theaterPreviousButton" class="theaterButton">< </button>',
|
||||
|
|
@ -36,17 +36,17 @@ var GalleryTheaterWidget = function(widget){
|
|||
button_stop_string = '<button id ="theaterStopButton" class="theaterButton">|| </button>',
|
||||
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");
|
||||
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();
|
||||
windowHeight = $(window).height();
|
||||
|
|
@ -55,25 +55,28 @@ var GalleryTheaterWidget = function(widget){
|
|||
widget.find('.theaterButton').remove();
|
||||
if (!play_flag) {
|
||||
$(button_left_string + button_play_string + button_right_string).insertAfter(widget.find('img.gal-active'));
|
||||
}
|
||||
else{
|
||||
} 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(); }
|
||||
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();
|
||||
previousPic();
|
||||
addButton()
|
||||
});
|
||||
widget.find('#theaterNextButton').click(function() {
|
||||
gt.nextPic();
|
||||
nextPic();
|
||||
addButton()
|
||||
});
|
||||
widget.find('#theaterPlayButton').click(function() {
|
||||
play_flag = true;
|
||||
playtimeoutID = window.setInterval(function() {
|
||||
gt.playallPic();
|
||||
playallPic();
|
||||
}, 3000)
|
||||
addButton()
|
||||
});
|
||||
|
|
@ -84,7 +87,7 @@ var GalleryTheaterWidget = function(widget){
|
|||
});
|
||||
}
|
||||
bindHandler();
|
||||
gt.createTheater();
|
||||
createTheater();
|
||||
|
||||
addButton();
|
||||
|
||||
|
|
@ -92,39 +95,39 @@ var GalleryTheaterWidget = function(widget){
|
|||
|
||||
var bindHandler = function() {
|
||||
// handler to close the theater
|
||||
gt.closeBtn.on("click",gt.destroyTheater);
|
||||
closeBtn.on("click", destroyTheater);
|
||||
|
||||
// handler to show theater
|
||||
widget.find("div[data-list=images] a").on("click", function() {
|
||||
gt.createTheater();
|
||||
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);
|
||||
switchBtn.on("click", switchTheme);
|
||||
descriptionToggle.on("click", toggleDescription)
|
||||
stripPrevBtn.on("click", scrollStripRight);
|
||||
stripNextBtn.on("click", scrollStripLeft);
|
||||
|
||||
if (Modernizr.touch) {
|
||||
gt.imageContainer.swipe({
|
||||
imageContainer.swipe({
|
||||
swipe: function(event, direction, distance, duration, fingerCount) {
|
||||
if (direction == "left") {
|
||||
gt.nextPic();
|
||||
nextPic();
|
||||
} else if (direction == "right") {
|
||||
gt.previousPic();
|
||||
previousPic();
|
||||
}
|
||||
}
|
||||
})
|
||||
gt.thumbToggle.swipe({
|
||||
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");
|
||||
thumbStrip.parent().addClass("show");
|
||||
thumbToggle.addClass("up");
|
||||
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");
|
||||
thumbStrip.parent().removeClass("show");
|
||||
thumbToggle.removeClass("up");
|
||||
thumbToggle.find("i").removeClass("fa-angle-double-down").addClass("fa-angle-double-up");
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -139,19 +142,19 @@ var GalleryTheaterWidget = function(widget){
|
|||
|
||||
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);
|
||||
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:
|
||||
gt.nextPic();
|
||||
nextPic();
|
||||
break;
|
||||
case 37:
|
||||
gt.previousPic();
|
||||
previousPic();
|
||||
break;
|
||||
case 27:
|
||||
gt.destroyTheater();
|
||||
destroyTheater();
|
||||
break;
|
||||
}
|
||||
})
|
||||
|
|
@ -169,70 +172,78 @@ var GalleryTheaterWidget = function(widget){
|
|||
$(document).unbind("keyup");
|
||||
}
|
||||
|
||||
gt.destroyTheater = function(){
|
||||
var destroyTheater = function() {
|
||||
parent_divs.eq(parent_divs.length - 1).css('z-index', parent_div_z_index)
|
||||
gt.stage.hide();
|
||||
stage.hide();
|
||||
widget.removeClass("gallery-mode-on");
|
||||
gt.imageContainer.empty()
|
||||
imageContainer.empty()
|
||||
unBindKeyHandlers();
|
||||
}
|
||||
|
||||
gt.createTheater = function(){
|
||||
gt.stage.show();
|
||||
var createTheater = function() {
|
||||
stage.show();
|
||||
widget.addClass("gallery-mode-on");
|
||||
bindKeyHandlers();
|
||||
gt.isTheaterInitialized = false;
|
||||
gt.albumData = {}
|
||||
gt.albumData.images = $.map(widget.find('img.gallery-thumb'),function(v){
|
||||
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}
|
||||
return {
|
||||
'url': url,
|
||||
'file': {
|
||||
'theater': {
|
||||
url: theater_url
|
||||
},
|
||||
'thumb': {
|
||||
url: thumb_url
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
var cp = gt.albumData.images[0];
|
||||
currentPic = {"image" : cp, "index" : 0};
|
||||
var cp = albumData.images[0];
|
||||
currentPic = {
|
||||
"image": cp,
|
||||
"index": 0
|
||||
};
|
||||
createThumbStrip();
|
||||
|
||||
currentPic = currentPic;
|
||||
}
|
||||
|
||||
gt.hasNextImage = function(){
|
||||
return (currentPic.index + 1) <= (gt.albumData.images.length - 1);
|
||||
var hasNextImage = function() {
|
||||
return (currentPic.index + 1) <= (albumData.images.length - 1);
|
||||
}
|
||||
|
||||
gt.hasPreviousImage = function(){
|
||||
var hasPreviousImage = function() {
|
||||
return (currentPic.index > 0);
|
||||
}
|
||||
|
||||
gt.nextPic = function(){
|
||||
var nextPic = function() {
|
||||
if (loadingProcess == 0) {
|
||||
if(gt.hasNextImage()){
|
||||
if (hasNextImage()) {
|
||||
startLoading();
|
||||
currentPic.image = gt.albumData.images[currentPic.index + 1];
|
||||
currentPic.image = albumData.images[currentPic.index + 1];
|
||||
currentPic.index = currentPic.index + 1;
|
||||
setMainPic("next");
|
||||
}
|
||||
}
|
||||
}
|
||||
gt.playallPic = function(){
|
||||
var playallPic = function() {
|
||||
if (loadingProcess == 0) {
|
||||
mainPicLoading = 1;
|
||||
nextPicLoading = 1;
|
||||
prevPicLoading = 1;
|
||||
if(gt.hasNextImage()){
|
||||
currentPic.image = gt.albumData.images[currentPic.index + 1];
|
||||
if (hasNextImage()) {
|
||||
currentPic.image = albumData.images[currentPic.index + 1];
|
||||
currentPic.index = currentPic.index + 1;
|
||||
setMainPic("next");
|
||||
}
|
||||
else{
|
||||
currentPic.image = gt.albumData.images[0];
|
||||
} else {
|
||||
currentPic.image = albumData.images[0];
|
||||
currentPic.index = 0;
|
||||
setMainPic();
|
||||
gt.isTheaterInitialized = false;
|
||||
isTheaterInitialized = false;
|
||||
setTimeout(function() {
|
||||
loadingProcess = 0;
|
||||
nextPicLoading = 0;
|
||||
|
|
@ -246,44 +257,44 @@ var GalleryTheaterWidget = function(widget){
|
|||
}
|
||||
|
||||
|
||||
gt.previousPic = function(){
|
||||
var previousPic = function() {
|
||||
if (loadingProcess == 0) {
|
||||
if(gt.hasPreviousImage()) {
|
||||
if (hasPreviousImage()) {
|
||||
startLoading();
|
||||
currentPic.image = gt.albumData.images[currentPic.index - 1];
|
||||
currentPic.image = 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));
|
||||
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;
|
||||
}
|
||||
gt.thumbStrip.css("left",pixels_to_move + "px");
|
||||
thumbStrip.css("left", pixels_to_move + "px");
|
||||
}
|
||||
|
||||
gt.scrollStripRight = function(){
|
||||
pixels_to_move = parseInt(gt.thumbStrip.css("left")) + (66 * 3);
|
||||
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;
|
||||
}
|
||||
gt.thumbStrip.css("left",pixels_to_move + "px");
|
||||
thumbStrip.css("left", pixels_to_move + "px");
|
||||
}
|
||||
|
||||
|
||||
gt.switchTheme = function(){
|
||||
var switchTheme = function() {
|
||||
var themeWhiteKlass = "theme-white",
|
||||
nightKlass = "fa fa-circle",
|
||||
dayKlass = "fa fa-circle-o",
|
||||
$body = widget;
|
||||
|
||||
if (!gt.switchBtn.hasClass(themeWhiteKlass)) {
|
||||
gt.switchBtn
|
||||
if (!switchBtn.hasClass(themeWhiteKlass)) {
|
||||
switchBtn
|
||||
.addClass(themeWhiteKlass)
|
||||
.find("i")
|
||||
.attr("class", dayKlass);
|
||||
|
|
@ -291,7 +302,7 @@ var GalleryTheaterWidget = function(widget){
|
|||
$body.addClass(themeWhiteKlass);
|
||||
|
||||
} else {
|
||||
gt.switchBtn
|
||||
switchBtn
|
||||
.removeClass(themeWhiteKlass)
|
||||
.find("i")
|
||||
.attr("class", nightKlass);
|
||||
|
|
@ -301,9 +312,9 @@ var GalleryTheaterWidget = function(widget){
|
|||
}
|
||||
}
|
||||
|
||||
gt.toggleDescription = function(){
|
||||
var toggleDescription = function() {
|
||||
$(this).toggleClass("active");
|
||||
gt.descriptionArea.toggleClass("active");
|
||||
descriptionArea.toggleClass("active");
|
||||
}
|
||||
|
||||
var startLoading = function() {
|
||||
|
|
@ -311,7 +322,7 @@ var GalleryTheaterWidget = function(widget){
|
|||
mainPicLoading = 0;
|
||||
nextPicLoading = 0;
|
||||
prevPicLoading = 0;
|
||||
gt.loader.show();
|
||||
loader.show();
|
||||
loadingInterval = setInterval(stopLoading, 300);
|
||||
|
||||
}
|
||||
|
|
@ -321,22 +332,22 @@ var GalleryTheaterWidget = function(widget){
|
|||
clearInterval(loadingInterval);
|
||||
setTimeout(function() {
|
||||
loadingProcess = 0;
|
||||
gt.loader.hide();
|
||||
loader.hide();
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
|
||||
var createThumbStrip = function() {
|
||||
if(!gt.isTheaterInitialized){
|
||||
gt.thumbStrip.html('')
|
||||
$.each(gt.albumData.images,function(index, image){
|
||||
if (!isTheaterInitialized) {
|
||||
thumbStrip.html('')
|
||||
$.each(albumData.images, function(index, image) {
|
||||
var li = $("<li class='gallery-item'></li>"),
|
||||
a = $("<a style=\"cursor: pointer;\"></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.image = albumData.images[index];
|
||||
currentPic.index = index;
|
||||
if (old_index > index) {
|
||||
setMainPic("prev", true);
|
||||
|
|
@ -351,7 +362,7 @@ var GalleryTheaterWidget = function(widget){
|
|||
li.attr("data-index", index);
|
||||
a.append(img);
|
||||
li.append(a);
|
||||
gt.thumbStrip.append(li);
|
||||
thumbStrip.append(li);
|
||||
})
|
||||
setThumbNavs();
|
||||
}
|
||||
|
|
@ -360,8 +371,8 @@ var GalleryTheaterWidget = function(widget){
|
|||
|
||||
|
||||
var setThumbNavs = function() {
|
||||
var $thumbNav = gt.stage.find('.gallery-thumb-navs'),
|
||||
$thumb = gt.thumbStrip.find('img'),
|
||||
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),
|
||||
|
|
@ -375,6 +386,7 @@ var GalleryTheaterWidget = function(widget){
|
|||
$thumbNav.removeClass('show');
|
||||
}
|
||||
};
|
||||
|
||||
function one_load(img) {
|
||||
if (img[0].complete) {
|
||||
setTimeout(loaded(img), 100)
|
||||
|
|
@ -382,6 +394,7 @@ var GalleryTheaterWidget = function(widget){
|
|||
setTimeout(one_load, 20)
|
||||
}
|
||||
}
|
||||
|
||||
function loaded(img) {
|
||||
calculateHeight(img);
|
||||
mainPicLoading = 1;
|
||||
|
|
@ -394,40 +407,40 @@ var GalleryTheaterWidget = function(widget){
|
|||
img = $("<img class='gallery-image gal-active'>");
|
||||
img.hide();
|
||||
img.attr("src", currentPic.image.file.theater.url);
|
||||
gt.imageContainer.append(img);
|
||||
imageContainer.append(img);
|
||||
img.one("load", function() {
|
||||
one_load(img)
|
||||
})
|
||||
gt.isTheaterInitialized = true;
|
||||
isTheaterInitialized = true;
|
||||
} else {
|
||||
img = gt.imageContainer.find(".gal-active");
|
||||
img = imageContainer.find(".gal-active");
|
||||
if (selectedFromStrip) {
|
||||
gt.imageContainer.find(".gal-" + direction).attr("src",currentPic.image.file.theater.url);
|
||||
imageContainer.find(".gal-" + direction).attr("src", currentPic.image.file.theater.url);
|
||||
}
|
||||
if (direction == "next") {
|
||||
gt.imageContainer.find(".gal-prev").remove();
|
||||
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");
|
||||
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") {
|
||||
gt.imageContainer.find(".gal-next").remove();
|
||||
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");
|
||||
imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active");
|
||||
thumbStrip.css("left", (parseInt(thumbStrip.css("left")) + 66) + "px");
|
||||
}
|
||||
mainPicLoading = 1;
|
||||
}
|
||||
gt.descriptionArea.html("<p>" + currentPic.image.description + "</p>");
|
||||
descriptionArea.html("<p>" + currentPic.image.description + "</p>");
|
||||
if (currentPic.image.description == null) {
|
||||
gt.descriptionArea.addClass("hide");
|
||||
descriptionArea.addClass("hide");
|
||||
} else {
|
||||
gt.descriptionArea.removeClass("hide");
|
||||
descriptionArea.removeClass("hide");
|
||||
}
|
||||
if (direction != null) {
|
||||
calculateHeight(gt.imageContainer.find(".gal-active"));
|
||||
calculateHeight(imageContainer.find(".gal-active"));
|
||||
}
|
||||
gt.thumbStrip.find("li.active").removeClass("active");
|
||||
gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
|
||||
thumbStrip.find("li.active").removeClass("active");
|
||||
thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
|
||||
|
||||
setStripToCenter();
|
||||
setNextPic();
|
||||
|
|
@ -470,17 +483,17 @@ var GalleryTheaterWidget = function(widget){
|
|||
|
||||
var setStripToCenter = function() {
|
||||
left = (windowWidth / 2) - (66 * currentPic.index);
|
||||
gt.thumbStrip.css("left",left + "px");
|
||||
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],
|
||||
imageContainer.find(".gal-next.temp").remove()
|
||||
if (hasNextImage()) {
|
||||
var obj = 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);
|
||||
imageContainer.append(nextImg);
|
||||
nextImg.on("load", function() {
|
||||
calculateHeight(nextImg);
|
||||
nextPicLoading = 1;
|
||||
|
|
@ -492,13 +505,13 @@ var GalleryTheaterWidget = function(widget){
|
|||
}
|
||||
|
||||
var setPrevPic = function() {
|
||||
gt.imageContainer.find(".gal-prev.temp").remove()
|
||||
if(gt.hasPreviousImage()) {
|
||||
var obj = gt.albumData.images[currentPic.index - 1],
|
||||
imageContainer.find(".gal-prev.temp").remove()
|
||||
if (hasPreviousImage()) {
|
||||
var obj = 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);
|
||||
imageContainer.prepend(prevImg);
|
||||
prevImg.on("load", function() {
|
||||
calculateHeight(prevImg);
|
||||
prevPicLoading = 1;
|
||||
|
|
|
|||
|
|
@ -7,12 +7,11 @@ 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 = {},
|
||||
var currentPic = {},
|
||||
windowHeight = 0,
|
||||
windowWidth = 0,
|
||||
swipeController = null,
|
||||
resizing = null;
|
||||
resizing = null,
|
||||
loadingInterval = null,
|
||||
mainPicLoading = 0,
|
||||
nextPicLoading = 0,
|
||||
|
|
@ -20,19 +19,20 @@ window.GalleryTheater = function(){
|
|||
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;
|
||||
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 id ="theaterPreviousButton" class="theaterButton">< </button>',
|
||||
|
|
@ -41,17 +41,17 @@ window.GalleryTheater = function(){
|
|||
button_stop_string = '<button id ="theaterStopButton" class="theaterButton">|| </button>',
|
||||
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");
|
||||
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();
|
||||
windowHeight = $(window).height();
|
||||
|
|
@ -60,23 +60,26 @@ window.GalleryTheater = function(){
|
|||
$('.theaterButton').remove();
|
||||
if (!play_flag) {
|
||||
$(button_left_string + button_play_string + button_right_string).insertAfter($('img.gal-active'));
|
||||
}
|
||||
else{
|
||||
} 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(); }
|
||||
if (!$(".gal-prev").length) {
|
||||
$('#theaterPreviousButton').remove();
|
||||
}
|
||||
if (!$(".gal-next").length) {
|
||||
$('#theaterNextButton').remove();
|
||||
}
|
||||
|
||||
$('#theaterPreviousButton').click(function() {
|
||||
gt.previousPic();
|
||||
previousPic();
|
||||
});
|
||||
$('#theaterNextButton').click(function() {
|
||||
gt.nextPic();
|
||||
nextPic();
|
||||
});
|
||||
$('#theaterPlayButton').click(function() {
|
||||
play_flag = true;
|
||||
playtimeoutID = window.setInterval(function() {
|
||||
gt.playallPic();
|
||||
playallPic();
|
||||
}, 3000)
|
||||
window.onhashchange()
|
||||
});
|
||||
|
|
@ -90,11 +93,12 @@ window.GalleryTheater = function(){
|
|||
bindHandler();
|
||||
if (window.location.hash != "" && window.location.hash != "#") {
|
||||
var id = window.location.hash.split("#")[1];
|
||||
gt.createTheater("/xhr/galleries/theater/" + id);
|
||||
createTheater("/xhr/galleries/theater/" + id);
|
||||
}
|
||||
|
||||
|
||||
addButton();
|
||||
|
||||
function locationHashChanged() {
|
||||
addButton();
|
||||
}
|
||||
|
|
@ -103,39 +107,39 @@ window.GalleryTheater = function(){
|
|||
|
||||
var bindHandler = function() {
|
||||
// handler to close the theater
|
||||
gt.closeBtn.off('click').on("click",gt.destroyTheater);
|
||||
closeBtn.off('click').on("click", destroyTheater);
|
||||
|
||||
// handler to show theater
|
||||
$("div[data-list=images] a").filter(":not(.preview)").off('click').on("click", function() {
|
||||
gt.createTheater($(this).attr("href"));
|
||||
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);
|
||||
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) {
|
||||
gt.imageContainer.swipe({
|
||||
imageContainer.swipe({
|
||||
swipe: function(event, direction, distance, duration, fingerCount) {
|
||||
if (direction == "left") {
|
||||
gt.nextPic();
|
||||
nextPic();
|
||||
} else if (direction == "right") {
|
||||
gt.previousPic();
|
||||
previousPic();
|
||||
}
|
||||
}
|
||||
})
|
||||
gt.thumbToggle.swipe({
|
||||
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");
|
||||
thumbStrip.parent().addClass("show");
|
||||
thumbToggle.addClass("up");
|
||||
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");
|
||||
thumbStrip.parent().removeClass("show");
|
||||
thumbToggle.removeClass("up");
|
||||
thumbToggle.find("i").removeClass("fa-angle-double-down").addClass("fa-angle-double-up");
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -150,19 +154,19 @@ window.GalleryTheater = function(){
|
|||
|
||||
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.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:
|
||||
gt.nextPic();
|
||||
nextPic();
|
||||
break;
|
||||
case 37:
|
||||
gt.previousPic();
|
||||
previousPic();
|
||||
break;
|
||||
case 27:
|
||||
gt.destroyTheater();
|
||||
destroyTheater();
|
||||
break;
|
||||
}
|
||||
})
|
||||
|
|
@ -180,75 +184,83 @@ window.GalleryTheater = function(){
|
|||
$(document).unbind("keyup");
|
||||
}
|
||||
|
||||
gt.destroyTheater = function(){
|
||||
var destroyTheater = function() {
|
||||
parent_divs.eq(parent_divs.length - 1).css('z-index', parent_div_z_index)
|
||||
gt.stage.hide();
|
||||
stage.hide();
|
||||
$("body").removeClass("gallery-mode-on");
|
||||
gt.imageContainer.empty()
|
||||
imageContainer.empty()
|
||||
unBindKeyHandlers();
|
||||
window.location.hash = "";
|
||||
}
|
||||
|
||||
gt.createTheater = function(link){
|
||||
var createTheater = function(link) {
|
||||
$('.gallery-img-desc').removeClass('active');
|
||||
bindKeyHandlers();
|
||||
gt.stage.show();
|
||||
stage.show();
|
||||
$("body").addClass("gallery-mode-on");
|
||||
gt.isTheaterInitialized = false;
|
||||
if(!gt.isTheaterInitialized){
|
||||
if (!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)};
|
||||
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 = gt.albumData.images.filter(function(x){return x._id == id})[0];
|
||||
currentPic = {"image" : cp, "index" : gt.albumData.images.indexOf(cp)};
|
||||
cp = albumData.images.filter(function(x) {
|
||||
return x._id == id
|
||||
})[0];
|
||||
currentPic = {
|
||||
"image": cp,
|
||||
"index": albumData.images.indexOf(cp)
|
||||
};
|
||||
createThumbStrip();
|
||||
}
|
||||
window.currentPic = currentPic;
|
||||
}
|
||||
|
||||
gt.hasNextImage = function(){
|
||||
return (currentPic.index + 1) <= (gt.albumData.images.length - 1);
|
||||
var hasNextImage = function() {
|
||||
return (currentPic.index + 1) <= (albumData.images.length - 1);
|
||||
}
|
||||
|
||||
gt.hasPreviousImage = function(){
|
||||
var hasPreviousImage = function() {
|
||||
return (currentPic.index > 0);
|
||||
}
|
||||
|
||||
gt.nextPic = function(){
|
||||
var nextPic = function() {
|
||||
if (loadingProcess == 0) {
|
||||
if(gt.hasNextImage()){
|
||||
if (hasNextImage()) {
|
||||
startLoading();
|
||||
currentPic.image = gt.albumData.images[currentPic.index + 1];
|
||||
currentPic.image = albumData.images[currentPic.index + 1];
|
||||
currentPic.index = currentPic.index + 1;
|
||||
setMainPic("next");
|
||||
}
|
||||
}
|
||||
}
|
||||
gt.playallPic = function(){
|
||||
var playallPic = function() {
|
||||
if (loadingProcess == 0) {
|
||||
mainPicLoading = 1;
|
||||
nextPicLoading = 1;
|
||||
prevPicLoading = 1;
|
||||
if(gt.hasNextImage()){
|
||||
currentPic.image = gt.albumData.images[currentPic.index + 1];
|
||||
if (hasNextImage()) {
|
||||
currentPic.image = albumData.images[currentPic.index + 1];
|
||||
currentPic.index = currentPic.index + 1;
|
||||
setMainPic("next");
|
||||
}
|
||||
else{
|
||||
currentPic.image = gt.albumData.images[0];
|
||||
} else {
|
||||
currentPic.image = albumData.images[0];
|
||||
currentPic.index = 0;
|
||||
setMainPic();
|
||||
gt.isTheaterInitialized = false;
|
||||
isTheaterInitialized = false;
|
||||
setTimeout(function() {
|
||||
loadingProcess = 0;
|
||||
nextPicLoading = 0;
|
||||
|
|
@ -263,44 +275,44 @@ window.GalleryTheater = function(){
|
|||
}
|
||||
|
||||
|
||||
gt.previousPic = function(){
|
||||
var previousPic = function() {
|
||||
if (loadingProcess == 0) {
|
||||
if(gt.hasPreviousImage()) {
|
||||
if (hasPreviousImage()) {
|
||||
startLoading();
|
||||
currentPic.image = gt.albumData.images[currentPic.index - 1];
|
||||
currentPic.image = 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));
|
||||
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;
|
||||
}
|
||||
gt.thumbStrip.css("left",pixels_to_move + "px");
|
||||
thumbStrip.css("left", pixels_to_move + "px");
|
||||
}
|
||||
|
||||
gt.scrollStripRight = function(){
|
||||
pixels_to_move = parseInt(gt.thumbStrip.css("left")) + (66 * 3);
|
||||
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;
|
||||
}
|
||||
gt.thumbStrip.css("left",pixels_to_move + "px");
|
||||
thumbStrip.css("left", pixels_to_move + "px");
|
||||
}
|
||||
|
||||
|
||||
gt.switchTheme = function(){
|
||||
var switchTheme = function() {
|
||||
var themeWhiteKlass = "theme-white",
|
||||
nightKlass = "fa fa-circle",
|
||||
dayKlass = "fa fa-circle-o",
|
||||
$body = $("body");
|
||||
|
||||
if (!gt.switchBtn.hasClass(themeWhiteKlass)) {
|
||||
gt.switchBtn
|
||||
if (!switchBtn.hasClass(themeWhiteKlass)) {
|
||||
switchBtn
|
||||
.addClass(themeWhiteKlass)
|
||||
.find("i")
|
||||
.attr("class", dayKlass);
|
||||
|
|
@ -308,7 +320,7 @@ window.GalleryTheater = function(){
|
|||
$body.addClass(themeWhiteKlass);
|
||||
|
||||
} else {
|
||||
gt.switchBtn
|
||||
switchBtn
|
||||
.removeClass(themeWhiteKlass)
|
||||
.find("i")
|
||||
.attr("class", nightKlass);
|
||||
|
|
@ -318,9 +330,9 @@ window.GalleryTheater = function(){
|
|||
}
|
||||
}
|
||||
|
||||
gt.toggleDescription = function(){
|
||||
var toggleDescription = function() {
|
||||
$(this).toggleClass("active");
|
||||
gt.descriptionArea.toggleClass("active");
|
||||
descriptionArea.toggleClass("active");
|
||||
}
|
||||
|
||||
var startLoading = function() {
|
||||
|
|
@ -328,7 +340,7 @@ window.GalleryTheater = function(){
|
|||
mainPicLoading = 0;
|
||||
nextPicLoading = 0;
|
||||
prevPicLoading = 0;
|
||||
gt.loader.show();
|
||||
loader.show();
|
||||
loadingInterval = setInterval(stopLoading, 300);
|
||||
|
||||
}
|
||||
|
|
@ -338,22 +350,22 @@ window.GalleryTheater = function(){
|
|||
clearInterval(loadingInterval);
|
||||
setTimeout(function() {
|
||||
loadingProcess = 0;
|
||||
gt.loader.hide();
|
||||
loader.hide();
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
|
||||
var createThumbStrip = function() {
|
||||
if(!gt.isTheaterInitialized){
|
||||
gt.thumbStrip.html("")
|
||||
$.each(gt.albumData.images,function(index, image){
|
||||
if (!isTheaterInitialized) {
|
||||
thumbStrip.html("")
|
||||
$.each(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.image = albumData.images[index];
|
||||
currentPic.index = index;
|
||||
if (old_index > index) {
|
||||
setMainPic("prev", true);
|
||||
|
|
@ -368,7 +380,7 @@ window.GalleryTheater = function(){
|
|||
li.attr("data-index", index);
|
||||
a.append(img);
|
||||
li.append(a);
|
||||
gt.thumbStrip.append(li);
|
||||
thumbStrip.append(li);
|
||||
})
|
||||
setThumbNavs();
|
||||
}
|
||||
|
|
@ -380,8 +392,8 @@ window.GalleryTheater = function(){
|
|||
|
||||
|
||||
var setThumbNavs = function() {
|
||||
var $thumbNav = gt.stage.find('.gallery-thumb-navs'),
|
||||
$thumb = gt.thumbStrip.find('img'),
|
||||
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),
|
||||
|
|
@ -395,6 +407,7 @@ window.GalleryTheater = function(){
|
|||
$thumbNav.removeClass('show');
|
||||
}
|
||||
};
|
||||
|
||||
function one_load(img) {
|
||||
if (img[0].complete) {
|
||||
setTimeout(loaded(img), 100)
|
||||
|
|
@ -402,6 +415,7 @@ window.GalleryTheater = function(){
|
|||
setTimeout(one_load, 20)
|
||||
}
|
||||
}
|
||||
|
||||
function loaded(img) {
|
||||
calculateHeight(img);
|
||||
mainPicLoading = 1;
|
||||
|
|
@ -414,40 +428,40 @@ window.GalleryTheater = function(){
|
|||
img = $("<img class='gallery-image gal-active'>");
|
||||
img.hide();
|
||||
img.attr("src", currentPic.image.file.theater.url);
|
||||
gt.imageContainer.append(img);
|
||||
imageContainer.append(img);
|
||||
img.one("load", function() {
|
||||
one_load(img)
|
||||
})
|
||||
gt.isTheaterInitialized = true;
|
||||
isTheaterInitialized = true;
|
||||
} else {
|
||||
img = gt.imageContainer.find(".gal-active");
|
||||
img = imageContainer.find(".gal-active");
|
||||
if (selectedFromStrip) {
|
||||
gt.imageContainer.find(".gal-" + direction).attr("src",currentPic.image.file.theater.url);
|
||||
imageContainer.find(".gal-" + direction).attr("src", currentPic.image.file.theater.url);
|
||||
}
|
||||
if (direction == "next") {
|
||||
gt.imageContainer.find(".gal-prev").remove();
|
||||
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");
|
||||
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") {
|
||||
gt.imageContainer.find(".gal-next").remove();
|
||||
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");
|
||||
imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active");
|
||||
thumbStrip.css("left", (parseInt(thumbStrip.css("left")) + 66) + "px");
|
||||
}
|
||||
mainPicLoading = 1;
|
||||
}
|
||||
gt.descriptionArea.html("<p>" + currentPic.image.description + "</p>");
|
||||
descriptionArea.html("<p>" + currentPic.image.description + "</p>");
|
||||
if (currentPic.image.description == null) {
|
||||
gt.descriptionArea.addClass("hide");
|
||||
descriptionArea.addClass("hide");
|
||||
} else {
|
||||
gt.descriptionArea.removeClass("hide");
|
||||
descriptionArea.removeClass("hide");
|
||||
}
|
||||
if (direction != null) {
|
||||
calculateHeight(gt.imageContainer.find(".gal-active"));
|
||||
calculateHeight(imageContainer.find(".gal-active"));
|
||||
}
|
||||
gt.thumbStrip.find("li.active").removeClass("active");
|
||||
gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
|
||||
thumbStrip.find("li.active").removeClass("active");
|
||||
thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
|
||||
|
||||
setStripToCenter();
|
||||
setNextPic();
|
||||
|
|
@ -495,17 +509,17 @@ window.GalleryTheater = function(){
|
|||
|
||||
var setStripToCenter = function() {
|
||||
left = (windowWidth / 2) - (66 * currentPic.index);
|
||||
gt.thumbStrip.css("left",left + "px");
|
||||
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],
|
||||
imageContainer.find(".gal-next.temp").remove()
|
||||
if (hasNextImage()) {
|
||||
var obj = 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);
|
||||
imageContainer.append(nextImg);
|
||||
nextImg.on("load", function() {
|
||||
calculateHeight(nextImg);
|
||||
nextPicLoading = 1;
|
||||
|
|
@ -517,13 +531,13 @@ window.GalleryTheater = function(){
|
|||
}
|
||||
|
||||
var setPrevPic = function() {
|
||||
gt.imageContainer.find(".gal-prev.temp").remove()
|
||||
if(gt.hasPreviousImage()) {
|
||||
var obj = gt.albumData.images[currentPic.index - 1],
|
||||
imageContainer.find(".gal-prev.temp").remove()
|
||||
if (hasPreviousImage()) {
|
||||
var obj = 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);
|
||||
imageContainer.prepend(prevImg);
|
||||
prevImg.on("load", function() {
|
||||
calculateHeight(prevImg);
|
||||
prevPicLoading = 1;
|
||||
|
|
|
|||
Loading…
Reference in New Issue