Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Created gh-pages branch via GitHub

  • Loading branch information...
commit 1af3e916c7d4f14ed9277efdf1894d1143e5c62a 0 parents
@SamWhited authored
149 index.html
@@ -0,0 +1,149 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="chrome=1">
+ <title>PhotoJS by SamWhited</title>
+
+ <link rel="stylesheet" href="stylesheets/styles.css">
+ <link rel="stylesheet" href="stylesheets/pygment_trac.css">
+ <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+ <!--[if lt IE 9]>
+ <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+ </head>
+ <body>
+ <div class="wrapper">
+ <header>
+ <h1>PhotoJS</h1>
+ <p>A photo gallery plugin for jQuery</p>
+ <p class="view"><a href="https://github.com/SamWhited/photoJS">View the Project on GitHub <small>SamWhited/photoJS</small></a></p>
+ <ul>
+ <li><a href="https://github.com/SamWhited/photoJS/zipball/master">Download <strong>ZIP File</strong></a></li>
+ <li><a href="https://github.com/SamWhited/photoJS/tarball/master">Download <strong>TAR Ball</strong></a></li>
+ <li><a href="https://github.com/SamWhited/photoJS">Fork On <strong>GitHub</strong></a></li>
+ </ul>
+ </header>
+ <section>
+ <h1>photoJS</h1>
+
+<p>"<strong>photoJS</strong>" (<strong>pJS</strong> for short) is a lightweight jQuery plugin written in <a href="http://jashkenas.github.com/coffee-script/">CoffeeScript</a> for creating nice image galleries.
+It can load user supplied images, or from the <a href="https://code.google.com/apis/picasaweb/overview.html">Picasa Web Albums Data API</a>.</p>
+
+<p>Unlike many image gallery plugins, photoJS is very minimal. It simply downloads your images, and displays them in a grid.
+After that, it is up to you to use another plugin such as <a href="http://leandrovieira.com/projects/jquery/lightbox/">jQuery lightBox</a>
+or something from <a href="http://jqueryui.com/">jQuery UI</a> to style, provide transitions, etc.</p>
+
+<p>To see a live demo of photoJS, check out the site it was built for, <a href="https://samwhited.com/photography/">SamWhited.com</a>.</p>
+
+<h2>Building pJS</h2>
+
+<p>The build system for photoJS uses <a href="http://jashkenas.github.com/coffee-script/documentation/docs/cake.html">Cake</a>.</p>
+
+<p>To see a list of options simply run <code>cake</code> and it will spit out the options and commands like so:</p>
+
+<pre><code>cake build # Build photoJS
+
+ -c, --component Sets the component to be built to one of: album
+ -l, --lint If JavaScript Lint is installed, use it to check the output.
+ -n, --nodes Instead of compiling pJS, just lex and parse it, and print out the parse tree.
+ -o, --output Set the output directory (defaults to "lib").
+ -p, --print Print the output directly to stdout.
+ -s, --wrapper Compile the library inside of a top-level lexical scope safety wrapper.
+ -t, --tokens Instead of compiling pJS, just lex it, and print out the token stream.
+ -w, --watch Watch the files and rebuild them when they change.
+</code></pre>
+
+<p>To build all of photoJS, simply run <code>cake build</code>.</p>
+
+<h2>Using pJS</h2>
+
+<p>Using photoJS is as easy as calling <code>$( selector ).pJS()</code>. However, this won't do much (read, "anything").
+To make photoJS really shine, we need to include some settings.</p>
+
+<p>Let's assume we have a div on our page that we want to contain a gallery:</p>
+
+<pre><code>&lt;div id="portfolio"&gt;&lt;/div&gt;
+</code></pre>
+
+<p>To style it using photoJS we would include jQuery, then do something like this:</p>
+
+<pre><code>&lt;script type="text/javascript"&gt;
+$( function() {
+ $( '#portfolio' ).pJS({
+ 'api': 'picasa',
+ 'columns': 4,
+ 'id': '5629373182085820817',
+ 'user': 'samwhitedphotography'
+ });
+});
+&lt;/script&gt;
+</code></pre>
+
+<p>or, in CoffeeScript:</p>
+
+<pre><code>$ -&gt;
+ $( '#portfolio' ).pJS
+ api: 'picasa'
+ columns: 4
+ id: '5629373182085820817'
+ user: 'samwhitedphotography'
+</code></pre>
+
+<p>Nice and easy -- but that's not all photoJS can do.</p>
+
+<h2>Settings</h2>
+
+<p>There are a lot of different ways you can configure photoJS, below is the default settings object, and some explanation where necessary:</p>
+
+<pre><code>settings =
+ api: 'none' // Only supports 'picasa' or 'none' right now
+ preload: 'thumbs' // 'thumbs,' 'images,' 'all,' or 'none.' Loads asynchronously.
+ columns: 4 // Integer, or 'auto' to calculate based on number of photos
+ id: '' // The id of the album to download (if api is not 'none')
+ user: '' // The username to feed the API (if api is not 'none')
+ imgmax: '512' // The longest edge length of the image to download
+ thumbmax: '104' // The longest edge of the thumbnail image
+ cropped: true // True if the thumbnail should be cropped to a square (Picasa Web Albums only)
+ images: [] // An array of image objects or src strings (not recommended).
+ thumbnails: [] // An array of paths to thumbnails (not recommended).
+ // If used, the 0th thumbnail maps to the first image that is a string,
+ // even if it is not the 0th element.
+ format:
+ colSpace: '0.5em' // The space between columns
+ rowSpace: '0.5em' // The space between rows
+ rowClass: '' // A list of classes to add to the row divs
+ imgClass: '' // A list of classes to add to the img tags
+ aClass: '' // A list of classes to add to the anchors
+ load: '' // A callback to be called when all preloaded images are done loading
+ complete: complete // A callback function to be called after the DOM is ready
+ // By default, it is set to the second argument passed to the
+ // function call. The settings object takes priority.
+</code></pre>
+
+<h2>Plugins</h2>
+
+<p>PhotoJS can be easily extended to support other photo sharing services, or to add functionality.
+To write a plugin, simply extend the <code>methods</code> object.</p>
+
+<p>For instance:</p>
+
+<pre><code>$.extend (pjs.methods ?= {}), flickr: ( cb ) -&gt;
+</code></pre>
+
+<p>or</p>
+
+<pre><code>$.extend((pjs.methods != null ? pjs.methods : pjs.methods = {}), {
+ flickr: function(cb) {}
+});
+</code></pre>
+ </section>
+ <footer>
+ <p>This project is maintained by <a href="https://github.com/SamWhited">SamWhited</a></p>
+ <p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
+ </footer>
+ </div>
+ <script src="javascripts/scale.fix.js"></script>
+
+ </body>
+</html>
17 javascripts/scale.fix.js
@@ -0,0 +1,17 @@
+var metas = document.getElementsByTagName('meta');
+var i;
+if (navigator.userAgent.match(/iPhone/i)) {
+ for (i=0; i<metas.length; i++) {
+ if (metas[i].name == "viewport") {
+ metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
+ }
+ }
+ document.addEventListener("gesturestart", gestureStart, false);
+}
+function gestureStart() {
+ for (i=0; i<metas.length; i++) {
+ if (metas[i].name == "viewport") {
+ metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
+ }
+ }
+}
1  params.json
@@ -0,0 +1 @@
+{"name":"PhotoJS","body":"# photoJS\r\n\"**photoJS**\" (**pJS** for short) is a lightweight jQuery plugin written in [CoffeeScript](http://jashkenas.github.com/coffee-script/) for creating nice image galleries.\r\nIt can load user supplied images, or from the [Picasa Web Albums Data API](https://code.google.com/apis/picasaweb/overview.html).\r\n\r\nUnlike many image gallery plugins, photoJS is very minimal. It simply downloads your images, and displays them in a grid.\r\nAfter that, it is up to you to use another plugin such as [jQuery lightBox](http://leandrovieira.com/projects/jquery/lightbox/)\r\nor something from [jQuery UI](http://jqueryui.com/) to style, provide transitions, etc.\r\n\r\nTo see a live demo of photoJS, check out the site it was built for, [SamWhited.com](https://samwhited.com/photography/).\r\n\r\n## Building pJS\r\nThe build system for photoJS uses [Cake](http://jashkenas.github.com/coffee-script/documentation/docs/cake.html).\r\n\r\nTo see a list of options simply run `cake` and it will spit out the options and commands like so:\r\n\r\n\tcake build # Build photoJS\r\n\r\n\t -c, --component Sets the component to be built to one of: album\r\n\t -l, --lint If JavaScript Lint is installed, use it to check the output.\r\n\t -n, --nodes Instead of compiling pJS, just lex and parse it, and print out the parse tree.\r\n\t -o, --output Set the output directory (defaults to \"lib\").\r\n\t -p, --print Print the output directly to stdout.\r\n\t -s, --wrapper Compile the library inside of a top-level lexical scope safety wrapper.\r\n\t -t, --tokens Instead of compiling pJS, just lex it, and print out the token stream.\r\n\t -w, --watch Watch the files and rebuild them when they change.\r\n\r\nTo build all of photoJS, simply run `cake build`.\r\n\r\n## Using pJS\r\nUsing photoJS is as easy as calling `$( selector ).pJS()`. However, this won't do much (read, \"anything\").\r\nTo make photoJS really shine, we need to include some settings.\r\n\r\nLet's assume we have a div on our page that we want to contain a gallery:\r\n\r\n\t<div id=\"portfolio\"></div>\r\n\t\r\nTo style it using photoJS we would include jQuery, then do something like this:\r\n\r\n\t<script type=\"text/javascript\">\r\n\t$( function() {\r\n\t\t$( '#portfolio' ).pJS({\r\n\t\t\t'api': 'picasa',\r\n\t\t\t'columns': 4,\r\n\t\t\t'id': '5629373182085820817',\r\n\t\t\t'user': 'samwhitedphotography'\r\n\t\t});\r\n\t});\r\n\t</script>\r\n\t\r\nor, in CoffeeScript:\r\n\r\n\t$ ->\r\n\t\t$( '#portfolio' ).pJS\r\n\t\t\tapi: 'picasa'\r\n\t\t\tcolumns: 4\r\n\t\t\tid: '5629373182085820817'\r\n\t\t\tuser: 'samwhitedphotography'\r\n\r\nNice and easy -- but that's not all photoJS can do.\r\n\r\n## Settings\r\nThere are a lot of different ways you can configure photoJS, below is the default settings object, and some explanation where necessary:\r\n\r\n\tsettings =\r\n\t\tapi: 'none' \t\t\t// Only supports 'picasa' or 'none' right now\r\n\t\tpreload: 'thumbs'\t\t// 'thumbs,' 'images,' 'all,' or 'none.' Loads asynchronously.\r\n\t\tcolumns: 4\t\t\t\t// Integer, or 'auto' to calculate based on number of photos\r\n\t\tid: ''\t\t\t\t\t// The id of the album to download (if api is not 'none')\r\n\t\tuser: ''\t\t\t\t// The username to feed the API (if api is not 'none')\r\n\t\timgmax: '512'\t\t\t// The longest edge length of the image to download\r\n\t\tthumbmax: '104' \t\t// The longest edge of the thumbnail image\r\n\t\tcropped: true\t\t\t// True if the thumbnail should be cropped to a square (Picasa Web Albums only)\r\n\t\timages: []\t\t\t\t// An array of image objects or src strings (not recommended).\r\n\t\tthumbnails: []\t\t\t// An array of paths to thumbnails (not recommended).\r\n\t\t\t\t\t\t\t\t// If used, the 0th thumbnail maps to the first image that is a string,\r\n\t\t\t\t\t\t\t\t// even if it is not the 0th element.\r\n\t\tformat:\r\n\t\t\tcolSpace: '0.5em'\t// The space between columns\r\n\t\t\trowSpace: '0.5em'\t// The space between rows\r\n\t\t\trowClass: ''\t\t// A list of classes to add to the row divs\r\n\t\t\timgClass: ''\t\t// A list of classes to add to the img tags\r\n\t\t\taClass: ''\t\t\t// A list of classes to add to the anchors\r\n\t\tload: ''\t\t\t\t// A callback to be called when all preloaded images are done loading\r\n\t\tcomplete: complete\t\t// A callback function to be called after the DOM is ready\r\n\t\t\t\t\t\t\t\t// By default, it is set to the second argument passed to the\r\n\t\t\t\t\t\t\t\t// function call. The settings object takes priority.\r\n\r\n## Plugins\r\n\r\nPhotoJS can be easily extended to support other photo sharing services, or to add functionality.\r\nTo write a plugin, simply extend the `methods` object.\r\n\r\nFor instance:\r\n\r\n $.extend (pjs.methods ?= {}), flickr: ( cb ) ->\r\n \r\nor\r\n\r\n $.extend((pjs.methods != null ? pjs.methods : pjs.methods = {}), {\r\n flickr: function(cb) {}\r\n });\r\n","tagline":"A photo gallery plugin for jQuery","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}
69 stylesheets/pygment_trac.css
@@ -0,0 +1,69 @@
+.highlight { background: #ffffff; }
+.highlight .c { color: #999988; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .k { font-weight: bold } /* Keyword */
+.highlight .o { font-weight: bold } /* Operator */
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #999999 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold; } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { font-weight: bold } /* Keyword.Constant */
+.highlight .kd { font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .s { color: #d14 } /* Literal.String */
+.highlight .na { color: #008080 } /* Name.Attribute */
+.highlight .nb { color: #0086B3 } /* Name.Builtin */
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+.highlight .no { color: #008080 } /* Name.Constant */
+.highlight .ni { color: #800080 } /* Name.Entity */
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+.highlight .nn { color: #555555 } /* Name.Namespace */
+.highlight .nt { color: #000080 } /* Name.Tag */
+.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .ow { font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .sb { color: #d14 } /* Literal.String.Backtick */
+.highlight .sc { color: #d14 } /* Literal.String.Char */
+.highlight .sd { color: #d14 } /* Literal.String.Doc */
+.highlight .s2 { color: #d14 } /* Literal.String.Double */
+.highlight .se { color: #d14 } /* Literal.String.Escape */
+.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
+.highlight .si { color: #d14 } /* Literal.String.Interpol */
+.highlight .sx { color: #d14 } /* Literal.String.Other */
+.highlight .sr { color: #009926 } /* Literal.String.Regex */
+.highlight .s1 { color: #d14 } /* Literal.String.Single */
+.highlight .ss { color: #990073 } /* Literal.String.Symbol */
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
+
+.type-csharp .highlight .k { color: #0000FF }
+.type-csharp .highlight .kt { color: #0000FF }
+.type-csharp .highlight .nf { color: #000000; font-weight: normal }
+.type-csharp .highlight .nc { color: #2B91AF }
+.type-csharp .highlight .nn { color: #000000 }
+.type-csharp .highlight .s { color: #A31515 }
+.type-csharp .highlight .sc { color: #A31515 }
255 stylesheets/styles.css
@@ -0,0 +1,255 @@
+@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
+
+body {
+ padding:50px;
+ font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
+ color:#777;
+ font-weight:300;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ color:#222;
+ margin:0 0 20px;
+}
+
+p, ul, ol, table, pre, dl {
+ margin:0 0 20px;
+}
+
+h1, h2, h3 {
+ line-height:1.1;
+}
+
+h1 {
+ font-size:28px;
+}
+
+h2 {
+ color:#393939;
+}
+
+h3, h4, h5, h6 {
+ color:#494949;
+}
+
+a {
+ color:#39c;
+ font-weight:400;
+ text-decoration:none;
+}
+
+a small {
+ font-size:11px;
+ color:#777;
+ margin-top:-0.6em;
+ display:block;
+}
+
+.wrapper {
+ width:860px;
+ margin:0 auto;
+}
+
+blockquote {
+ border-left:1px solid #e5e5e5;
+ margin:0;
+ padding:0 0 0 20px;
+ font-style:italic;
+}
+
+code, pre {
+ font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
+ color:#333;
+ font-size:12px;
+}
+
+pre {
+ padding:8px 15px;
+ background: #f8f8f8;
+ border-radius:5px;
+ border:1px solid #e5e5e5;
+ overflow-x: auto;
+}
+
+table {
+ width:100%;
+ border-collapse:collapse;
+}
+
+th, td {
+ text-align:left;
+ padding:5px 10px;
+ border-bottom:1px solid #e5e5e5;
+}
+
+dt {
+ color:#444;
+ font-weight:700;
+}
+
+th {
+ color:#444;
+}
+
+img {
+ max-width:100%;
+}
+
+header {
+ width:270px;
+ float:left;
+ position:fixed;
+}
+
+header ul {
+ list-style:none;
+ height:40px;
+
+ padding:0;
+
+ background: #eee;
+ background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
+ background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
+ background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
+ background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
+ background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
+
+ border-radius:5px;
+ border:1px solid #d2d2d2;
+ box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
+ width:270px;
+}
+
+header li {
+ width:89px;
+ float:left;
+ border-right:1px solid #d2d2d2;
+ height:40px;
+}
+
+header ul a {
+ line-height:1;
+ font-size:11px;
+ color:#999;
+ display:block;
+ text-align:center;
+ padding-top:6px;
+ height:40px;
+}
+
+strong {
+ color:#222;
+ font-weight:700;
+}
+
+header ul li + li {
+ width:88px;
+ border-left:1px solid #fff;
+}
+
+header ul li + li + li {
+ border-right:none;
+ width:89px;
+}
+
+header ul a strong {
+ font-size:14px;
+ display:block;
+ color:#222;
+}
+
+section {
+ width:500px;
+ float:right;
+ padding-bottom:50px;
+}
+
+small {
+ font-size:11px;
+}
+
+hr {
+ border:0;
+ background:#e5e5e5;
+ height:1px;
+ margin:0 0 20px;
+}
+
+footer {
+ width:270px;
+ float:left;
+ position:fixed;
+ bottom:50px;
+}
+
+@media print, screen and (max-width: 960px) {
+
+ div.wrapper {
+ width:auto;
+ margin:0;
+ }
+
+ header, section, footer {
+ float:none;
+ position:static;
+ width:auto;
+ }
+
+ header {
+ padding-right:320px;
+ }
+
+ section {
+ border:1px solid #e5e5e5;
+ border-width:1px 0;
+ padding:20px 0;
+ margin:0 0 20px;
+ }
+
+ header a small {
+ display:inline;
+ }
+
+ header ul {
+ position:absolute;
+ right:50px;
+ top:52px;
+ }
+}
+
+@media print, screen and (max-width: 720px) {
+ body {
+ word-wrap:break-word;
+ }
+
+ header {
+ padding:0;
+ }
+
+ header ul, header p.view {
+ position:static;
+ }
+
+ pre, code {
+ word-wrap:normal;
+ }
+}
+
+@media print, screen and (max-width: 480px) {
+ body {
+ padding:15px;
+ }
+
+ header ul {
+ display:none;
+ }
+}
+
+@media print {
+ body {
+ padding:0.4in;
+ font-size:12pt;
+ color:#444;
+ }
+}
Please sign in to comment.
Something went wrong with that request. Please try again.