1. Import

html/js/thmbnlgllr/css/main.css

@@ -0,0 +1,55 @@
+/* -------------------------------------------
+		MAIN STYLES
+----------------------------------------------  */
+
+#wrapper {
+    width: 90%;
+    margin: 20px auto;
+    text-align: center;
+    font-family: Georgia, serif;
+    color: #222;
+}
+
+h1 {
+    font-size: 40px;
+}
+
+.credit {
+    font-style: italic;
+    margin: 2px;
+    padding: 0;
+    font-size: 11px;
+    color: #999;
+}
+
+.credit a, .credit a:visited {
+    color: #888;
+}
+
+footer {
+    width: 320px;
+    margin: 20px auto;
+}
+
+footer p {
+    font-size: 14px;
+    line-height: 1;
+}
+
+footer a {
+    padding: 8px;
+    display: block;
+    color: #999;
+    font-size: 24px;
+    font-style: italic;
+}
+
+footer a:visited {
+    color: #999;
+}
+
+@media screen and (max-width:680px) {
+    h1 {
+        font-size: 30px;
+    }
+}

html/js/thmbnlgllr/css/normalize.css

@@ -0,0 +1,439 @@
+/*! normalize.css 2011-08-31T22:02 UTC · http://github.com/necolas/normalize.css */
+
+/* =============================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/*
+ * Corrects block display not defined in IE6/7/8/9 & FF3
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section {
+    display: block;
+}
+
+/*
+ * Corrects inline-block display not defined in IE6/7/8/9 & FF3
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+}
+
+/*
+ * Prevents modern browsers from displaying 'audio' without controls
+ */
+
+audio:not([controls]) {
+    display: none;
+}
+
+/*
+ * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
+ * Known issue: no IE6 support
+ */
+
+[hidden] {
+    display: none;
+}
+
+
+/* =============================================================================
+   Base
+   ========================================================================== */
+
+/*
+ * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
+ *    http://clagnut.com/blog/348/#c790
+ * 2. Keeps page centred in all browsers regardless of content height
+ * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom
+ *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
+ */
+
+html {
+    font-size: 100%; /* 1 */
+    overflow-y: scroll; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 3 */
+    -ms-text-size-adjust: 100%; /* 3 */
+}
+
+/*
+ * Addresses margins handled incorrectly in IE6/7
+ */
+
+body {
+    margin: 0;
+}
+
+/* 
+ * Addresses font-family inconsistency between 'textarea' and other form elements.
+ */
+
+body,
+button,
+input,
+select,
+textarea {
+    font-family: sans-serif;
+}
+
+
+/* =============================================================================
+   Links
+   ========================================================================== */
+
+a {
+    color: #00e;
+}
+
+a:visited {
+    color: #551a8b;
+}
+
+/*
+ * Addresses outline displayed oddly in Chrome
+ */
+
+a:focus {
+    outline: 0;
+}
+
+/*
+ * Improves readability when focused and also mouse hovered in all browsers
+ * people.opera.com/patrickl/experiments/keyboard/test
+ */
+
+a:hover,
+a:active {
+    outline: 0;
+}
+
+
+/* =============================================================================
+   Typography
+   ========================================================================== */
+
+/*
+ * Addresses styling not present in IE7/8/9, S5, Chrome
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/*
+ * Addresses style set to 'bolder' in FF3/4, S4/5, Chrome
+*/
+
+b, 
+strong { 
+    font-weight: bold; 
+}
+
+blockquote {
+    margin: 1em 40px;
+}
+
+/*
+ * Addresses styling not present in S5, Chrome
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/*
+ * Addresses styling not present in IE6/7/8/9
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/*
+ * Corrects font family set oddly in IE6, S4/5, Chrome
+ * en.wikipedia.org/wiki/User:Davidgothberg/Test59
+ */
+
+pre,
+code,
+kbd,
+samp {
+    font-family: monospace, serif;
+    _font-family: 'courier new', monospace;
+    font-size: 1em;
+}
+
+/*
+ * Improves readability of pre-formatted text in all browsers
+ */
+
+pre {
+    white-space: pre;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+/*
+ * 1. Addresses CSS quotes not supported in IE6/7
+ * 2. Addresses quote property not supported in S4
+ */
+
+/* 1 */
+
+q {
+    quotes: none;
+}
+
+/* 2 */
+
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+small {
+    font-size: 75%;
+}
+
+/*
+ * Prevents sub and sup affecting line-height in all browsers
+ * gist.github.com/413930
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+
+/* =============================================================================
+   Lists
+   ========================================================================== */
+
+ul,
+ol {
+    margin: 1em 0;
+    padding: 0 0 0 40px;
+}
+
+dd {
+    margin: 0 0 0 40px;
+}
+
+nav ul,
+nav ol {
+    list-style: none;
+    list-style-image: none;
+}
+
+
+/* =============================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * 1. Removes border when inside 'a' element in IE6/7/8/9, F3
+ * 2. Improves image quality when scaled in IE7
+ *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+ */
+
+img {
+    border: 0; /* 1 */
+    -ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/*
+ * Corrects overflow displayed oddly in IE9 
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+
+/* =============================================================================
+   Figures
+   ========================================================================== */
+
+/*
+ * Addresses margin not present in IE6/7/8/9, S5, O11
+ */
+
+figure {
+    margin: 0;
+}
+
+
+/* =============================================================================
+   Forms
+   ========================================================================== */
+
+/*
+ * Corrects margin displayed oddly in IE6/7
+ */
+
+form {
+    margin: 0;
+}
+
+/*
+ * Define consistent margin and padding
+ */
+
+fieldset {
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/*
+ * 1. Corrects color not being inherited in IE6/7/8/9
+ * 2. Corrects alignment displayed oddly in IE6/7
+ */
+
+legend {
+    border: 0; /* 1 */
+    *margin-left: -7px; /* 2 */
+}
+
+/*
+ * 1. Corrects font size not being inherited in all browsers
+ * 2. Addresses margins set differently in IE6/7, F3/4, S5, Chrome
+ * 3. Improves appearance and consistency in all browsers
+ */
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%; /* 1 */
+    margin: 0; /* 2 */
+    vertical-align: baseline; /* 3 */
+    *vertical-align: middle; /* 3 */
+}
+
+/*
+ * 1. Addresses FF3/4 setting line-height using !important in the UA stylesheet
+ * 2. Corrects inner spacing displayed oddly in IE6/7
+ */
+
+button,
+input {
+    line-height: normal; /* 1 */
+    *overflow: visible;  /* 2 */
+}
+
+/*
+ * Corrects overlap and whitespace issue for buttons and inputs in IE6/7
+ * Known issue: reintroduces inner spacing
+ */
+
+table button,
+table input {
+    *overflow: auto;
+}
+
+/*
+ * 1. Improves usability and consistency of cursor style between image-type 'input' and others
+ * 2. Corrects inability to style clickable 'input' types in iOS
+ */
+
+button,
+html input[type="button"], 
+input[type="reset"], 
+input[type="submit"] {
+    cursor: pointer; /* 1 */
+    -webkit-appearance: button; /* 2 */
+}
+
+/*
+ * 1. Addresses box sizing set to content-box in IE8/9
+ * 2. Addresses excess padding in IE8/9
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/*
+ * 1. Addresses appearance set to searchfield in S5, Chrome
+ * 2. Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof)
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/*
+ * Corrects inner padding displayed oddly in S5, Chrome on OSX
+ */
+
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/*
+ * Corrects inner padding and border displayed oddly in FF3/4
+ * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/*
+ * 1. Removes default vertical scrollbar in IE6/7/8/9
+ * 2. Improves readability and alignment in all browsers
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+
+/* =============================================================================
+   Tables
+   ========================================================================== */
+
+/* 
+ * Remove most spacing between table cells
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

html/js/thmbnlgllr/index.html

@@ -0,0 +1,76 @@
+<!doctype html>
+
+<html>
+
+<head>
+
+	<meta charset="utf-8">
+	
+	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	
+	<title>jQuery Responsive Thumbnail Gallery Plugin Demo</title>
+	
+	<meta name="title" content="jQuery Thumb Gallery Plugin Demo">
+	<meta name="description" content="jQuery Thumb Gallery Plugin Demo">
+	
+	<meta name="author" content="John Polacek">
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+	<meta http-equiv="cleartype" content="on">
+	
+	<link rel="shortcut icon" href="_/img/favicon.ico">
+	<link rel="stylesheet" href="_/css/normalize.css">
+	<link rel="stylesheet" href="_/css/main.css">
+	
+	<script src="_/js/modernizr-2.0.6.min.js"></script>
+
+</head>
+
+<body>
+
+	<div id="wrapper">
+	
+		<header>
+			<h1>jQuery Responsive Thumbnail Gallery</h1>
+		</header>
+		
+		<article>
+			
+			<div id="gallery">
+				<p>Put your alt no-js content here.</p>
+			</div>
+			<p class="credit">
+				Photos by <a href="http://photos.theshotwellcollection.com">Andrew Schmidt</a> via
+				<a href="http://www.publicdomainpictures.net/browse-author.php?a=1081">publicdomainpictures.net</a>
+			</p>
+			
+		</article>
+		
+		<footer>
+			
+			<p>jQuery Responsive Thumbnail Gallery Plugin created by John Polacek</p>
+			<p>
+				<a href="https://johnpolacek.github.com">johnpolacek.github.com</a>
+				<a href="http://johnpolacek.com">johnpolacek.com</a>
+				<a href="http://twitter.com/johnpolacek">@johnpolacek</a>
+			</p>
+			
+		</footer>
+	
+	</div>
+	
+	<!-- JavaScript -->
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
+	<script>window.jQuery || document.write("<script src='_/js/jquery.min.js'>\x3C/script>")</script>
+	<script src="_/js/responsivethumbnailgallery.js"></script>
+	<script>
+		$(document).ready(function() {
+			
+			var gallery = new $.ThumbnailGallery($('#gallery'));
+			
+		});
+	</script>
+	
+</body>
+</html>

html/js/thmbnlgllr/js/responsivethumbnailgallery.js

@@ -0,0 +1,220 @@
+/*
+	jQuery Responsive Thumbnail Gallery Plugin
+	by John Polacek (@johnpolacek)
+	
+	Docs: http://johnpolacek.github.com/ResponsiveThumbnailGallery/
+	
+	License: http://www.opensource.org/licenses/mit-license.php
+*/
+
+(function($) {
+
+    $.ThumbnailGallery = function(el, options) {
+        
+        var isUnderBreakpoint,
+            currImageNumber,
+            imagesPath,
+            imageWidth,
+            imageHeight,
+            thumbWidth,
+            thumbHeight,
+            gallery,
+            view,
+            mainImage,
+            nav,
+            thumbnails,
+            buttons;
+            
+        var defaults = {
+            thumbImages: '_/img/thumbs/thumb',
+            smallImages: '_/img/small/image',
+            largeImages: '_/img/large/image',
+            count: 10,
+            thumbImageType: 'jpg',
+            breakpoint: 600,
+            imageType: 'jpg',
+            shadowStrength: 1
+        }
+        
+        var plugin = this;
+        plugin.settings = {}
+        
+        var init = function() {
+            plugin.settings = $.extend({}, defaults, options);
+            this.el = el;
+            
+            gallery = $(el).empty();
+            
+            view = $('<div id="gallery-view"></div>');
+            view.css('margin','0 auto -1px');
+            
+            nav = $('<div id="gallery-nav"></div>');
+            nav
+                .css('margin','0 auto')
+                .css('position','relative')
+                .css('background-color','#222');
+            
+            thumbnails = $('<div id="nav-thumbnails"></div>');
+            buttons = $('<div id="nav-buttons"></div>');
+            buttons
+                .css('position','absolute')
+                .css('top','0');
+            
+            gallery.append(view, nav);
+            nav.append(thumbnails, buttons);
+            
+            isUnderBreakpoint = $(window).width() < plugin.settings.breakpoint;
+            imagesPath = isUnderBreakpoint ?
+                plugin.settings.smallImages : plugin.settings.largeImages;
+                
+            updateMainImage(1);
+            
+            for (var i=0; i<plugin.settings.count; i++) {
+                
+                var button = $('<a href="#" class="gallery-button"></a>');
+                button
+                    .css('display','block')
+                    .css('float','left');
+                
+                var thumbImage = $('<img class="thumbnail-image" src="'+(plugin.settings.thumbImages)+(i+1)+'.'+plugin.settings.thumbImageType+'" />');
+                thumbImage
+                    .css('display','block')
+                    .css('float','left');
+                
+                if (i===0) {
+                    thumbImage.load(function() {
+                        thumbWidth = this.width;
+                        thumbHeight = this.height;
+                        $('.gallery-button')
+                            .css('width',this.width)
+                            .css('height',this.height);
+                        nav.css('height',thumbHeight);
+                        thumbnails.css('height',thumbHeight);
+                        updateSize();
+                    });
+                } else {
+                    button
+                        .css('box-shadow','0px 4px 8px rgba(0,0,0,'+ plugin.settings.shadowStrength +') inset')
+                        .css('background-color','rgba(0,0,0,'+ plugin.settings.shadowStrength/2 +')');
+                }
+                
+                thumbnails.append(thumbImage);
+                buttons.append(button);
+            }           
+              
+            buttons.delegate('.gallery-button', 'click', function(e){
+                e.preventDefault();
+                $('.gallery-button')
+                    .css('box-shadow','0px 4px 8px rgba(0,0,0,'+ plugin.settings.shadowStrength +') inset')
+                    .css('background-color','rgba(0,0,0,'+ plugin.settings.shadowStrength/2 +')');
+                $(this)
+                    .css('box-shadow','none')
+                    .css('background','none');
+                
+                updateMainImage($(this).index()+1);
+            });
+            
+            $(window).resize(function(e) {
+                updateSize();
+            });
+        }
+        
+        function updateMainImage(imageNumber) {
+            currImageNumber = imageNumber;
+            mainImage = $('<img src="'+imagesPath+imageNumber+'.'+plugin.settings.imageType+'" id="main-image" />');
+            mainImage.load(function() {
+                view.empty().append(mainImage);
+                updateSize();
+            });
+            $("<img/>") // Make in memory copy of image to avoid css issues
+                .attr("src", $(mainImage).attr("src"))
+                .load(function() {
+                    imageWidth = this.width;
+                    imageHeight = this.height;
+                });
+            
+        }
+        
+        function updateSize() {
+            if (thumbWidth && imageWidth) {
+                var galleryWidth = gallery.width();
+                
+                // check breakpoint
+                if (isUnderBreakpoint != $(window).width() < plugin.settings.breakpoint) {
+                    // update main image
+                    isUnderBreakpoint = $(window).width() < plugin.settings.breakpoint;
+                    imagesPath = isUnderBreakpoint ?
+                        plugin.settings.smallImages : plugin.settings.largeImages;
+                    updateMainImage(currImageNumber);
+                }
+                
+                // set main image size
+                if (galleryWidth < imageWidth) {
+                    mainImage
+                        .css('width', galleryWidth)
+                        .css('height','');
+                } else {
+                    galleryWidth = imageWidth;
+                    mainImage
+                        .css('width',imageWidth)
+                        .css('height','');
+                }
+                
+                // calculate number of rows
+                var numThumbs = plugin.settings.count;
+                var thumbSize = galleryWidth / numThumbs;
+                var numRows = 1;
+                var thumbScale = thumbSize / thumbWidth;
+                var imageScale = galleryWidth / imageWidth;
+                
+                // if thumb is below scale threshold, add new row
+                while (thumbScale < .5) {
+                    numRows++;
+                    thumbSize = (galleryWidth * numRows) / numThumbs;
+                    thumbScale = thumbSize / thumbWidth;
+                }
+                
+                // set thumbnail sizes
+                var thumbsRemainder = numThumbs;        // tracks thumbs left to scale
+                var thumbIndex = 0;                   // tracks thumb index to be scaled
+                for (var i=0; i<numRows; i++) {
+                    
+                    var numThumbsInRow = Math.ceil(thumbsRemainder / (numRows-i));
+                    // scale thumbs in row
+                    for (var j=0; j<numThumbsInRow; j++) {
+                        thumbScale = (galleryWidth / numThumbsInRow) / thumbWidth;
+                        var newWidth = thumbWidth * thumbScale;
+                        var newHeight = thumbHeight * thumbScale;
+                        $('.thumbnail-image:eq('+thumbIndex+')')
+                            .css('width',newWidth)
+                            .css('height',newHeight);
+                        $('.thumbnail-image:eq('+thumbIndex+') img')
+                            .css('width',newWidth)
+                            .css('height',newHeight);
+                        $('.gallery-button:eq('+thumbIndex+')')
+                            .css('width',newWidth)
+                            .css('height',newHeight);
+                        $('.gallery-button:eq('+thumbIndex+') img')
+                            .css('width',newWidth)
+                            .css('height',newHeight);
+                        thumbIndex++;
+                    }
+                    thumbsRemainder -= numThumbsInRow;
+                }
+                
+            }
+            
+            // update view size
+            view.width(galleryWidth);
+            view.height(mainImage.height());
+            
+            // update nav size
+            nav.width(galleryWidth);
+            nav.height(thumbHeight * thumbScale * numRows);            
+        }
+
+        init();
+
+    }
+
+})(jQuery);