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);