Create gh-pages branch via GitHub

phlipper · Jul 3, 2012 · de4698e · de4698e
commit de4698e
Show file tree

Hide file tree

Showing 31 changed files with 2,990 additions and 0 deletions.
diff --git a/fonts/copse-regular-webfont.eot b/fonts/copse-regular-webfont.eot
diff --git a/fonts/copse-regular-webfont.svg b/fonts/copse-regular-webfont.svg
diff --git a/fonts/copse-regular-webfont.ttf b/fonts/copse-regular-webfont.ttf
diff --git a/fonts/copse-regular-webfont.woff b/fonts/copse-regular-webfont.woff
diff --git a/fonts/quattrocentosans-bold-webfont.eot b/fonts/quattrocentosans-bold-webfont.eot
diff --git a/fonts/quattrocentosans-bold-webfont.svg b/fonts/quattrocentosans-bold-webfont.svg
diff --git a/fonts/quattrocentosans-bold-webfont.ttf b/fonts/quattrocentosans-bold-webfont.ttf
diff --git a/fonts/quattrocentosans-bold-webfont.woff b/fonts/quattrocentosans-bold-webfont.woff
diff --git a/fonts/quattrocentosans-bolditalic-webfont.eot b/fonts/quattrocentosans-bolditalic-webfont.eot
diff --git a/fonts/quattrocentosans-bolditalic-webfont.svg b/fonts/quattrocentosans-bolditalic-webfont.svg
diff --git a/fonts/quattrocentosans-bolditalic-webfont.ttf b/fonts/quattrocentosans-bolditalic-webfont.ttf
diff --git a/fonts/quattrocentosans-bolditalic-webfont.woff b/fonts/quattrocentosans-bolditalic-webfont.woff
diff --git a/fonts/quattrocentosans-italic-webfont.eot b/fonts/quattrocentosans-italic-webfont.eot
diff --git a/fonts/quattrocentosans-italic-webfont.svg b/fonts/quattrocentosans-italic-webfont.svg
diff --git a/fonts/quattrocentosans-italic-webfont.ttf b/fonts/quattrocentosans-italic-webfont.ttf
diff --git a/fonts/quattrocentosans-italic-webfont.woff b/fonts/quattrocentosans-italic-webfont.woff
diff --git a/fonts/quattrocentosans-regular-webfont.eot b/fonts/quattrocentosans-regular-webfont.eot
diff --git a/fonts/quattrocentosans-regular-webfont.svg b/fonts/quattrocentosans-regular-webfont.svg
diff --git a/fonts/quattrocentosans-regular-webfont.ttf b/fonts/quattrocentosans-regular-webfont.ttf
diff --git a/fonts/quattrocentosans-regular-webfont.woff b/fonts/quattrocentosans-regular-webfont.woff
diff --git a/images/background.png b/images/background.png
diff --git a/images/body-background.png b/images/body-background.png
diff --git a/images/bullet.png b/images/bullet.png
diff --git a/images/hr.gif b/images/hr.gif
diff --git a/images/octocat-logo.png b/images/octocat-logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,161 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <title>fancy-photoset by phlipper</title>
+    <link rel="stylesheet" href="stylesheets/styles.css">
+    <link rel="stylesheet" href="stylesheets/pygment_trac.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <script src="javascripts/main.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+
+  </head>
+  <body>
+
+      <header>
+        <h1>fancy-photoset</h1>
+        <p>A jQuery plugin for viewing Flickr Photostreams in a Fancybox gallery</p>
+      </header>
+
+      <div id="banner">
+        <span id="logo"></span>
+
+        <a href="https://github.com/phlipper/fancy-photoset" class="button fork"><strong>View On GitHub</strong></a>
+        <div class="downloads">
+          <span>Downloads:</span>
+          <ul>
+            <li><a href="https://github.com/phlipper/fancy-photoset/zipball/master" class="button">ZIP</a></li>
+            <li><a href="https://github.com/phlipper/fancy-photoset/tarball/master" class="button">TAR</a></li>
+          </ul>
+        </div>
+      </div><!-- end banner -->
+
+    <div class="wrapper">
+      <nav>
+        <ul></ul>
+      </nav>
+      <section>
+        <h1>Fancy Photoset</h1>
+
+<p>The Fancy Photoset plugin utilizes the power of <a href="http://jquery.com">jQuery</a> and <a href="http://fancybox.net">Fancybox</a> to dynamically create photo galleries from your <a href="http://flickr.com">Flickr</a> Photosets.</p>
+
+<h2>Requirements</h2>
+
+<p>This plugin requires the latest version of the  <a href="http://jquery.com">jQuery</a> library. It has been tested on 1.4.2 but should work on 1.3.2+.</p>
+
+<p>This plugin depends on the <a href="http://fancybox.net">Fancybox</a> plugin. It has been tested on version 1.3.1.</p>
+
+<p>You will also need a <a href="http://flickr.com">Flickr</a> account and a Flickr <a href="http://www.flickr.com/services/api/misc.api_keys.html">API Key</a> to use this plugin.</p>
+
+<h2>Usage</h2>
+
+<p>The <code>fancyPhotoset</code> method is called on a jQuery selector and takes an options hash as the only argument. A Flickr API Key and Photoset ID are the only required options.</p>
+
+<p>Typical usage:</p>
+
+<div class="highlight">
+<pre><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"gallery"</span><span class="nt">&gt;&lt;/div&gt;</span>
+
+<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">&gt;</span>
+<span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+  <span class="c1">// create a gallery with the default options</span>
+  <span class="nx">$</span><span class="p">(</span><span class="s1">'#gallery'</span><span class="p">).</span><span class="nx">fancyPhotoset</span><span class="p">({</span><span class="nx">apiKey</span><span class="o">:</span> <span class="s1">'xxx'</span><span class="p">,</span> <span class="nx">photosetId</span><span class="o">:</span> <span class="s1">'xxx'</span><span class="p">});</span>
+<span class="p">});</span>
+<span class="nt">&lt;/script&gt;</span>
+</pre>
+</div>
+
+
+<p>The plugin supports multiple photoset galleries per page:</p>
+
+<div class="highlight">
+<pre><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"gallery1"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"gallery2"</span><span class="nt">&gt;&lt;/div&gt;</span>
+
+<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">&gt;</span>
+<span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+  <span class="c1">// create a gallery with custom options</span>
+  <span class="kd">var</span> <span class="nx">options1</span> <span class="o">=</span> <span class="p">{</span>
+    <span class="nx">apiKey</span><span class="o">:</span> <span class="s1">'xxx'</span><span class="p">,</span>
+    <span class="nx">photosetId</span><span class="o">:</span> <span class="s1">'xxx'</span><span class="p">,</span>
+    <span class="nx">captions</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
+    <span class="nx">small</span><span class="o">:</span> <span class="s1">'thumbnail'</span><span class="p">,</span>
+    <span class="nx">large</span><span class="o">:</span> <span class="s1">'medium'</span>
+  <span class="p">};</span>
+
+  <span class="kd">var</span> <span class="nx">options2</span> <span class="o">=</span> <span class="p">{</span>
+    <span class="nx">apiKey</span><span class="o">:</span> <span class="s1">'xxx'</span><span class="p">,</span>
+    <span class="nx">photosetId</span><span class="o">:</span> <span class="s1">'yyy'</span><span class="p">,</span>
+    <span class="nx">captions</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
+    <span class="nx">small</span><span class="o">:</span> <span class="s1">'square'</span><span class="p">,</span>
+    <span class="nx">large</span><span class="o">:</span> <span class="s1">'original'</span>
+  <span class="p">};</span>
+
+  <span class="nx">$</span><span class="p">(</span><span class="s1">'#gallery1'</span><span class="p">).</span><span class="nx">fancyPhotoset</span><span class="p">(</span><span class="nx">options1</span><span class="p">);</span>
+
+  <span class="nx">$</span><span class="p">(</span><span class="s1">'#gallery2'</span><span class="p">).</span><span class="nx">fancyPhotoset</span><span class="p">(</span><span class="nx">options2</span><span class="p">);</span>
+<span class="p">});</span>
+<span class="nt">&lt;/script&gt;</span>
+</pre>
+</div>
+
+
+<h3>Options</h3>
+
+<ul>
+<li>
+<code>apiKey</code> - Your Flickr API Key.</li>
+<li>
+<code>photosetId</code> - The ID of the photoset you want to load.</li>
+<li>
+<code>small</code> - The smaller thumbnail version of the image to show. This corresponds to one of the following Flickr sizes: square, thumbnail, small, medium and original.</li>
+<li>
+<code>large</code> - The larger version of the image link to and display in the Fancybox. This corresponds to one of the following Flickr sizes: square, thumbnail, small, medium and original.</li>
+<li>
+<code>captions</code> - true or false: This will create a  with the photo title if set to true.</li>
+<li>
+<code>firstOnly</code> - true or false: Setting true will only display the first image in the photoset on the webpage. All images will still be available to the Fancybox gallery.</li>
+<li>
+<code>fancybox</code> - These are standard <a href="http://fancybox.net/api">Fancybox options</a> that get passed through to the <code>fancybox</code> method.</li>
+</ul><h2>Demo</h2>
+
+<p>See the demo.html file in the demo folder for an example of how to use the script. All you will need to run the demo is your API Key and a Photoset ID.</p>
+
+<h2>Version</h2>
+
+<p>The current version is 0.5.0</p>
+
+<h2>TODO</h2>
+
+<ul>
+<li>Support additional gallery libraries such as <a href="http://nivo.dev7studios.com">Nivo Slider</a> and <a href="http://galleria.aino.se/">Galleria</a>
+</li>
+</ul><h2>License</h2>
+
+<p>The Fancy Photoset plugin is licensed under the MIT (MIT_LICENSE.txt) license.</p>
+
+<p>Copyright (c) 2010-2011 <a href="http://phlippers.net">Phil Cohen</a></p>
+      </section>
+      <footer>
+        <p>Project maintained by <a href="https://github.com/phlipper">phlipper</a></p>
+        <p><small>Hosted on GitHub Pages &mdash; Theme by <a href="http://twitter.com/#!/michigangraham">mattgraham</a></small></p>
+      </footer>
+    </div>
+    <!--[if !IE]><script>fixScale(document);</script><!--<![endif]-->
+              <script type="text/javascript">
+            var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+            document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+          </script>
+          <script type="text/javascript">
+            try {
+              var pageTracker = _gat._getTracker("UA-10172882-2");
+            pageTracker._trackPageview();
+            } catch(err) {}
+          </script>
+
+  </body>
+</html>
diff --git a/javascripts/main.js b/javascripts/main.js
@@ -0,0 +1,53 @@
+var sectionHeight = function() {
+  var total    = $(window).height(),
+      $section = $('section').css('height','auto');
+
+  if ($section.outerHeight(true) < total) {
+    var margin = $section.outerHeight(true) - $section.height();
+    $section.height(total - margin - 20);
+  } else {
+    $section.css('height','auto');
+  }
+}
+
+$(window).resize(sectionHeight);
+
+$(document).ready(function(){
+  $("section h1, section h2").each(function(){
+    $("nav ul").append("<li class='tag-" + this.nodeName.toLowerCase() + "'><a href='#" + $(this).text().toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g,'') + "'>" + $(this).text() + "</a></li>");
+    $(this).attr("id",$(this).text().toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g,''));
+    $("nav ul li:first-child a").parent().addClass("active");
+  });
+
+  $("nav ul li").on("click", "a", function(event) {
+    var position = $($(this).attr("href")).offset().top - 190;
+    $("html, body").animate({scrollTop: position}, 400);
+    $("nav ul li a").parent().removeClass("active");
+    $(this).parent().addClass("active");
+    event.preventDefault();    
+  });
+
+  sectionHeight();
+
+  $('img').load(sectionHeight);
+});
+
+fixScale = function(doc) {
+
+  var addEvent = 'addEventListener',
+      type = 'gesturestart',
+      qsa = 'querySelectorAll',
+      scales = [1, 1],
+      meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];
+
+  function fix() {
+    meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
+    doc.removeEventListener(type, fix, true);
+  }
+
+  if ((meta = meta[meta.length - 1]) && addEvent in doc) {
+    fix();
+    scales = [.25, 1.6];
+    doc[addEvent](type, fix, true);
+  }
+};
diff --git a/params.json b/params.json
@@ -0,0 +1 @@
+{"name":"fancy-photoset","body":"# Fancy Photoset\r\n\r\nThe Fancy Photoset plugin utilizes the power of [jQuery](http://jquery.com) and [Fancybox](http://fancybox.net) to dynamically create photo galleries from your [Flickr](http://flickr.com) Photosets.\r\n\r\n\r\n## Requirements\r\n\r\nThis plugin requires the latest version of the  [jQuery](http://jquery.com) library. It has been tested on 1.4.2 but should work on 1.3.2+.\r\n\r\nThis plugin depends on the [Fancybox](http://fancybox.net) plugin. It has been tested on version 1.3.1.\r\n\r\nYou will also need a [Flickr](http://flickr.com) account and a Flickr [API Key](http://www.flickr.com/services/api/misc.api_keys.html) to use this plugin.\r\n\r\n## Usage\r\n\r\nThe `fancyPhotoset` method is called on a jQuery selector and takes an options hash as the only argument. A Flickr API Key and Photoset ID are the only required options.\r\n\r\nTypical usage:\r\n\r\n``` html\r\n<div id=\"gallery\"></div>\r\n\r\n<script type=\"text/javascript\" charset=\"utf-8\">\r\n$(function() {\r\n  // create a gallery with the default options\r\n  $('#gallery').fancyPhotoset({apiKey: 'xxx', photosetId: 'xxx'});\r\n});\r\n</script>\r\n```\r\n\r\nThe plugin supports multiple photoset galleries per page:\r\n\r\n``` html\r\n<div id=\"gallery1\"></div>\r\n<div id=\"gallery2\"></div>\r\n\r\n<script type=\"text/javascript\" charset=\"utf-8\">\r\n$(function() {\r\n  // create a gallery with custom options\r\n  var options1 = {\r\n    apiKey: 'xxx',\r\n    photosetId: 'xxx',\r\n    captions: true,\r\n    small: 'thumbnail',\r\n    large: 'medium'\r\n  };\r\n\r\n  var options2 = {\r\n    apiKey: 'xxx',\r\n    photosetId: 'yyy',\r\n    captions: false,\r\n    small: 'square',\r\n    large: 'original'\r\n  };\r\n\r\n  $('#gallery1').fancyPhotoset(options1);\r\n\r\n  $('#gallery2').fancyPhotoset(options2);\r\n});\r\n</script>\r\n```\r\n\r\n### Options\r\n\r\n* `apiKey` - Your Flickr API Key.\r\n* `photosetId` - The ID of the photoset you want to load.\r\n* `small` - The smaller thumbnail version of the image to show. This corresponds to one of the following Flickr sizes: square, thumbnail, small, medium and original.\r\n* `large` - The larger version of the image link to and display in the Fancybox. This corresponds to one of the following Flickr sizes: square, thumbnail, small, medium and original.\r\n* `captions` - true or false: This will create a <span class=\"caption\"> with the photo title if set to true.\r\n* `firstOnly` - true or false: Setting true will only display the first image in the photoset on the webpage. All images will still be available to the Fancybox gallery.\r\n* `fancybox` - These are standard [Fancybox options](http://fancybox.net/api) that get passed through to the `fancybox` method.\r\n\r\n## Demo\r\n\r\nSee the demo.html file in the demo folder for an example of how to use the script. All you will need to run the demo is your API Key and a Photoset ID.\r\n\r\n## Version\r\n\r\nThe current version is 0.5.0\r\n\r\n## TODO\r\n\r\n* Support additional gallery libraries such as [Nivo Slider](http://nivo.dev7studios.com) and [Galleria](http://galleria.aino.se/)\r\n\r\n## License\r\n\r\nThe Fancy Photoset plugin is licensed under the MIT (MIT\\_LICENSE.txt) license.\r\n\r\nCopyright (c) 2010-2011 [Phil Cohen](http://phlippers.net)","note":"Don't delete this file! It's used internally to help with page regeneration.","tagline":"A jQuery plugin for viewing Flickr Photostreams in a Fancybox gallery","google":"UA-10172882-2"}