Keep image placement from shifting on hover, set gHoverItem height properly.

2 files changed, 36 insertions, 23 deletions

diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index 05d2977a..6a29e95f 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -475,7 +475,8 @@ form .gError,
   margin: 5px 0;
 }
 
-.gPhoto h2, .gItem .gMetadata {
+#gContent .gPhoto h2,
+#gContent .gItem .gMetadata {
   display: none;
 }
 
@@ -484,7 +485,7 @@ form .gError,
 }
 
 #gContent #gAlbumGrid .gAlbum h2 span {
-  background: transparent url('../images/ico-album.png') no-repeat top left !important;
+  background: transparent url('../images/ico-album.png') no-repeat top left;
   display: inline-block;
   height: 16px;
   margin-right: 5px;
@@ -496,8 +497,6 @@ form .gError,
   border: 1px solid #000;
   display: none;
   height: auto;
-  margin-top: -1em;
-  margin-left: -.4em;
   padding: 0;
   position: absolute;
   width: auto;
@@ -505,18 +504,11 @@ form .gError,
 }
 
 #gContent #gAlbumGrid #gHoverItem .gItem {
-  float: none;
-  height: 210px;
-  margin: 0;
-  padding: 0 1em 3em;
-}
-
-#gContent #gAlbumGrid #gHoverItem .gItem div {
-  margin-top: 1em !important;
+  border: none;
 }
 
-#gHoverItem .gItem h2,
-#gHoverItem .gItem .gMetadata {
+#gContent #gHoverItem .gItem h2,
+#gContent #gHoverItem .gItem .gMetadata {
   display: block;
 }
 
@@ -627,6 +619,7 @@ form .gError,
   bottom: 0;
   display: none;
   left: 0;
+  margin-top: 2em;
   position: absolute;
   width: 100%;
 }
diff --git a/themes/default/js/ui.init.js b/themes/default/js/ui.init.js
index 29680a48..9d8acf28 100644
--- a/themes/default/js/ui.init.js
+++ b/themes/default/js/ui.init.js
@@ -86,7 +86,6 @@ $(document).ready(function() {
       duration: 1000,
       hash: true
     });
-
   }
 
   // Add hover state for buttons
@@ -103,16 +102,30 @@ $(document).ready(function() {
   // @todo apply hover affect to links
   $(".gItem").hover(
     function(){
-      var pos = $(this).position();
-      var itemClasses = $(this).attr("class");
-      var bgColor = $(this).css("background-color");
-      var cont = $(this).parent();
+      var position = $(this).position();
+      var item_classes = $(this).attr("class");
+      var bg_color = $(this).css("background-color");
+      var container = $(this).parent();
       $("#gHoverItem").remove();
-      cont.append("<div id=\"gHoverItem\"><div class=\"" + itemClasses + "\">" 
+      container.append("<div id=\"gHoverItem\"><div class=\"" + item_classes + "\">"
           + $(this).html() + "</div></div>");
-      $("#gHoverItem").css("top", pos.top);
-      $("#gHoverItem").css("left", pos.left);
-      $("#gHoverItem").css("background-color", bgColor);
+      $("#gHoverItem").css("top", position.top);
+      $("#gHoverItem").css("left", position.left);
+      $("#gHoverItem").css("background-color", bg_color);
+
+      var v_align = $(this).find(".gValign");
+      var title = $(this).find("h2");
+      var meta = $(this).find(".gMetadata");
+      var context = $(this).find(".gContextMenu");
+      var context_label = $(this).find(".gContextMenu li:first");
+      $("#gHoverItem .gItem").height(
+          $(v_align).gallery_height()
+          + $(title).gallery_height()
+          + $(meta).gallery_height()
+          + parseInt($(context).css("margin-top").replace("px",""))
+          + $(context_label).gallery_height()
+        );
+      
       $("#gHoverItem").fadeIn("fast");
       $("#gHoverItem").hover(
         function(){
@@ -138,4 +151,11 @@ $(document).ready(function() {
     }
   );
 
+  $.fn.gallery_height = function() {
+    var ht = $(this).height();
+    var mt = $(this).css("margin-top").replace("px","");
+    var mb = $(this).css("margin-bottom").replace("px","");
+    return ht + parseInt(mt) + parseInt(mb);
+  };
+
 });