summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--lib/gallery.common.js23
-rw-r--r--themes/default/css/screen.css21
-rw-r--r--themes/default/js/ui.init.js64
3 files changed, 62 insertions, 46 deletions
diff --git a/lib/gallery.common.js b/lib/gallery.common.js
index 7e6acad9..b1160e31 100644
--- a/lib/gallery.common.js
+++ b/lib/gallery.common.js
@@ -12,8 +12,8 @@
if (container == null) {
container = 'div';
}
- $(this).html("<" + container + ">" + $(this).html() + "</" + container + ">");
- var el = $(this).children(container + ":first");
+ $(this).html("<" + container + " class=\"gValign\">" + $(this).html() + "</" + container + ">");
+ var el = $(this).children(container + ".gValign");
var elh = $(el).height();
var ph = $(this).height();
var nh = (ph - elh) / 2;
@@ -52,4 +52,23 @@
$(this).toggleClass("gLoading" + size);
});
};
+
+ /**
+ * Reduce the width of an image if it's wider than its parent container
+ * @param elementID The image's container
+ */
+ $.fn.gallery_fit_image = function() {
+ var photo = $(this).find("img").filter(function() {
+ return this.id.match(/gPhotoId-\d+/);
+ });
+ var cont_width = $(this).width();
+ var photo_width = photo.width();
+ if (cont_width < photo_width) {
+ var proportion = cont_width / photo_width;
+ photo.width(cont_width);
+ photo.height(proportion * photo.height());
+ }
+ };
+
})(jQuery);
+
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 91d90b45..9d8acf28 100644
--- a/themes/default/js/ui.init.js
+++ b/themes/default/js/ui.init.js
@@ -58,16 +58,15 @@ $(document).ready(function() {
$(".gContextMenu a").addClass("gButtonLink ui-icon-left");
$(".gContextMenu a").prepend("<span class=\"ui-icon\"></span>");
$(".gContextMenu a span").each(function() {
- var iconClass = $(this).parent().attr("class").match(/ui-icon-.[^\s]*/).toString();
+ var iconClass = $(this).parent().attr("class").match(/ui-icon-.[^\s]+/).toString();
$(this).addClass(iconClass);
});
}
- // Photo/Item item view only
+ // Photo/Item item view
if ($("#gItem").length) {
- // Ensure that sized image versions
- // fit inside their container
- sizedImage();
+ // Ensure the resized image fits within its container
+ $("#gItem").gallery_fit_image();
// Collapse comments form, insert button to expand
if ($("#gAddCommentForm").length) {
@@ -87,7 +86,6 @@ $(document).ready(function() {
duration: 1000,
hash: true
});
-
}
// Add hover state for buttons
@@ -104,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(){
@@ -123,7 +135,7 @@ $(document).ready(function() {
function() {
$(this).find("ul").slideDown("fast");
var dialogLinks = $(this).find(".gDialogLink");
- $(dialgoLinks).gallery_dialog();
+ $(dialogLinks).gallery_dialog();
},
function() {
$(this).find("ul").slideUp("slow");
@@ -139,19 +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);
+ };
-/**
- * Reduce width of sized photo if it's wider than its parent container
- */
-function sizedImage() {
- var containerWidth = $("#gItem").width();
- var oPhoto = $("#gItem img").filter(function() {
- return this.id.match(/gPhotoId-/);
- });
- if (containerWidth < oPhoto.width()) {
- var proportion = containerWidth / oPhoto.width();
- oPhoto.width(containerWidth);
- oPhoto.height(proportion * oPhoto.height());
- }
-}
+});
generated by cgit v1.2.3 (git 2.46.0) at 2025-10-13 12:12:20 +0000