#2018 follow-on and #2023 - Fixed issues with thumb hover effects.

- cleaned up resize after hover: more efficient, totally browser-compatible (IE7-10, FF, Chrome tested!).
- cleaned up resize on hover: more efficient, fixed bug with neighbors that are bigger but only by a little.
- fixed bugs when moving off item with expanded context menu and then quickly back: oversized hover, flicker.
- cleaned up formatting, removed unneeded code, and added comments.

2 files changed, 17 insertions, 22 deletions

diff --git a/lib/gallery.common.js b/lib/gallery.common.js
index fa11aeb9..c3d1362c 100644
--- a/lib/gallery.common.js
+++ b/lib/gallery.common.js
@@ -144,11 +144,13 @@
       list.hide();
 
       hover_target.hover(
+        // The stop arguments below ensure that when we leave an item with an expanded context
+        // menu then *quickly* come back, we neither freeze mid-slide nor flicker.
         function() {
-          list.stop(true, true).slideDown("fast");
+          list.stop(false, true).slideDown("fast");
         },
         function() {
-          list.stop(true, true).slideUp("slow");
+          list.stop(true, false).slideUp("slow");
         }
       );
 
diff --git a/themes/wind/js/ui.init.js b/themes/wind/js/ui.init.js
index c9f9202c..fd75c210 100644
--- a/themes/wind/js/ui.init.js
+++ b/themes/wind/js/ui.init.js
@@ -49,42 +49,35 @@ $(document).ready(function() {
   // Album and search results views
   if ($("#g-album-grid").length) {
     // Set equal height for album items and vertically align thumbnails/metadata
-    $('.g-item').equal_heights().gallery_valign();
+    $(".g-item").equal_heights().gallery_valign();
+    // Store the resulting item height.  Storing this here for the whole grid as opposed to in the
+    // hover event as an attr for each item is more efficient and ensures IE6-8 compatibility.
+    var item_height = $(".g-item").height();
 
     // Initialize thumbnail hover effect
     $(".g-item").hover(
       function() {
-        // Store original height so we can change it back afterward
-        $(this).attr("data-orig-height", $(this).height());
         // Insert a placeholder to hold the item's position in the grid
-        var placeHolder = $(this).clone().attr("id", "g-place-holder");
-        $(this).after($(placeHolder));
+        var place_holder = $(this).clone().attr("id", "g-place-holder");
+        $(this).after($(place_holder));
         // Style and position the hover item
         var position = $(this).position();
         $(this).css("top", position.top).css("left", position.left);
         $(this).addClass("g-hover-item");
-        // Initialize the contextual menu
+        // Initialize the contextual menu. Note that putting it here delays execution until needed.
         $(this).gallery_context_menu();
-        // Set the hover item's height
+        // Set the hover item's height.  Use "li a" on the context menu so we get the height of the
+        // collapsed menu and avoid problems with incomplete slideUp/Down animations.
         $(this).height("auto");
-        var context_menu = $(this).find(".g-context-menu");
-        var adj_height = $(this).height() + context_menu.height();
-        if ($(this).next().height() > $(this).height()) {
-          $(this).height($(this).next().height());
-        } else if ($(this).prev().height() > $(this).height()) {
-          $(this).height($(this).prev().height());
-        } else {
-          $(this).height(adj_height);
-        }
+        $(this).height(Math.max($(this).height(), item_height) +
+                       $(this).find(".g-context-menu li a").height());
       },
       function() {
         // Reset item height and position
-        $(this).css("height", $(this).attr("data-orig-height"));
-        $(this).css("position", "relative");
-        $(this).css("top", 0).css("left", 0);
+        $(this).height(item_height);
+        $(this).css("top", "").css("left", "");
         // Remove the placeholder and hover class from the item
         $(this).removeClass("g-hover-item");
-        $(this).gallery_valign();
         $("#g-place-holder").remove();
       }
     );