From: Alexander Sadleir <maxious@lambdacomplex.org>
Date: Sat, 03 Sep 2011 15:54:47 +0000
Subject: Add image resizing to better fit screens
X-Git-Url: https://maxious.lambdacomplex.org/git/?p=photocalendar.git&a=commitdiff&h=389dfc856faf902798bb18493dcebe8598504a09
---
Add image resizing to better fit screens
---


--- a/common.inc.php
+++ b/common.inc.php
@@ -42,7 +42,15 @@
 
     </footer>
   </div> <!--! end of #container -->
-  
+  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
+ <script>window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">\x3C/script>')</script>
+     <script type="text/javascript" src="js/jquery.imagefit.js"></script>
+<script>
+$(window).load(function(){
+    $('.col1').imagefit();
+});
+</script>
 </body>
 </html>
 	<?php

--- a/index.php
+++ b/index.php
@@ -12,7 +12,7 @@
 if ($photoFilename == false) {
     echo "Oops, no photo uploaded for this day<br>";
 } else {
-echo '<img src="'.$photoFilename.'">';
+echo '<img alt="Photo for '.$displayDate.'" src="'.$photoFilename.'">';
 }
 ?>
     </div> <div class="col2">

--- /dev/null
+++ b/js/jquery.imagefit.js
@@ -1,1 +1,48 @@
-
+/* jquery.imagefit 
+ *
+ * Version 0.2 by Oliver Boermans <http://www.ollicle.com/eg/jquery/imagefit/>
+ *
+ * Extends jQuery <http://jquery.com>
+ *
+ */
+(function($) {
+	$.fn.imagefit = function(options) {
+		var fit = {
+			all : function(imgs){
+				imgs.each(function(){
+					fit.one(this);
+					})
+				},
+			one : function(img){
+				$(img)
+					.width('100%').each(function()
+					{
+						$(this).height(Math.round(
+							$(this).attr('startheight')*($(this).width()/$(this).attr('startwidth')))
+						);
+					})
+				}
+		};
+		
+		this.each(function(){
+				var container = this;
+				
+				// store list of contained images (excluding those in tables)
+				var imgs = $('img', container).not($("table img"));
+				
+				// store initial dimensions on each image 
+				imgs.each(function(){
+					$(this).attr('startwidth', $(this).width())
+						.attr('startheight', $(this).height())
+						.css('max-width', $(this).attr('startwidth')+"px");
+				
+					fit.one(this);
+				});
+				// Re-adjust when window width is changed
+				$(window).bind('resize', function(){
+					fit.all(imgs);
+				});
+			});
+		return this;
+	};
+})(jQuery);