Add image resizing to better fit screens
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


file:a/index.php -> file:b/index.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);