Major updates for gallery

This commit is contained in:
Harry Bomrah 2012-07-31 01:15:48 +08:00
parent 929cd3b0cc
commit 17dffb15e1
5 changed files with 59 additions and 21 deletions

View File

@ -181,7 +181,12 @@ var galleryAPI = function(){
var $slidelist = $('.slidelist'), var $slidelist = $('.slidelist'),
$rslide = $('.rslide'), $rslide = $('.rslide'),
$rslidenav = $('.rslidenav'), $rslidenav = $('.rslidenav'),
$img = $("#main_pic img"); $img = $("#main_pic img"),
wHeight = $(window).height();
$("#main_pic").height(picHeight);
$img.height("100%");
$(".slidectrl a.togglelist").click(function(){ $(".slidectrl a.togglelist").click(function(){
var rslide_h = $rslide.outerHeight(); var rslide_h = $rslide.outerHeight();
if ( $slidelist.height() < 1 ){ if ( $slidelist.height() < 1 ){
@ -195,6 +200,9 @@ var galleryAPI = function(){
$(".slidectrl a.togglescreen").click(function(){ $(".slidectrl a.togglescreen").click(function(){
toggleFullscreen(); toggleFullscreen();
}) })
$(".slidectrl a.browserfullscreen").click(function(){
browserFullScreen();
})
$slidelist.find("a.list_element").click(function(){ $slidelist.find("a.list_element").click(function(){
imagecount = parseInt($(this).parent().attr("for")); imagecount = parseInt($(this).parent().attr("for"));
changeImage($(this)); changeImage($(this));
@ -219,12 +227,19 @@ var galleryAPI = function(){
return false; return false;
} }
if(e.keyCode == 27){ if(e.keyCode == 27){
toggleFullscreen(); toggleFullscreen();
return false; return false;
} }
if(e.keyCode == 70 || e.keyCode == 102){
if($rslide.hasClass("fullscreen"))
browserFullScreen();
}
}); });
var browserFullScreen = function(){
var el = document.documentElement,
rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen;
rfs.call(el);
}
var nextpic = function(dom){ var nextpic = function(dom){
if(imagecount == imageArray.length - 1) if(imagecount == imageArray.length - 1)
imagecount = 0; imagecount = 0;
@ -232,7 +247,6 @@ var galleryAPI = function(){
imagecount++; imagecount++;
changeImage(dom); changeImage(dom);
} }
var prevpic = function(dom){ var prevpic = function(dom){
if(imagecount == 0) if(imagecount == 0)
imagecount = imageArray.length - 1 imagecount = imageArray.length - 1
@ -240,21 +254,27 @@ var galleryAPI = function(){
imagecount--; imagecount--;
changeImage(dom); changeImage(dom);
} }
var toggleFullscreen = function(){ var toggleFullscreen = function(){
if($rslide.hasClass("fullscreen")){ if($rslide.hasClass("fullscreen")){
$rslide.css("position","relative"); $rslide.css("position","relative");
$rslide.removeClass("fullscreen"); $rslide.removeClass("fullscreen");
$(".slidectrl a.browserfullscreen").hide();
$img.css({"padding":""}) $img.css({"padding":""})
$("#main_pic").height(picHeight);
}else{ }else{
$("#main_pic").height(wHeight);
// $img.height("100%");
$rslide.css("position",""); $rslide.css("position","");
$rslide.addClass("fullscreen"); $rslide.addClass("fullscreen");
$img.css({"padding":($rslide.height()-$img.height())/2}) $img.css({"padding":($rslide.height()-$img.height())/2})
$(".slidectrl a.browserfullscreen").show();
} }
} }
var changeImage = function(dom){ var changeImage = function(dom){
var pageurl = dom.attr('href'); var pageurl = dom.attr('href');
$img.fadeOut(200,function(){
$img.attr({"src":dom.attr("data-content"),"height":picHeight+"px"}); $img.attr({"src":dom.attr("data-content"),"height":picHeight+"px"});
$img.fadeIn(200);
if($rslide.hasClass("fullscreen")){ if($rslide.hasClass("fullscreen")){
$img.css({"padding":($rslide.height()-$img.height())/2}) $img.css({"padding":($rslide.height()-$img.height())/2})
} }
@ -266,6 +286,7 @@ var galleryAPI = function(){
// $(".slideinfo b.info").text(imageArray[imagecount].title); // $(".slideinfo b.info").text(imageArray[imagecount].title);
$(".slideinfo span.info").text(imageArray[imagecount].description); $(".slideinfo span.info").text(imageArray[imagecount].description);
updateNavigation(); updateNavigation();
})
} }
var updateNavigation = function(){ var updateNavigation = function(){
var next, prev; var next, prev;
@ -333,8 +354,8 @@ var galleryAPI = function(){
$("#description_loader .txtchange").each(function(){ $("#description_loader .txtchange").each(function(){
dataArray.push({"id":$(this).attr("for"),"text": $(this).val()}); dataArray.push({"id":$(this).attr("for"),"text": $(this).val()});
}) })
albumnm = $(".albumname_edit #album_name_text").val();
$.post("update_album",{data:dataArray},function(){ $.post("update_album",{data:dataArray,"aid":id,"name":albumnm},function(){
}) })
}) })
@ -365,15 +386,16 @@ var galleryAPI = function(){
doms_to_delete[dom].hide("slide",function(){$(this).remove();}) doms_to_delete[dom].hide("slide",function(){$(this).remove();})
} }
} }
g.albumArea.find(".rghead .rgfn .bt-delete").hide();
}) })
} }
}) })
} }
var head = '<a href="orbit_gallery?album='+id+'" class="rgui bt-back rgbt" title="Back"><span id="album_name_span">Back to photos</span></a></div>'; var head = '<a href="orbit_gallery?album='+id+'" class="rgui bt-back rgbt" title="Back"><span id="album_name_span">Back to photos</span></a></div>';
head+='<a class="rgui bt-del bt-delete rgbt" onclick="return false;" style="display:none;" title="Delete Selected" href=""><span>Delete Selected</span></a>'; head+='<a class="rgui bt-del bt-delete rgbt" onclick="return false;" style="display:none;" title="Delete Selected" href=""><span>Delete Selected</span></a>';
head+='<a class="rgui bt-save rgbt" onclick="return false;" style="display:none;" title="Save" href=""><span>Save</span>'; head+='<a class="rgui bt-save rgbt" onclick="return false;" style="display:none;" title="Save" href=""><span>Save</span>';
g.albumArea.find(".rghead .rgfn").html(head); g.albumArea.find(".rghead .rgfn").html(head);
rcom.bindDomToHead($(".rghead"));
g.albumArea.find("#imgholder").load("edit_album?aid="+id,function(data,response,xhr){ g.albumArea.find("#imgholder").load("edit_album?aid="+id,function(data,response,xhr){
if(xhr.status == 404){ if(xhr.status == 404){
$(this).text("Album not found."); $(this).text("Album not found.");

View File

@ -241,6 +241,7 @@ body.fullscreen, .fullscreen #container, .fullscreen #container2, .fullscreen #m
.slidectrl a.togglelist { background-position: 0 -30px; } .slidectrl a.togglelist { background-position: 0 -30px; }
.slidectrl a.toinline { background-position: -30px 0; } .slidectrl a.toinline { background-position: -30px 0; }
.slidectrl a.sharebt { background-position: -30px -30px; } .slidectrl a.sharebt { background-position: -30px -30px; }
.slidectrl a.browserfullscreen {background-position: -30px -30px; display:none;}
.slidectrl a.slidestop { background-position: 0 -60px; } .slidectrl a.slidestop { background-position: 0 -60px; }
.slideinfo { .slideinfo {
height: 30px; height: 30px;

View File

@ -2,6 +2,7 @@ class Panel::Gallery::BackEnd::OrbitGalleriesController < OrbitBackendController
def index def index
@categorylist = GalleryCategory.all @categorylist = GalleryCategory.all
@cid = params['cat']
end end
def new_category def new_category
@ -115,6 +116,15 @@ class Panel::Gallery::BackEnd::OrbitGalleriesController < OrbitBackendController
end end
def update_album def update_album
data = params['data']
album_name = params['name']
aid = params['aid']
data.each do |d|
image = GalleryImage.find(d[1][:id])
image.update_attributes(:description=>d[1][:text])
end
album = GalleryAlbum.find(aid)
album.update_attributes(:name => album_name)
render :json =>{"success"=>true}.to_json render :json =>{"success"=>true}.to_json
end end
end end

View File

@ -10,8 +10,12 @@
<option value="">--Select a category--</option> <option value="">--Select a category--</option>
<option value="all">All</option> <option value="all">All</option>
<% @categorylist.each do |category| %> <% @categorylist.each do |category| %>
<% if @cid == category.id.to_s %>
<option value='<%= category.id %>' selected><%= category.name %></option>
<% else %>
<option value='<%= category.id %>'><%= category.name %></option> <option value='<%= category.id %>'><%= category.name %></option>
<% end %> <% end %>
<% end %>
</select> </select>
</div> </div>

View File

@ -25,6 +25,7 @@
<div class="slidectrl"> <div class="slidectrl">
<a href="" class="togglescreen" title="切換全螢幕" onclick="return false;">Screen</a> <a href="" class="togglescreen" title="切換全螢幕" onclick="return false;">Screen</a>
<a href="" class="togglelist" title="顯示照片清單" onclick="return false;">List</a> <a href="" class="togglelist" title="顯示照片清單" onclick="return false;">List</a>
<a href="" class="browserfullscreen" title="顯示照片清單" onclick="return false;">F</a>
<div class="slideinfo"> <div class="slideinfo">
<!-- <b class="info"><%= @image.title %></b> --> <!-- <b class="info"><%= @image.title %></b> -->
<span class="info"><%= @image.description %></span> <span class="info"><%= @image.description %></span>