Major updates for gallery
This commit is contained in:
		
							parent
							
								
									0333f97bf3
								
							
						
					
					
						commit
						314af3c16f
					
				| 
						 | 
					@ -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.");
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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;
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue