add slide widget
This commit is contained in:
parent
cf864a7625
commit
b5040c0d7c
|
|
@ -0,0 +1,527 @@
|
|||
var GalleryTheaterWidget = function(widget){
|
||||
var parent_divs = widget,
|
||||
parent_div_z_index = parent_divs.eq(parent_divs.length-1).css('z-index')
|
||||
parent_divs.eq(parent_divs.length-1).css('z-index','2000')
|
||||
var gt = this,
|
||||
currentPic = {},
|
||||
windowHeight = 0,
|
||||
windowWidth = 0,
|
||||
swipeController = null,
|
||||
resizing = null;
|
||||
loadingInterval = null,
|
||||
mainPicLoading = 0,
|
||||
nextPicLoading = 0,
|
||||
prevPicLoading = 0,
|
||||
currentSwipeImageDom = null,
|
||||
currentSwipeImageDomLeftPos = 0,
|
||||
windowScreenThresholdForTouch = 0,
|
||||
loadingProcess = 0;
|
||||
gt.stage = null;
|
||||
gt.stripNextBtn = null;
|
||||
gt.stripPrevBtn = null;
|
||||
gt.thumbToggle = null;
|
||||
gt.descriptionToggle = null;
|
||||
gt.closeBtn = null;
|
||||
gt.imageContainer = null;
|
||||
gt.albumData = {};
|
||||
gt.loader = null;
|
||||
gt.thumbStrip = null;
|
||||
gt.descriptionArea = null;
|
||||
gt.isTheaterInitialized = false;
|
||||
|
||||
var play_flag = false;
|
||||
var button_left_string = '<button id ="theaterPreviousButton" class="theaterButton">< </button>',
|
||||
button_right_string = '<button id ="theaterNextButton" class="theaterButton">> </button>',
|
||||
button_play_string = '<button id ="theaterPlayButton" class="theaterButton">▶ </button>',
|
||||
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");
|
||||
windowScreenThresholdForTouch = windowWidth / 3;
|
||||
startLoading();
|
||||
windowHeight = $(window).height();
|
||||
windowWidth = $(window).width();
|
||||
var addButton = function () {
|
||||
widget.find('.theaterButton').remove();
|
||||
if (!play_flag){
|
||||
$(button_left_string+button_play_string+button_right_string).insertAfter(widget.find('img.gal-active'));
|
||||
}
|
||||
else{
|
||||
$(button_left_string+button_stop_string+button_right_string).insertAfter(widget.find('img.gal-active'));
|
||||
}
|
||||
if (!widget.find(".gal-prev").length) { widget.find('#theaterPreviousButton').remove(); }
|
||||
if (!widget.find(".gal-next").length) { widget.find('#theaterNextButton').remove(); }
|
||||
|
||||
widget.find('#theaterPreviousButton').click(function () {
|
||||
gt.previousPic();
|
||||
addButton()
|
||||
});
|
||||
widget.find('#theaterNextButton').click(function () {
|
||||
gt.nextPic();
|
||||
addButton()
|
||||
});
|
||||
widget.find('#theaterPlayButton').click(function () {
|
||||
play_flag = true;
|
||||
playtimeoutID = window.setInterval(function(){
|
||||
gt.playallPic();
|
||||
},3000)
|
||||
addButton()
|
||||
});
|
||||
widget.find('#theaterStopButton').click(function () {
|
||||
play_flag = false;
|
||||
addButton()
|
||||
window.clearInterval(playtimeoutID)
|
||||
});
|
||||
}
|
||||
bindHandler();
|
||||
gt.createTheater();
|
||||
|
||||
addButton();
|
||||
|
||||
}
|
||||
|
||||
var bindHandler = function(){
|
||||
// handler to close the theater
|
||||
gt.closeBtn.on("click",gt.destroyTheater);
|
||||
|
||||
// handler to show theater
|
||||
widget.find("div[data-list=images] a").on("click",function(){
|
||||
gt.createTheater();
|
||||
return false;
|
||||
})
|
||||
|
||||
gt.switchBtn.on("click",gt.switchTheme);
|
||||
gt.descriptionToggle.on("click", gt.toggleDescription)
|
||||
gt.stripPrevBtn.on("click", gt.scrollStripRight);
|
||||
gt.stripNextBtn.on("click", gt.scrollStripLeft);
|
||||
|
||||
if(Modernizr.touch){
|
||||
gt.imageContainer.swipe({
|
||||
swipe : function(event, direction, distance, duration, fingerCount){
|
||||
if(direction == "left"){
|
||||
gt.nextPic();
|
||||
}else if(direction == "right"){
|
||||
gt.previousPic();
|
||||
}
|
||||
}
|
||||
})
|
||||
gt.thumbToggle.swipe({
|
||||
swipe : function(event, direction, distance, duration, fingerCount){
|
||||
if(direction == "up"){
|
||||
gt.thumbStrip.parent().addClass("show");
|
||||
gt.thumbToggle.addClass("up");
|
||||
gt.thumbToggle.find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down");
|
||||
}else if(direction == "down"){
|
||||
gt.thumbStrip.parent().removeClass("show");
|
||||
gt.thumbToggle.removeClass("up");
|
||||
gt.thumbToggle.find("i").removeClass("fa-angle-double-down").addClass("fa-angle-double-up");
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//handler for window resize
|
||||
$(window).resize(function(){
|
||||
clearTimeout(resizing);
|
||||
resizing = setTimeout(doneResizing,1000);
|
||||
})
|
||||
}
|
||||
|
||||
var bindKeyHandlers = function(){
|
||||
if(!Modernizr.touch){
|
||||
widget.on("click",".gal-active", gt.nextPic);
|
||||
widget.on("click",".gal-prev", gt.previousPic);
|
||||
widget.on("click",".gal-next", gt.nextPic);
|
||||
$(document).on("keyup",function(e){
|
||||
switch(e.keyCode){
|
||||
case 39:
|
||||
gt.nextPic();
|
||||
break;
|
||||
case 37:
|
||||
gt.previousPic();
|
||||
break;
|
||||
case 27:
|
||||
gt.destroyTheater();
|
||||
break;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var doneResizing = function(){
|
||||
windowHeight = $(window).height();
|
||||
windowWidth = $(window).width();
|
||||
setThumbNavs();
|
||||
}
|
||||
|
||||
var unBindKeyHandlers = function(){
|
||||
$(document).unbind("keyup");
|
||||
}
|
||||
|
||||
gt.destroyTheater = function(){
|
||||
parent_divs.eq(parent_divs.length-1).css('z-index',parent_div_z_index)
|
||||
gt.stage.hide();
|
||||
widget.removeClass("gallery-mode-on");
|
||||
gt.imageContainer.empty()
|
||||
unBindKeyHandlers();
|
||||
}
|
||||
|
||||
gt.createTheater = function(){
|
||||
gt.stage.show();
|
||||
widget.addClass("gallery-mode-on");
|
||||
bindKeyHandlers();
|
||||
gt.isTheaterInitialized = false;
|
||||
gt.albumData = {}
|
||||
gt.albumData.images = $.map(widget.find('img.gallery-thumb'),function(v){
|
||||
var url = $(v).attr('data-link'),
|
||||
theater_url = $(v).attr('data-theater-url'),
|
||||
thumb_url = $(v).attr('src')
|
||||
return {'url': url,
|
||||
'file': {'theater': {url: theater_url},
|
||||
'thumb': {url: thumb_url}
|
||||
}
|
||||
}
|
||||
})
|
||||
var cp = gt.albumData.images[0];
|
||||
currentPic = {"image" : cp, "index" : 0};
|
||||
createThumbStrip();
|
||||
|
||||
currentPic = currentPic;
|
||||
}
|
||||
|
||||
gt.hasNextImage = function(){
|
||||
return (currentPic.index + 1) <= (gt.albumData.images.length - 1);
|
||||
}
|
||||
|
||||
gt.hasPreviousImage = function(){
|
||||
return (currentPic.index > 0);
|
||||
}
|
||||
|
||||
gt.nextPic = function(){
|
||||
if(loadingProcess == 0){
|
||||
if(gt.hasNextImage()){
|
||||
startLoading();
|
||||
currentPic.image = gt.albumData.images[currentPic.index + 1];
|
||||
currentPic.index = currentPic.index + 1;
|
||||
setMainPic("next");
|
||||
}
|
||||
}
|
||||
}
|
||||
gt.playallPic = function(){
|
||||
if(loadingProcess == 0){
|
||||
mainPicLoading = 1;
|
||||
nextPicLoading = 1;
|
||||
prevPicLoading = 1;
|
||||
if(gt.hasNextImage()){
|
||||
currentPic.image = gt.albumData.images[currentPic.index + 1];
|
||||
currentPic.index = currentPic.index + 1;
|
||||
setMainPic("next");
|
||||
}
|
||||
else{
|
||||
currentPic.image = gt.albumData.images[0];
|
||||
currentPic.index = 0;
|
||||
setMainPic();
|
||||
gt.isTheaterInitialized = false;
|
||||
setTimeout(function(){
|
||||
loadingProcess = 0;
|
||||
nextPicLoading = 0;
|
||||
widget.find('.theaterButton').remove()
|
||||
widget.find("img.gallery-image.gal-prev.gal-inactive").remove();
|
||||
img = widget.find("img.gallery-image.gal-active");
|
||||
img.eq(0).remove();
|
||||
},100)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
gt.previousPic = function(){
|
||||
if(loadingProcess == 0){
|
||||
if(gt.hasPreviousImage()) {
|
||||
startLoading();
|
||||
currentPic.image = gt.albumData.images[currentPic.index - 1];
|
||||
currentPic.index = currentPic.index - 1;
|
||||
setMainPic("prev");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
gt.scrollStripLeft = function(){
|
||||
pixels_to_move = parseInt(gt.thumbStrip.css("left")) - (66 * 3);
|
||||
maximum_pixels = (windowWidth / 2) - (66 * (gt.albumData.images.length - 1));
|
||||
if(pixels_to_move < maximum_pixels){
|
||||
pixels_to_move = maximum_pixels;
|
||||
}
|
||||
gt.thumbStrip.css("left",pixels_to_move + "px");
|
||||
}
|
||||
|
||||
gt.scrollStripRight = function(){
|
||||
pixels_to_move = parseInt(gt.thumbStrip.css("left")) + (66 * 3);
|
||||
maximum_pixels = (windowWidth / 2);
|
||||
if(pixels_to_move > maximum_pixels){
|
||||
pixels_to_move = maximum_pixels;
|
||||
}
|
||||
gt.thumbStrip.css("left",pixels_to_move + "px");
|
||||
}
|
||||
|
||||
|
||||
gt.switchTheme = function(){
|
||||
var themeWhiteKlass = "theme-white",
|
||||
nightKlass = "fa fa-circle",
|
||||
dayKlass = "fa fa-circle-o",
|
||||
$body = widget;
|
||||
|
||||
if (!gt.switchBtn.hasClass(themeWhiteKlass)) {
|
||||
gt.switchBtn
|
||||
.addClass(themeWhiteKlass)
|
||||
.find("i")
|
||||
.attr("class", dayKlass);
|
||||
|
||||
$body.addClass(themeWhiteKlass);
|
||||
|
||||
} else {
|
||||
gt.switchBtn
|
||||
.removeClass(themeWhiteKlass)
|
||||
.find("i")
|
||||
.attr("class", nightKlass);
|
||||
|
||||
$body.removeClass(themeWhiteKlass);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
gt.toggleDescription = function(){
|
||||
$(this).toggleClass("active");
|
||||
gt.descriptionArea.toggleClass("active");
|
||||
}
|
||||
|
||||
var startLoading = function(){
|
||||
loadingProcess = 1;
|
||||
mainPicLoading = 0;
|
||||
nextPicLoading = 0;
|
||||
prevPicLoading = 0;
|
||||
gt.loader.show();
|
||||
loadingInterval = setInterval(stopLoading, 300);
|
||||
|
||||
}
|
||||
|
||||
var stopLoading = function(){
|
||||
if(mainPicLoading == 1 && nextPicLoading == 1 && prevPicLoading == 1){
|
||||
clearInterval(loadingInterval);
|
||||
setTimeout(function(){
|
||||
loadingProcess = 0;
|
||||
gt.loader.hide();
|
||||
},100)
|
||||
}
|
||||
}
|
||||
|
||||
var createThumbStrip = function(){
|
||||
if(!gt.isTheaterInitialized){
|
||||
gt.thumbStrip.html('')
|
||||
$.each(gt.albumData.images,function(index, image){
|
||||
var li = $("<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.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');
|
||||
}
|
||||
};
|
||||
function one_load(img){
|
||||
if (img[0].complete){
|
||||
setTimeout(loaded(img),100)
|
||||
}else{
|
||||
setTimeout(one_load,20)
|
||||
}
|
||||
}
|
||||
function loaded(img){
|
||||
calculateHeight(img);
|
||||
mainPicLoading = 1;
|
||||
img.fadeIn(100);
|
||||
}
|
||||
window.setMainPic = function(direction,selectedFromStrip){
|
||||
var img = null;
|
||||
widget.find('div.gallery-show-original a').eq(0).attr('href',currentPic.image.url)
|
||||
if(direction == null){
|
||||
img = $("<img class='gallery-image gal-active'>");
|
||||
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("<p>" + currentPic.image.description + "</p>");
|
||||
if(currentPic.image.description == null){
|
||||
gt.descriptionArea.addClass("hide");
|
||||
}else{
|
||||
gt.descriptionArea.removeClass("hide");
|
||||
}
|
||||
if (direction!=null){
|
||||
calculateHeight(gt.imageContainer.find(".gal-active"));
|
||||
}
|
||||
gt.thumbStrip.find("li.active").removeClass("active");
|
||||
gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
|
||||
|
||||
setStripToCenter();
|
||||
setNextPic();
|
||||
setPrevPic();
|
||||
}
|
||||
|
||||
var calculateHeight = function(img){
|
||||
var h = 0,
|
||||
w = 0,
|
||||
new_width = 0;
|
||||
if(!Modernizr.touch){
|
||||
if(typeof currentPic.image.height == "undefined"){
|
||||
h = img.height();
|
||||
currentPic.image.height = h;
|
||||
w = img.width();
|
||||
currentPic.image.width = w;
|
||||
}else{
|
||||
h = currentPic.image.height;
|
||||
w = currentPic.image.width;
|
||||
}
|
||||
}else{
|
||||
h = img.height();
|
||||
w = img.width();
|
||||
}
|
||||
if(h > (windowHeight - 150)){
|
||||
new_width = Math.round((windowHeight - 100) * w / h);
|
||||
new_width = (new_width / windowWidth) * 100;
|
||||
img.width(new_width + "%");
|
||||
}else{
|
||||
if(windowWidth < 770){
|
||||
img.width("90%");
|
||||
}else{
|
||||
img.width("65%");
|
||||
}
|
||||
}
|
||||
if (typeof set_gallery_height != 'undefined'){
|
||||
set_gallery_height(widget)
|
||||
}
|
||||
}
|
||||
|
||||
var setStripToCenter = function(){
|
||||
left = (windowWidth / 2) - (66 * currentPic.index);
|
||||
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)
|
||||
}
|
||||
|
||||
initialize();
|
||||
}
|
||||
if (typeof bind_gallery_widget_slide == 'undefined'){
|
||||
var bind_gallery_widget_slide = function(){
|
||||
$('.widget-gallery.widget5').trigger('onload')
|
||||
}
|
||||
$(document).ready(function(){
|
||||
bind_gallery_widget_slide()
|
||||
})
|
||||
}
|
||||
|
||||
// gallery-image gal-prev gal-inactive
|
||||
|
|
@ -126,7 +126,7 @@ class GalleriesController < ApplicationController
|
|||
params = OrbitHelper.params
|
||||
counts = OrbitHelper.widget_data_count
|
||||
images = AlbumImage.where({album_id:{"$in"=>album_ids}}).desc(:id).limit(counts *5).sample(counts)
|
||||
images = images.collect do |a|
|
||||
images = images.each_with_index.collect do |a,i|
|
||||
colors = album_color_map[a.album_id]
|
||||
alt_text = (a.description.nil? || a.description == "" ? "gallery image" : Nokogiri::HTML(a.description).text())
|
||||
{
|
||||
|
|
@ -141,7 +141,8 @@ class GalleriesController < ApplicationController
|
|||
"theater-src" => a.file.theater.url,
|
||||
"album-name" => a.album.name_translations[I18n.locale],
|
||||
"album_color" => iterate_data(colors[1],colors[0],@album_setting.album_card_background_color,'transparent'),
|
||||
"album_card_text_color" => iterate_data(colors[2],@album_setting.album_card_text_color)
|
||||
"album_card_text_color" => iterate_data(colors[2],@album_setting.album_card_text_color),
|
||||
"i" => i
|
||||
}
|
||||
end
|
||||
{
|
||||
|
|
|
|||
|
|
@ -80,108 +80,6 @@
|
|||
set_gallery_height()
|
||||
})
|
||||
</script>
|
||||
<% elsif @layout_type==nil %>
|
||||
<div class="show-gallery-2 gallery" style="margin-top: 2.4em;">
|
||||
<div class="gallery-loader" style="display: none;">
|
||||
<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-show-original gallery-actions-btn">
|
||||
<a title="在新視窗開啟 顯示原始圖片" href="/uploads/album_image/file/606574f19bb8189e640000ac/49b36_245.jpg"><i class="fa fa-image"></i></a>
|
||||
</div>
|
||||
<div class="gallery-toggle-desc gallery-actions-btn">
|
||||
<i class="fa fa-comment"></i>
|
||||
</div>
|
||||
<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">
|
||||
<img class="gallery-image gal-prev gal-inactive" src="/uploads/album_image/file/606574ea9bb8189e640000ab/theater_cbea4_249.jpg" style="display: inline;">
|
||||
<img class="gallery-image gal-active" src="/uploads/album_image/file/606574f19bb8189e640000ac/theater_49b36_245.jpg" style="display: inline;">
|
||||
<div class="theaterButtonGroup">
|
||||
<button id="theaterPreviousButton" class="theaterButton">< </button>
|
||||
<button id="theaterPlayButton" class="theaterButton">▶ </button>
|
||||
<button id="theaterNextButton" class="theaterButton">> </button>
|
||||
</div>
|
||||
<img class="gallery-image gal-next gal-inactive" src="/uploads/album_image/file/606574f79bb8189e640000ad/theater_ab1d2_244.jpg" style="display: inline;">
|
||||
</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 show">
|
||||
<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" style="left: -908.5px;">
|
||||
<li class="gallery-item" data-index="0"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/6065746d9bb8189e64000096/thumb_d987b_258.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="1"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574769bb8189e64000097/thumb_2a046_257.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="2"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/6065747c9bb8189e64000098/thumb_5076d_256.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="3"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574849bb8189e64000099/thumb_d834a_255.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="4"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574889bb8189e6400009a/thumb_ea2df_254.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="5"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/6065748c9bb8189e6400009b/thumb_40bf9_253.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="6"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574909bb8189e6400009c/thumb_3a8bb_252.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="7"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574969bb8189e6400009d/thumb_4551b_251.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="8"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/6065749d9bb8189e6400009e/thumb_4f713_250.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="9"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574a39bb8189e6400009f/thumb_cbea4_249.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="10"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574a99bb8189e640000a0/thumb_49b36_245.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="11"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574af9bb8189e640000a1/thumb_ab1d2_244.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="12"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574b69bb8189e640000a2/thumb_d987b_258.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="13"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574be9bb8189e640000a3/thumb_2a046_257.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="14"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574c49bb8189e640000a4/thumb_5076d_256.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="15"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574cc9bb8189e640000a5/thumb_d834a_255.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="16"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574d09bb8189e640000a6/thumb_ea2df_254.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="17"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574d49bb8189e640000a7/thumb_40bf9_253.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="18"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574d89bb8189e640000a8/thumb_3a8bb_252.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="19"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574de9bb8189e640000a9/thumb_4551b_251.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="20"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574e59bb8189e640000aa/thumb_4f713_250.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="21"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574ea9bb8189e640000ab/thumb_cbea4_249.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item active" data-index="22"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574f19bb8189e640000ac/thumb_49b36_245.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li><li class="gallery-item" data-index="23"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574f79bb8189e640000ad/thumb_ab1d2_244.jpg" alt="<div class="mt-1">
|
||||
|
||||
</div>"></a></li></ul>
|
||||
</div>
|
||||
<div class="gallery-img-desc"><p></p><div class="mt-1">
|
||||
|
||||
</div><p></p></div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% OrbitHelper.render_css_in_head(["theater.css"]) %>
|
||||
<%= javascript_include_tag "jquery.touchSwipe.min" %>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
<script type="text/javascript">
|
||||
function set_gallery_height(widget){
|
||||
var h = widget.find('.gallery-thumb-container').height()+widget.find('.gallery-image.gal-active').height()+widget.find('.gallery-actions').height()+widget.find('.theaterButton').height()+20
|
||||
widget.find('.show-gallery-2.gallery').css('height',h)
|
||||
}
|
||||
</script>
|
||||
<% OrbitHelper.render_css_in_head(["theater.css"]) %>
|
||||
<%= javascript_include_tag "jquery.touchSwipe.min" %>
|
||||
<%= javascript_include_tag "theater-widget" %>
|
||||
<% OrbitHelper.render_meta_tags([{"name" => "mobile-web-app-capable","content" => "yes"},{"name" => "apple-mobile-web-app-status-bar-style","content" => "black-translucent"}]) %>
|
||||
<div class="widget-gallery gallery widget5 no-print" onload="GalleryTheaterWidget($(this));$(window).resize(function(){set_gallery_height($(this))});">
|
||||
<div id="gallery-theater-stage">
|
||||
<div class="show-gallery-2 gallery" style="margin-top: 2.4em;">
|
||||
<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-show-original gallery-actions-btn">
|
||||
<a title="<%= t('gallery.show_original_image') %>" href="/uploads/album_image/file/606574f19bb8189e640000ac/49b36_245.jpg"><i class="fa fa-image"></i></a>
|
||||
</div>
|
||||
<div class="gallery-toggle-desc gallery-actions-btn">
|
||||
<i class="fa fa-comment"></i>
|
||||
</div>
|
||||
<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 show">
|
||||
<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" data-level="0" data-list="images">
|
||||
<li class="gallery-item" data-index="{{i}}">
|
||||
<a style="cursor: pointer;">
|
||||
<img class="gallery-thumb" src="{{thumb-src}}" data-theater-url="{{theater-src}}" data-link="{{src}}" alt="{{alt_title}}">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="gallery-img-desc">
|
||||
<div class="gallery-img-desc-inner">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
if(typeof Modernizr == "undefined"){
|
||||
var script = $("<script>");
|
||||
script.attr("src","/assets/modernizr.js");
|
||||
$("head").append(script);
|
||||
}
|
||||
|
||||
</script>
|
||||
</div>
|
||||
|
|
@ -73,6 +73,14 @@
|
|||
"en" : "4. Card"
|
||||
},
|
||||
"thumbnail" : "thumb.png"
|
||||
},
|
||||
{
|
||||
"filename" : "gallery_widget5",
|
||||
"name" : {
|
||||
"zh_tw" : "5. 投影片式輪播",
|
||||
"en" : "5. Slide"
|
||||
},
|
||||
"thumbnail" : "thumb.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue