Added lightbox to post uploads

public_html/media/css/post-upload.css

@@ -155,3 +155,16 @@ ul.tagit {
 .post .form-wrapper {
 	overflow: hidden;
 }
+
+#lightbox {
+	display: none;
+	position: absolute;
+	pointer-events: none;
+	max-width: 400px;
+	max-height: 400px;
+	margin-top: -50%;
+	margin-left: -50%;
+	background: white;
+	border: 0.5em solid white;
+	box-shadow: 0 0 0 3px #eee;
+}

public_html/media/js/post-upload.js

@@ -180,8 +180,7 @@ $(function()
 				{
 					return function(e)
 					{
-						img.css('background-image', 'none');
+						changeThumb(img, e.target.result);
-						img.attr('src', e.target.result);
 					};
 				})(file, img);
 				reader.readAsDataURL(file);
@@ -189,6 +188,14 @@ $(function()
 		});
 	}
 
+	function changeThumb(img, url)
+	{
+		$(img)
+			.css('background-image', 'none')
+			.attr('src', url)
+			.data('custom-thumb', true);
+	}
+
 	function handleURLs(urls)
 	{
 		handleInputs(urls, function(postDom, url)
@@ -202,18 +209,13 @@ $(function()
 				{
 					postDom.find('.file-name strong')
 						.text(data.data.title);
-					postDom.find('img')
+					changeThumb(postDom.find('img'), data.data.thumbnail.hqDefault);
-						.css('background-image', 'none')
-						.attr('src', data.data.thumbnail.hqDefault);
 				});
 			}
 			else
 			{
-				postDom.find('.file-name strong')
+				postDom.find('.file-name strong').text(url);
-					.text(url);
+				changeThumb(postDom.find('img'), url);
-				postDom.find('img')
-					.css('background-image', 'none')
-					.attr('src', url);
 			}
 		});
 	}
@@ -240,4 +242,24 @@ $(function()
 		else
 			$('#upload-step2').fadeIn();
 	}
+
+	$('.post img').mouseenter(function(e)
+	{
+		if ($(this).data('custom-thumb') != true)
+			return;
+
+		$('#lightbox')
+			.attr('src', $(this).attr('src'))
+			.show()
+			.position({
+				of: $(this),
+				my: 'center center',
+				at: 'center center',
+			})
+			.show();
+	});
+	$('.post img').mouseleave(function(e)
+	{
+		$('#lightbox').hide();
+	});
 });

src/Views/post-upload.phtml

@@ -107,3 +107,5 @@ LayoutHelper::addScript('../lib/tagit/jquery.tagit.js');
 		</div>
 	</div>
 </div>
+
+<img id="lightbox" src="<?php echo \Chibi\UrlHelper::absoluteUrl('/media/img/pixel.gif') ?>" alt="Preview"/>