Display photo title on hover, if title is too long for the overlay

assets/js/modules/build.js

@@ -63,14 +63,18 @@ build = {
 		if (!photoJSON) return "";
 
 		var photo = "",
+			longTitle = "",
 			title = photoJSON.title;
 
-		if (title.length>18) title = photoJSON.title.substr(0, 18) + "...";
+		if (title.length>18) {
+			title = photoJSON.title.substr(0, 18) + "...";
+			longTitle = photoJSON.title;
+		}
 
 		photo += "<div class='photo' data-album-id='" + photoJSON.album + "' data-id='" + photoJSON.id + "'>";
 		photo +=	"<img src='" + photoJSON.thumbUrl + "' width='200' height='200' alt='thumb'>";
 		photo +=	"<div class='overlay'>";
-		photo +=		"<h1>" + title + "</h1>";
+		photo +=		"<h1 title='" + longTitle + "'>" + title + "</h1>";
 		photo +=		"<a>" + photoJSON.sysdate + "</a>";
 		photo +=	"</div>";
 

assets/js/modules/view.js

@@ -167,8 +167,8 @@ view = {
 
 				if (albums.json.content[albumID].password) prefix = "<span class='icon-lock'></span> ";
 				if (title.length>18) {
+					longTitle = title;
 					title = title.substr(0, 18) + "...";
-					longTitle = albums.json.content[albumID].title;
 				}
 
 				$(".album[data-id='" + albumID + "'] .overlay h1")
@@ -262,11 +262,17 @@ view = {
 
 			title: function(photoID) {
 
-				var title = album.json.content[photoID].title;
+				var longTitle = "",
+					title = album.json.content[photoID].title;
 
-				if (title.length>18) title = title.substr(0, 18) + "...";
+				if (title.length>18) {
+					longTitle = title;
+					title = title.substr(0, 18) + "...";
+				}
 
-				$(".photo[data-id='" + photoID + "'] .overlay h1").html(title);
+				$(".photo[data-id='" + photoID + "'] .overlay h1")
+					.html(title)
+					.attr("title", longTitle);
 
 			},