├── Makefile ├── lib ├── assets │ ├── index.jade │ ├── _config.json │ ├── default.jade │ ├── gallery.js │ └── screen.styl └── index.js ├── test ├── fixtures │ ├── index.jade │ ├── BuznQ.JPG │ ├── 21bqj4g.gif │ ├── bear_pepsi.png │ ├── 1222586637265.jpeg │ ├── 1224254684351.jpeg │ ├── 1253145892446.jpeg │ ├── 129067795048187761.jpeg │ ├── PirateDog-298x300.jpg │ ├── SHERLOCKCHANDLERMODEL.jpeg │ ├── 20110726-narpmkn94319a161keubi15yyu.png │ ├── _config.json │ ├── _layouts │ │ └── default.jade │ ├── javascripts │ │ └── gallery.js │ └── stylesheets │ │ └── screen.styl └── test.js ├── .gitignore ├── package.json └── README.md /Makefile: -------------------------------------------------------------------------------- 1 | test: 2 | @node test/*.js 3 | 4 | .PHONY: test 5 | -------------------------------------------------------------------------------- /lib/assets/index.jade: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 | !{gallery()} 6 | -------------------------------------------------------------------------------- /test/fixtures/index.jade: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 | !{gallery()} 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | _site 3 | .DS_Store 4 | tmp/* 5 | *.sw? 6 | lib-cov 7 | -------------------------------------------------------------------------------- /test/fixtures/BuznQ.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexyoung/pop-gallery/master/test/fixtures/BuznQ.JPG -------------------------------------------------------------------------------- /test/fixtures/21bqj4g.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexyoung/pop-gallery/master/test/fixtures/21bqj4g.gif -------------------------------------------------------------------------------- /test/fixtures/bear_pepsi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexyoung/pop-gallery/master/test/fixtures/bear_pepsi.png -------------------------------------------------------------------------------- /test/fixtures/1222586637265.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexyoung/pop-gallery/master/test/fixtures/1222586637265.jpeg -------------------------------------------------------------------------------- /test/fixtures/1224254684351.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexyoung/pop-gallery/master/test/fixtures/1224254684351.jpeg -------------------------------------------------------------------------------- /test/fixtures/1253145892446.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexyoung/pop-gallery/master/test/fixtures/1253145892446.jpeg -------------------------------------------------------------------------------- /test/fixtures/129067795048187761.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexyoung/pop-gallery/master/test/fixtures/129067795048187761.jpeg -------------------------------------------------------------------------------- /test/fixtures/PirateDog-298x300.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexyoung/pop-gallery/master/test/fixtures/PirateDog-298x300.jpg -------------------------------------------------------------------------------- /test/fixtures/SHERLOCKCHANDLERMODEL.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexyoung/pop-gallery/master/test/fixtures/SHERLOCKCHANDLERMODEL.jpeg -------------------------------------------------------------------------------- /test/fixtures/20110726-narpmkn94319a161keubi15yyu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexyoung/pop-gallery/master/test/fixtures/20110726-narpmkn94319a161keubi15yyu.png -------------------------------------------------------------------------------- /lib/assets/_config.json: -------------------------------------------------------------------------------- 1 | { "url": "" 2 | , "title": "Gallery" 3 | , "require": ["pop-gallery"] 4 | , "permalink": "/:year/:month/:day/:title" 5 | , "perPage": 12 } 6 | -------------------------------------------------------------------------------- /test/fixtures/_config.json: -------------------------------------------------------------------------------- 1 | { "url": "" 2 | , "title": "Gallery" 3 | , "require": ["pop-gallery"] 4 | , "permalink": "/:year/:month/:day/:title" 5 | , "perPage": 12 } 6 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | var assert = require('assert') 2 | , gallery = require(__dirname + '/../lib/index') 3 | , result = gallery.helpers.gallery.apply({ root: __dirname + '/fixtures/' }); 4 | 5 | // Make sure it actually finds the files 6 | assert.ok(result.match('div id="gallery"')); 7 | assert.ok(result.match('bear_pepsi\.png')); 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { "name": "pop-gallery" 2 | , "description": "Provides helpers and a generator that can be used to build galleries." 3 | , "version": "0.1.1" 4 | , "author": "Alex R. Young " 5 | , "engines": ["node >= 0.4.7"] 6 | , "main": "./lib/index.js" 7 | , "repository": { 8 | "type" : "git" 9 | , "url" : "http://github.com/alexyoung/pop-gallery.git" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## pop-gallery 2 | 3 | ![Gallery screenshot](http://popjs.com/images/gallery-screenshot.png) 4 | 5 | Automatically generates a gallery site from a directory of images. 6 | 7 | ## Usage 8 | 9 | Install alongside [Pop](http://popjs.com): 10 | 11 | npm install -g pop 12 | npm install -g pop-gallery 13 | 14 | Then generate a site using pop-gallery's generator: 15 | 16 | cd dir_with_images/ 17 | pop new pop-gallery . 18 | pop server 19 | 20 | -------------------------------------------------------------------------------- /test/fixtures/_layouts/default.jade: -------------------------------------------------------------------------------- 1 | !!! 5 2 | html(lang="en") 3 | head 4 | title #{site.config.title} 5 | link(href="/stylesheets/screen.css", media="screen", rel="stylesheet", type="text/css") 6 | script(type="text/javascript", src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js") 7 | script(type="text/javascript", src="/javascripts/gallery.js") 8 | body 9 | header#header 10 | hgroup 11 | h1 12 | a(href="/") #{site.config.title} 13 | section.content 14 | !{content} 15 | -------------------------------------------------------------------------------- /lib/assets/default.jade: -------------------------------------------------------------------------------- 1 | !!! 5 2 | html(lang="en") 3 | head 4 | title #{site.config.title} 5 | link(href="/stylesheets/screen.css", media="screen", rel="stylesheet", type="text/css") 6 | script(type="text/javascript", src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js") 7 | script(type="text/javascript", src="/javascripts/gallery.js") 8 | body 9 | #content 10 | header#header 11 | hgroup 12 | h1 13 | a(href="/") #{site.config.title} 14 | section.content 15 | !{content} 16 | -------------------------------------------------------------------------------- /test/fixtures/javascripts/gallery.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | $.fn.gallery = function(images) { 3 | var $this = this 4 | , $content = $('#content') 5 | , fadeSpeed = 200; 6 | 7 | $.each(images, function(i, image) { 8 | var html = $(''); 9 | $this.append(html); 10 | }); 11 | 12 | $('#gallery a').live('click', function(e) { 13 | e.preventDefault(e); 14 | $('#modal').remove(); 15 | $('body').prepend(''); 16 | $('#modal-content').append($(this).find('img').clone()); 17 | }); 18 | 19 | $('#modal').live('click', function(e) { 20 | e.preventDefault(e); 21 | $('#modal').fadeOut(fadeSpeed); 22 | }); 23 | 24 | $(window).keypress(function(e) { 25 | console.log(e.which); 26 | if (e.which === 0) { 27 | $('#modal').fadeOut(fadeSpeed); 28 | } 29 | }); 30 | }; 31 | })(jQuery); 32 | -------------------------------------------------------------------------------- /lib/assets/gallery.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | // TODO: Loading as the page scrolls, keyboard shortcuts for left/right 3 | $.fn.gallery = function(images) { 4 | var $this = this 5 | , $content = $('#content') 6 | , fadeSpeed = 200; 7 | 8 | $.each(images, function(i, image) { 9 | var html = $(''); 10 | $this.append(html); 11 | }); 12 | 13 | $('#gallery a').live('click', function(e) { 14 | e.preventDefault(e); 15 | $('#modal').remove(); 16 | $('body').prepend(''); 17 | $('#modal-content').append($(this).find('img').clone()); 18 | }); 19 | 20 | $('#modal').live('click', function(e) { 21 | e.preventDefault(e); 22 | $('#modal').fadeOut(fadeSpeed); 23 | }); 24 | 25 | $(window).keypress(function(e) { 26 | console.log(e.which); 27 | if (e.which === 0) { 28 | $('#modal').fadeOut(fadeSpeed); 29 | } 30 | }); 31 | }; 32 | })(jQuery); 33 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs') 2 | , path = require('path') 3 | , existsSync = require('fs').existsSync || path.existsSync 4 | ; 5 | 6 | module.exports = { 7 | generator: { 8 | run: function(helpers, pathName) { 9 | var paths = ['_posts', '_lib', '_layouts', '_includes', 'stylesheets', 'javascripts']; 10 | 11 | if (!existsSync(pathName)) fs.mkdirSync(pathName, 0777); 12 | paths.forEach(function(p) { 13 | p = path.join(pathName, p); 14 | if (!existsSync(p)) fs.mkdirSync(p, 0777); 15 | }); 16 | 17 | var files = [ 18 | ['/assets/default.jade', pathName + '/_layouts/'] 19 | , ['/assets/index.jade', pathName] 20 | , ['/assets/_config.json', pathName] 21 | , ['/assets/screen.styl', pathName + '/stylesheets/'] 22 | , ['/assets/gallery.js', pathName + '/javascripts/'] 23 | ]; 24 | 25 | files.forEach(function(f) { 26 | var templateFileName = __dirname + f[0] 27 | , outFileName = f[1] + '/' + path.basename(f[0]); 28 | 29 | if (!existsSync(outFileName)) 30 | fs.writeFileSync(outFileName, fs.readFileSync(templateFileName)); 31 | }); 32 | } 33 | }, 34 | 35 | helpers: { 36 | /** 37 | * Finds images and generates JSON. 38 | */ 39 | gallery: function() { 40 | var files = fs.readdirSync(this.root); 41 | files = files.filter(function(f) { return f.match(/\.(png|gif|jpe?g)/i); }); 42 | return ''; 43 | } 44 | } 45 | }; 46 | -------------------------------------------------------------------------------- /lib/assets/screen.styl: -------------------------------------------------------------------------------- 1 | /* Variables */ 2 | light = #fff 3 | dark = #1a1a1f 4 | back = #ddd 5 | highlight = #d02413 6 | 7 | standard-font-size = 14px 8 | small-font-size = 12px 9 | header-font-size = 128.5% 10 | 11 | /* Functions */ 12 | glass-gradient() 13 | background: #f6f8f9 14 | background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%) 15 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f8f9), color-stop(50%,#e5ebee), color-stop(51%,#d7dee3), color-stop(100%,#f5f7f9)) 16 | background: -webkit-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%) 17 | background: -o-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%) 18 | background: -ms-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%) 19 | background: linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%) 20 | 21 | border-radius() 22 | -webkit-border-radius arguments 23 | -moz-border-radius arguments 24 | border-radius arguments 25 | 26 | big-shadow() 27 | box-shadow: 0 0 10px #111 28 | 29 | lozenge() 30 | -webkit-border-radius: 10px 31 | -moz-border-radius: 10px 32 | border-radius: 10px 33 | background-color: #bbc4cc 34 | padding: 4px 8px 35 | text-decoration: none 36 | color: dark 37 | font-weight: bold 38 | font-size: small-font-size 39 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) 40 | 41 | reset() 42 | margin: 0 43 | padding: 0 44 | 45 | /* Styles */ 46 | body 47 | font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif 48 | font-size: standard-font-size 49 | margin: 0 auto 50 | padding-bottom: 2em 51 | word-spacing: 0.1em 52 | background-color: back 53 | height: 100% 54 | 55 | h1, h2, h3, h4, p 56 | reset() 57 | 58 | h1, h2, h3, h4 59 | font-size: header-font-size 60 | 61 | a 62 | color: highlight 63 | 64 | a:hover 65 | text-decoration: none 66 | 67 | #header 68 | padding-bottom: 10px 69 | border-bottom: 3px solid #ced3d2 70 | width: 90% 71 | margin: 10px auto 72 | 73 | #header h1 74 | font-size: 50px 75 | text-shadow: rgba(0,0,0,0.3) 0 -1px 76 | 77 | #header h1 a 78 | color: #fff 79 | text-decoration: none 80 | 81 | #gallery 82 | width: 90% 83 | margin: 0 auto 84 | 85 | #gallery a 86 | lozenge() 87 | big-shadow() 88 | display: block 89 | float: left 90 | margin: 15px 91 | 92 | #gallery img 93 | height: 200px 94 | margin: 5px 95 | 96 | #modal 97 | position: fixed 98 | top: 0 99 | left: 0 100 | width: 100% 101 | height: 100% 102 | background-color: rgba(0, 0, 0, 0.75) 103 | 104 | #modal-content 105 | text-align: center 106 | margin-top: 100px 107 | 108 | #modal-content img 109 | big-shadow() 110 | -------------------------------------------------------------------------------- /test/fixtures/stylesheets/screen.styl: -------------------------------------------------------------------------------- 1 | /* Variables */ 2 | light = #fff 3 | dark = #1a1a1f 4 | back = #ddd 5 | highlight = #d02413 6 | 7 | standard-font-size = 14px 8 | small-font-size = 12px 9 | header-font-size = 128.5% 10 | 11 | /* Functions */ 12 | glass-gradient() 13 | background: #f6f8f9 14 | background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%) 15 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f8f9), color-stop(50%,#e5ebee), color-stop(51%,#d7dee3), color-stop(100%,#f5f7f9)) 16 | background: -webkit-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%) 17 | background: -o-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%) 18 | background: -ms-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%) 19 | background: linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%) 20 | 21 | border-radius() 22 | -webkit-border-radius arguments 23 | -moz-border-radius arguments 24 | border-radius arguments 25 | 26 | big-shadow() 27 | box-shadow: 0 0 10px #111 28 | 29 | lozenge() 30 | -webkit-border-radius: 10px 31 | -moz-border-radius: 10px 32 | border-radius: 10px 33 | background-color: #bbc4cc 34 | padding: 4px 8px 35 | text-decoration: none 36 | color: dark 37 | font-weight: bold 38 | font-size: small-font-size 39 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) 40 | 41 | reset() 42 | margin: 0 43 | padding: 0 44 | 45 | /* Styles */ 46 | body 47 | font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif 48 | font-size: standard-font-size 49 | margin: 0 auto 50 | padding-bottom: 2em 51 | word-spacing: 0.1em 52 | background-color: back 53 | height: 100% 54 | 55 | h1, h2, h3, h4, p 56 | reset() 57 | 58 | h1, h2, h3, h4 59 | font-size: header-font-size 60 | 61 | a 62 | color: highlight 63 | 64 | a:hover 65 | text-decoration: none 66 | 67 | #header 68 | padding-bottom: 10px 69 | border-bottom: 3px solid #ced3d2 70 | width: 90% 71 | margin: 10px auto 72 | 73 | #header h1 74 | font-size: 50px 75 | text-shadow: rgba(0,0,0,0.3) 0 -1px 76 | 77 | #header h1 a 78 | color: #fff 79 | text-decoration: none 80 | 81 | #gallery 82 | width: 90% 83 | margin: 0 auto 84 | 85 | #gallery a 86 | lozenge() 87 | big-shadow() 88 | display: block 89 | float: left 90 | margin: 15px 91 | 92 | #gallery img 93 | height: 200px 94 | margin: 5px 95 | 96 | #modal 97 | position: fixed 98 | top: 0 99 | left: 0 100 | width: 100% 101 | height: 100% 102 | background-color: rgba(0, 0, 0, 0.75) 103 | 104 | #modal-content 105 | text-align: center 106 | margin-top: 100px 107 | 108 | #modal-content img 109 | big-shadow() 110 | --------------------------------------------------------------------------------