├── .nvmrc ├── img ├── galFly-01.jpg ├── galFly-02.jpg ├── galNum-01.jpg ├── galNum-02.jpg ├── galNum-03.jpg ├── galNum-04.jpg └── galCommons.jpg ├── src ├── node_modules │ ├── selector.js │ └── gal-ui.js ├── galFly │ ├── main.scss │ ├── index.html │ ├── main.js │ ├── bookmarklet.js │ └── stringified.js ├── galNum │ ├── bookmarklet.js │ ├── main.scss │ ├── index.html │ └── main.js └── _gal-ui.scss ├── package.json ├── .gitignore ├── MIT-LICENSE.txt ├── make.rb ├── README.md ├── css └── stijl.css ├── gulpfile.js └── index.html /.nvmrc: -------------------------------------------------------------------------------- 1 | 5.5.0 -------------------------------------------------------------------------------- /img/galFly-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrummerHead/galNum-galFly/master/img/galFly-01.jpg -------------------------------------------------------------------------------- /img/galFly-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrummerHead/galNum-galFly/master/img/galFly-02.jpg -------------------------------------------------------------------------------- /img/galNum-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrummerHead/galNum-galFly/master/img/galNum-01.jpg -------------------------------------------------------------------------------- /img/galNum-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrummerHead/galNum-galFly/master/img/galNum-02.jpg -------------------------------------------------------------------------------- /img/galNum-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrummerHead/galNum-galFly/master/img/galNum-03.jpg -------------------------------------------------------------------------------- /img/galNum-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrummerHead/galNum-galFly/master/img/galNum-04.jpg -------------------------------------------------------------------------------- /img/galCommons.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DrummerHead/galNum-galFly/master/img/galCommons.jpg -------------------------------------------------------------------------------- /src/node_modules/selector.js: -------------------------------------------------------------------------------- 1 | module.exports = function(element){ 2 | return document.querySelector(element); 3 | }; 4 | -------------------------------------------------------------------------------- /src/galFly/main.scss: -------------------------------------------------------------------------------- 1 | @import '../gal-ui'; 2 | 3 | body { 4 | margin: 0; 5 | font-family: sans-serif; 6 | text-align: center; 7 | background-color: #808080; 8 | } 9 | #end { 10 | background-color: #ffb1ba; 11 | height: 10em; 12 | } 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "galNum-galFly", 3 | "version": "0.2.0", 4 | "author": "DrummerHead", 5 | "private": true, 6 | "devDependencies": { 7 | "browser-sync": "^2.11.1", 8 | "browserify": "^13.0.0", 9 | "gulp": "^3.9.1", 10 | "gulp-autoprefixer": "^3.1.0", 11 | "gulp-cssnano": "^2.1.1", 12 | "gulp-htmlmin": "^1.3.0", 13 | "gulp-rename": "^1.2.2", 14 | "gulp-sass": "^2.2.0", 15 | "gulp-uglify": "^1.5.2", 16 | "through2": "^2.0.1" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ### OSX ### 2 | .DS_Store 3 | .AppleDouble 4 | .LSOverride 5 | 6 | # Icon must ends with two \r. 7 | Icon 8 | 9 | # Thumbnails 10 | ._* 11 | 12 | # Files that might appear on external disk 13 | .Spotlight-V100 14 | .Trashes 15 | 16 | 17 | ### vim ### 18 | [._]*.s[a-w][a-z] 19 | [._]s[a-w][a-z] 20 | *.un~ 21 | Session.vim 22 | .netrwhist 23 | *~ 24 | 25 | ### project specific ### 26 | 27 | /img/raw/ 28 | /temp/galFly/* 29 | /.tmp 30 | /temp/galNum/* 31 | /node_modules 32 | /dist 33 | /temp 34 | -------------------------------------------------------------------------------- /src/galNum/bookmarklet.js: -------------------------------------------------------------------------------- 1 | /* - This is a javascript snippet to be used with 2 | http://mcdlr.com/js-inject/ - */ 3 | 4 | 5 | /* - galNum - *\ 6 | |* - Create numbered sequence of images based on current one - *| 7 | |*- To know more check http://mcdlr.com/galNum-galFly/ - *| 8 | \* - v3.0 - */ 9 | 10 | 11 | 12 | 13 | var html = '{{html}}'; 14 | 15 | window.open('data:text/html,' + encodeURIComponent(html)); 16 | // document.write(html); 17 | // document.close(); 18 | 19 | 20 | 21 | 22 | /* - /galNum - */ 23 | -------------------------------------------------------------------------------- /src/galNum/main.scss: -------------------------------------------------------------------------------- 1 | @import '../gal-ui'; 2 | 3 | body { 4 | margin: 0; 5 | font-family: sans-serif; 6 | background-color: #808080; 7 | } 8 | header { 9 | background-color: #eee; 10 | } 11 | .vessel { 12 | max-width: 40em; 13 | margin: 0 auto; 14 | padding: 1em 0; 15 | } 16 | #hb { 17 | font-size: 1.2em; 18 | } 19 | #hb span { 20 | color: #808080; 21 | } 22 | #hb b { 23 | color: #444; 24 | cursor: pointer; 25 | } 26 | #hb.done b { 27 | color: #808080; 28 | cursor: auto; 29 | font-weight: normal; 30 | } 31 | #hb b.s { 32 | color: #444; 33 | cursor: auto; 34 | font-weight: bold; 35 | } 36 | form { 37 | display: none; 38 | margin-top: 1em; 39 | } 40 | .v { 41 | display: block; 42 | } 43 | main { 44 | text-align: center; 45 | } 46 | -------------------------------------------------------------------------------- /src/galFly/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | galFly 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 |
    17 |
  1. ▲
    2. 18 |
  2. ▼
    3. 19 |
  3. 🔍
    4. 20 |
21 | 22 | 💡 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /MIT-LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright 2014 Nicolas Barrera 2 | http://mcdlr.com/ 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining 5 | a copy of this software and associated documentation files (the 6 | "Software"), to deal in the Software without restriction, including 7 | without limitation the rights to use, copy, modify, merge, publish, 8 | distribute, sublicense, and/or sell copies of the Software, and to 9 | permit persons to whom the Software is furnished to do so, subject to 10 | the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 19 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 20 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 21 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/galNum/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | galNum 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |   19 |   22 | 23 |
24 |
25 |
26 |
27 |
28 | 29 |
    30 |
  1. ▲
    2. 31 |
  2. ▼
    3. 32 |
  3. 🔍
    4. 33 |
34 | 35 | 💡 36 | 37 | 38 | 39 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /make.rb: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | 3 | # Executes gulp, by default this compresses main.css and main.js 4 | puts %x[gulp] 5 | 6 | def compact_gal(which) 7 | css_min = File.read("temp/#{which}/main.css") 8 | js_min = File.read("temp/#{which}/main.js") 9 | html = File.read("src/#{which}/index.html") 10 | bookmarklet = File.read("src/#{which}/bookmarklet.js") 11 | 12 | # Oh the trouble and madness I've been through 13 | # http://stackoverflow.com/questions/13458410/ 14 | js_min.gsub!(/\\/m){ %q(\\\\) } 15 | js_min.gsub!(/'/m){ %q(\') } 16 | 17 | html.gsub!(/.*?/m){ $1 } 18 | File.write("temp/#{which}/index_for_minification.html", html) 19 | puts %x[gulp htmlmin] 20 | 21 | html_min = File.read("temp/#{which}/index.min.html") 22 | html_min.gsub!('{{css}}'){ css_min } 23 | html_min.gsub!('{{js}}'){ js_min } 24 | bookmarklet.gsub!('{{html}}'){ html_min } 25 | File.write("dist/#{which}.js", bookmarklet) 26 | puts %x[gulp uglify:dist] 27 | 28 | puts "\n= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =" 29 | puts " Bookmarklet #{which} has been generated" 30 | puts " - Use dist/#{which}.min.js for http://mcdlr.com/js-inject/" 31 | puts " - Use dist/#{which}.min.html.js for index.html" 32 | puts "= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =\n\n" 33 | end 34 | 35 | compact_gal("galFly") 36 | compact_gal("galNum") 37 | -------------------------------------------------------------------------------- /src/galFly/main.js: -------------------------------------------------------------------------------- 1 | (function(document, stringified){ 2 | 3 | var $ = require('selector'); 4 | var galUi = require('gal-ui'); 5 | 6 | 7 | // Selector variables and source of data 8 | // 9 | var $gal = $('#gal'); 10 | var imageLinks = JSON.parse(stringified); 11 | var increase = galUi.defaultShift; 12 | 13 | 14 | // Specifics of galFly related to creating the gallery and injecting 15 | // 16 | var createGal = function(start){ 17 | var galleryHTML = $gal.innerHTML = ''; 18 | galUi.currentImage = galUi.minImage = start; 19 | 20 | if(imageLinks.length > increase){ 21 | for(var i = start; i < start + galUi.defaultShift; i++){ 22 | galleryHTML += imageLinks[i]; 23 | } 24 | increase += galUi.defaultShift; 25 | galUi.maxImage = start + galUi.defaultShift; 26 | 27 | $gal.insertAdjacentHTML('afterEnd', '
Load more
'); 28 | $('#more').addEventListener('click', function(){ 29 | scrollTo(0, 0); 30 | this.outerHTML = ''; 31 | createGal(start + galUi.defaultShift); 32 | }); 33 | } 34 | else { 35 | for(var i = start; i < imageLinks.length; i++){ 36 | galleryHTML += imageLinks[i]; 37 | } 38 | galUi.maxImage = imageLinks.length; 39 | $gal.insertAdjacentHTML('afterEnd', '
'); 40 | } 41 | 42 | $gal.innerHTML = galleryHTML; 43 | }; 44 | 45 | 46 | galUi.init($gal); 47 | 48 | createGal(0); 49 | 50 | 51 | 52 | 53 | })(document, stringified) 54 | -------------------------------------------------------------------------------- /src/galFly/bookmarklet.js: -------------------------------------------------------------------------------- 1 | /* - This is a javascript snippet to be used with 2 | http://mcdlr.com/js-inject/ - */ 3 | 4 | 5 | /* - galFly - *\ 6 | |* - Render linked images from current page - *| 7 | |*- To know more check http://mcdlr.com/galNum-galFly/ - *| 8 | \* - v3.0 - */ 9 | 10 | 11 | 12 | 13 | var imgs = Array.prototype.filter.call(document.links, function(val){ 14 | return /\.(jpe?g|gif|png|tiff|webm|svg)(\?.*)?$/i.test(val.href); 15 | }); 16 | 17 | var noRepeats = []; 18 | var imgsLastIndex = imgs.length - 1; 19 | for(var i = 0; i < imgsLastIndex; i++){ 20 | if(imgs[i].href !== imgs[i+1].href){ 21 | noRepeats.push(imgs[i]); 22 | } 23 | }; 24 | noRepeats.push(imgs[imgsLastIndex]); 25 | 26 | var lis = noRepeats.map(function(val, i){ 27 | if(/\.webm$/.test(val.href)){ 28 | return '
  • ' + val.textContent + '
    • '; 29 | } 30 | else { 31 | return '
  • ' + val.href + '' + val.textContent + '
    • '; 32 | } 33 | }); 34 | 35 | var stringified = JSON.stringify(lis).replace(/\\/g, '\\\\').replace(/'/g, '\\\''); 36 | 37 | var html = '{{html}}'; 38 | 39 | // window.open('data:text/html,' + encodeURIComponent(html)); 40 | document.write(html); 41 | document.close(); 42 | 43 | 44 | 45 | 46 | /* - /galFly - */ 47 | -------------------------------------------------------------------------------- /src/_gal-ui.scss: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | #gal { 5 | padding: 1em; 6 | margin: 0; 7 | list-style-type: none; 8 | } 9 | #gal li { 10 | height: 100vh; 11 | margin: 4em 0; 12 | padding: 5px 0 1px; 13 | } 14 | #gal img, 15 | #gal video { 16 | display: block; 17 | max-width: 100%; 18 | height: calc(100% - 2rem); 19 | margin: 0 auto; 20 | font-size: 3em; 21 | object-fit: contain; 22 | color: #ccc; 23 | } 24 | #gal .zoom { 25 | height: auto; 26 | } 27 | #gal .zoom img { 28 | width: 100%; 29 | height: auto; 30 | } 31 | #gal a { 32 | display: block; 33 | height: 2rem; 34 | line-height: 2rem; 35 | white-space: nowrap; 36 | overflow: hidden; 37 | text-overflow: ellipsis; 38 | width: 100%; 39 | text-decoration: none; 40 | color: #ccc; 41 | } 42 | #gal a:hover { 43 | color: #808080; 44 | text-decoration: underline; 45 | } 46 | #move, 47 | #light { 48 | position: fixed; 49 | margin: 0; 50 | font-size: 1.4em; 51 | color: #888; 52 | user-select: none; 53 | } 54 | #move { 55 | width: 5em; 56 | padding: 0; 57 | bottom: 0; 58 | left: 0; 59 | list-style-type: none; 60 | } 61 | #move li { 62 | float: left; 63 | width: 2.75em; 64 | height: 2em; 65 | line-height: 2em; 66 | cursor: pointer; 67 | } 68 | #move li:hover { 69 | color: #444; 70 | } 71 | #up, 72 | #down { 73 | text-indent: .5em; 74 | } 75 | #down { 76 | clear: left; 77 | } 78 | #move #zoom { 79 | width: 2em; 80 | text-indent: -.5em; 81 | } 82 | #light { 83 | padding: .5em .7em; 84 | top: 0; 85 | right: 0; 86 | cursor: pointer; 87 | } 88 | #more { 89 | padding: 1em; 90 | font-size: 1.5em; 91 | font-weight: bold; 92 | background-color: #eee; 93 | color: #888; 94 | cursor: pointer; 95 | } 96 | #more:hover { 97 | background-color: #ddd; 98 | color: #777; 99 | } 100 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # galNum & galFly 2 | 3 | This project generates two bookmarklets that make viewing images on the internet easier. 4 | 5 | For a description and "installation" of these bookmarklets, check http://mcdlr.com/galNum-galFly/ (or `index.html` in this project) 6 | 7 | 8 | ## Dependencies 9 | 10 | - Ruby 11 | - Node 12 | 13 | On project root run: 14 | 15 | ``` 16 | mkdir dist temp .tmp 17 | npm install -g gulp-cli 18 | npm install 19 | ``` 20 | 21 | 22 | ## Development 23 | 24 | The two bookmarklets share CSS and JS, namely 25 | 26 | - `src/_gal-ui.scss` 27 | - `src/node_modules/gal-ui.js` 28 | 29 | And then each bookmarklet has its specific code at 30 | 31 | - `src/galFly` 32 | - `src/galNum` 33 | 34 | 35 | ### Running local versions 36 | 37 | For galFly: 38 | 39 | ``` 40 | gulp serve:fly 41 | ``` 42 | 43 | For galNum 44 | ``` 45 | gulp serve:num 46 | ``` 47 | 48 | 49 | ### Files 50 | 51 | They both share a similar file structure, explained below 52 | 53 | #### bookmarklet.js 54 | 55 | First code run on the page, this will gather all the images and webms present in the page which is the source of the gallery created afterwards. 56 | 57 | Also you will find seemingly interpolated information in the form of `{{html}}`, this is used in the "compiling" process by `make.rb` 58 | 59 | #### index.html 60 | 61 | This is an emulation of what would happen if `bookmarklet.js` ran on a page full of images. It's easier to prototype on top of already present data. 62 | 63 | Other forms of interpolation are present also to be changed by `make.rb` to make resources inline for the bookmarklet. 64 | 65 | #### main.js 66 | 67 | Specific bookmarklet code. It `require`s `selector` and `gal-ui` shared code 68 | 69 | #### main.scss 70 | 71 | Specific bookmarklet styling. It `@import`s `_gal-ui.scss` shared code. 72 | 73 | #### stringified.js (only for galFly) 74 | 75 | Array with a list of image sources, which would actually be generated by `bookmarklet.js`. galNum does not need this since it only needs a numeric progression and a single URL is hardcoded for development. 76 | 77 | ## Generate 78 | 79 | After making your changes you can generate the new versions with 80 | 81 | ``` 82 | ./make.rb 83 | ``` 84 | 85 | And following the instructions 86 | -------------------------------------------------------------------------------- /css/stijl.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 1.2em; 3 | line-height: 1.4; 4 | font-family: sans-serif; 5 | } 6 | body { 7 | margin: 0; 8 | color: #0f0601; 9 | background-color: #da8008; 10 | } 11 | img { 12 | max-width: 100%; 13 | } 14 | a { 15 | color: #343476; 16 | } 17 | a:hover { 18 | color: #625ea6; 19 | } 20 | .vessel { 21 | max-width: 53.4rem; 22 | padding: 1em; 23 | margin: 0 auto; 24 | } 25 | header, 26 | section, 27 | .nice-bullet { 28 | box-shadow: 0 0.1rem 0.3rem 0 rgba(41, 15, 0, 0.25); 29 | } 30 | header { 31 | background-color: #b44203; 32 | color: #fbf4e1; 33 | font-size: 1.2em; 34 | text-shadow: .05em .05em 0 rgba(31, 14, 0, 0.4); 35 | } 36 | header .vessel { 37 | padding: 2em 1em 3em; 38 | } 39 | header h1 { 40 | margin: .2em 0; 41 | line-height: 1; 42 | font-size: 2.75em; 43 | } 44 | header strong { 45 | } 46 | header a { 47 | color: #fbf4e1; 48 | text-decoration: none; 49 | border-bottom: .2em dotted #fbf4e1; 50 | } 51 | section { 52 | background-color: #eecf15; 53 | margin: 5.75em 0; 54 | } 55 | section h2 { 56 | margin: 1.1em 0; 57 | font-size: 1.75em; 58 | } 59 | section p { 60 | text-shadow: .05em .05em 0 rgba(243, 251, 256, .4); 61 | } 62 | .bookmarklet { 63 | display: block; 64 | padding: 0.5em; 65 | font-size: 3.4em; 66 | text-align: center; 67 | letter-spacing: -0.07em; 68 | font-weight: 900; 69 | background-color: #B3C704; 70 | color: #FFFFFF; 71 | text-decoration: none; 72 | text-rendering: optimizelegibility; 73 | cursor: move; 74 | } 75 | small { 76 | display: block; 77 | margin: 0 0 2.5em; 78 | font-size: .8em; 79 | } 80 | code { 81 | } 82 | .use-steps { 83 | margin: 0; 84 | padding: 0; 85 | list-style-type: none; 86 | } 87 | .use-steps li { 88 | margin: 3.5em 0; 89 | clear: both; 90 | } 91 | .nice-bullet { 92 | display: inline-block; 93 | width: 1.4em; 94 | height: 1.4em; 95 | line-height: 1.5; 96 | font-size: 3em; 97 | margin: 0 .4em .5em 0; 98 | font-weight: 900; 99 | text-align: center; 100 | border-radius: 2em; 101 | color: #FBF4E1; 102 | background-color: #B44203; 103 | float: left; 104 | } 105 | .instructions { 106 | margin: 0 0 0 5.4em; 107 | padding: .5em 0 0 0; 108 | } 109 | .instructions > *:first-child { 110 | margin-top: 0; 111 | } 112 | 113 | .illustration { 114 | clear: both; 115 | margin: 1.5 0; 116 | } 117 | .illustration img { 118 | } 119 | #common-features .nice-bullet { 120 | font-size: 1.8em; 121 | margin: 0; 122 | } 123 | #common-features .instructions { 124 | margin: 0 0 0 3.5em; 125 | } 126 | -------------------------------------------------------------------------------- /src/galNum/main.js: -------------------------------------------------------------------------------- 1 | (function(document, href){ 2 | 3 | 4 | var $ = require('selector'); 5 | var galUi = require('gal-ui'); 6 | 7 | 8 | // Helper functions 9 | // 10 | var p = function(num){ 11 | return parseInt(num, 10); 12 | }; 13 | 14 | 15 | 16 | 17 | // Selector variables and source of data 18 | // 19 | var $hrefBar = $('#hb'); 20 | var $start = $('#start'); 21 | var $shift = $('#shift'); 22 | var $form = $('form'); 23 | var $main = $('main'); 24 | var hrefBarContent = ''; 25 | var constantHref; 26 | var hrefParts = href.split(/(\d+)/).map(function(part){ 27 | return { 28 | 'prt' : part, 29 | 'isN' : /^\d+$/.test(part), 30 | 'isS' : false 31 | } 32 | }); 33 | 34 | 35 | // Specifics of galNum related to creating the gallery and injecting 36 | // 37 | var splitBySelected = function(object){ 38 | var result = ['', '']; 39 | var position = 0; 40 | for(chunk in object){ 41 | object[chunk].isS ? position = 1 : result[position] += object[chunk].prt; 42 | } 43 | return result; 44 | }; 45 | 46 | var zeroize = function(number, length){ 47 | var num = number.toString(); 48 | while(num.length < length){ 49 | num = '0' + num; 50 | } 51 | return num; 52 | }; 53 | 54 | var createGal = function(start, shift){ 55 | $main.innerHTML = ''; 56 | var galleryHTML = ''; 67 | $main.innerHTML = galleryHTML; 68 | 69 | $main.insertAdjacentHTML('beforeEnd', '
    Load more
    '); 70 | $('#more').addEventListener('click', function(){ 71 | scrollTo(0, 0); 72 | var newStart = (hasZeros ? zeroize(end, start.length) : end); 73 | $start.value = newStart; 74 | createGal(newStart, shift); 75 | }); 76 | }; 77 | 78 | 79 | for(part in hrefParts){ 80 | var I = hrefParts[part]; 81 | hrefBarContent += ( I.isN ? '' + I.prt + '' : '' + I.prt + '' ); 82 | } 83 | $hrefBar.innerHTML = hrefBarContent; 84 | var $numbers = document.querySelectorAll('#hb b'); 85 | 86 | for(var i = 0; i < $numbers.length; i++){ 87 | var I = $numbers.item(i); 88 | I.addEventListener('click', function(e){ 89 | $form.classList.add('v'); 90 | $hrefBar.classList.add('done'); 91 | this.classList.add('s'); 92 | hrefParts[this.getAttribute('data-position')].isS = true; 93 | constantHref = splitBySelected(hrefParts); 94 | $start.value = this.textContent; 95 | $shift.value = galUi.defaultShift; 96 | }); 97 | } 98 | 99 | 100 | $form.addEventListener('submit', function(e){ 101 | e.preventDefault(); 102 | createGal($start.value, $shift.value); 103 | galUi.init($main); 104 | }); 105 | 106 | 107 | 108 | 109 | })(document, href) 110 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var uglify = require('gulp-uglify'); 3 | var cssnano = require('gulp-cssnano'); 4 | var htmlmin = require('gulp-htmlmin'); 5 | var rename = require('gulp-rename'); 6 | var bs = require('browser-sync').create(); 7 | var through2 = require('through2') 8 | var browserify = require('browserify'); 9 | var sass = require('gulp-sass'); 10 | var autoprefixer = require('gulp-autoprefixer'); 11 | 12 | 13 | gulp.task('js', function(){ 14 | return gulp.src(['src/galFly/main.js', 'src/galNum/main.js' ], {base: 'src/'}) 15 | .pipe(through2.obj(function(file, enc, next){ 16 | browserify({ 17 | entries: file.path, 18 | debug: false 19 | }).bundle(function(err, res){ 20 | if(err){ 21 | return next(err); 22 | } 23 | file.contents = res; 24 | next(null, file); 25 | }) 26 | })) 27 | .on('error', function(error){ 28 | console.log(error.stack); 29 | this.emit('end'); 30 | }) 31 | .pipe(gulp.dest('.tmp/src')) 32 | }); 33 | 34 | gulp.task('uglify', ['js'], function(){ 35 | return gulp.src(['.tmp/src/galFly/main.js', '.tmp/src/galNum/main.js' ], {base: '.tmp/src/'}) 36 | .pipe(uglify()) 37 | .pipe(gulp.dest('temp')); 38 | }); 39 | 40 | gulp.task('uglify:dist', function(){ 41 | return gulp.src(['dist/*.js', '!dist/*.min.js', '!dist/*.html.js']) 42 | .pipe(uglify()) 43 | .pipe(rename({suffix: '.min'})) 44 | .pipe(gulp.dest('dist')) 45 | .pipe(through2.obj(function(file, enc, next){ 46 | var name = file.relative.replace('.min.js',''); 47 | var preFile = '' + name + ''; 50 | 51 | file.contents = new Buffer(preFile + safeJS + postFile); 52 | 53 | return next(null, file) 54 | })) 55 | .pipe(rename({suffix: '.html'})) 56 | .pipe(gulp.dest('dist')); 57 | }); 58 | 59 | gulp.task('sass', function(){ 60 | return gulp.src(['src/galFly/main.scss', 'src/galNum/main.scss'], {base: 'src/'}) 61 | .pipe(sass.sync({ 62 | outputStyle: 'expanded' 63 | })).on('error', sass.logError) 64 | .pipe(autoprefixer({ 65 | browsers: ['last 1 version'] 66 | })) 67 | .pipe(gulp.dest('.tmp/src')) 68 | }); 69 | 70 | gulp.task('cssmin', ['sass'], function(){ 71 | return gulp.src(['.tmp/src/galFly/main.css', '.tmp/src/galNum/main.css'], {base: '.tmp/src/'}) 72 | .pipe(cssnano()) 73 | .pipe(gulp.dest('temp')); 74 | }); 75 | 76 | gulp.task('htmlmin', function(){ 77 | return gulp.src(['temp/galFly/index_for_minification.html', 'temp/galNum/index_for_minification.html' ], {base: 'temp/'}) 78 | .pipe(htmlmin({collapseWhitespace: true})) 79 | .pipe(rename(function(path){ 80 | path.basename = 'index'; 81 | path.extname = '.min.html'; 82 | return path; 83 | })) 84 | .pipe(gulp.dest('temp')); 85 | }); 86 | 87 | var generateServer = function(port, name){ 88 | return function(){ 89 | bs.init({ 90 | port: port, 91 | server: { 92 | baseDir: ['.tmp/src/' + name + '/', 'src/' + name + '/'] 93 | } 94 | }); 95 | 96 | gulp.watch(['src/' + name + '/main.js', 'src/node_modules/*.js'], ['js']); 97 | gulp.watch(['src/**/*.scss'], ['sass']); 98 | 99 | gulp.watch([ 100 | '.tmp/src/' + name + '/main.js', 101 | '.tmp/src/' + name + '/main.css' 102 | ]).on('change', bs.reload); 103 | 104 | }; 105 | } 106 | 107 | gulp.task('serve:fly', ['js'], generateServer(9090, 'galFly')); 108 | gulp.task('serve:num', ['js'], generateServer(9080, 'galNum')); 109 | 110 | gulp.task('serve:docs', function(){ 111 | bs.init({ 112 | port: 9070, 113 | server: { 114 | baseDir: '.' 115 | } 116 | }); 117 | 118 | gulp.watch([ 119 | 'index.html', 120 | 'css/stijl.css' 121 | ]).on('change', bs.reload); 122 | }); 123 | 124 | 125 | gulp.task('default', ['uglify', 'cssmin']); -------------------------------------------------------------------------------- /src/node_modules/gal-ui.js: -------------------------------------------------------------------------------- 1 | var $ = require('selector'); 2 | 3 | var galUi = (function(){ 4 | return { 5 | defaultShift: 25, 6 | currentImage: 0, 7 | minImage: 0, 8 | maxImage: this.defaultShift, 9 | 10 | init: function(galWidthElement){ 11 | var _this = this; 12 | onkeypress = function(e){ 13 | switch(e.charCode){ 14 | case 105: 15 | _this.seek(false); 16 | break; 17 | case 106: 18 | _this.goToImage(true); 19 | break; 20 | case 107: 21 | _this.goToImage(false); 22 | break; 23 | case 108: 24 | _this.zoom(); 25 | break; 26 | case 111: 27 | _this.seek(true); 28 | break; 29 | case 117: 30 | _this.resumeWebm(_this.currentImage); 31 | } 32 | }; 33 | $('#down').addEventListener('click', function(){ 34 | _this.goToImage(true); 35 | }); 36 | $('#up').addEventListener('click', function(){ 37 | _this.goToImage(false); 38 | }); 39 | $('#zoom').addEventListener('click', function(){ 40 | _this.zoom($('#a' + _this.currentImage)); 41 | }); 42 | $('#light').addEventListener('click', function(){ 43 | this.count = this.count ? (this.count + 1) % 3 : 1; 44 | switch(this.count){ 45 | case 0: 46 | var color = "#808080"; 47 | break; 48 | case 1: 49 | var color = "#000"; 50 | break; 51 | case 2: 52 | var color = "#fff"; 53 | } 54 | document.body.style.backgroundColor = color; 55 | }); 56 | }, 57 | 58 | goToImage: function(isGoingDown){ 59 | if(isGoingDown){ 60 | if((this.currentImage + 1) >= this.maxImage){ 61 | scrollTo(0, document.body.scrollHeight); 62 | this.resumeWebm(this.currentImage, false); 63 | } 64 | else{ 65 | this.resumeWebm(this.currentImage, false); 66 | scrollTo(0, $('#a' + ++this.currentImage).offsetTop - 5); 67 | this.resumeWebm(this.currentImage, true); 68 | } 69 | } 70 | else{ 71 | if((this.currentImage - 1) >= this.minImage){ 72 | this.resumeWebm(this.currentImage, false); 73 | scrollTo(0, $('#a' + --this.currentImage).offsetTop - 5); 74 | this.resumeWebm(this.currentImage, true); 75 | } 76 | } 77 | }, 78 | 79 | fullScreen: function(el){ 80 | if (el.requestFullscreen) { 81 | el.requestFullscreen(); 82 | } else if (el.mozRequestFullScreen) { 83 | el.mozRequestFullScreen(); 84 | } else if (el.webkitRequestFullscreen) { 85 | el.webkitRequestFullscreen(); 86 | } 87 | el.fs = true; 88 | }, 89 | 90 | exitFullscreen: function(el){ 91 | if (document.exitFullscreen) { 92 | document.exitFullscreen(); 93 | } else if (document.msExitFullscreen) { 94 | document.msExitFullscreen(); 95 | } else if (document.mozCancelFullScreen) { 96 | document.mozCancelFullScreen(); 97 | } else if (document.webkitExitFullscreen) { 98 | document.webkitExitFullscreen(); 99 | } 100 | el.fs = false; 101 | }, 102 | 103 | zoom: function(el){ 104 | var el = $('#a' + this.currentImage); 105 | if(el.nodeName === 'VIDEO'){ 106 | if(el.fs){ 107 | this.exitFullscreen(el); 108 | } 109 | else { 110 | this.fullScreen(el); 111 | } 112 | } else if (el.nodeName === 'IMG') { 113 | el.parentNode.classList.toggle('zoom'); 114 | } 115 | }, 116 | 117 | resumeWebm: function(id, willPlay){ 118 | var element = $('#a' + id); 119 | var willPlay = willPlay === undefined ? element.paused : willPlay; 120 | if(element.nodeName === 'VIDEO'){ 121 | if(willPlay){ 122 | element.play(); 123 | } 124 | else { 125 | element.pause(); 126 | if(element.fs){ 127 | this.exitFullscreen(element); 128 | } 129 | } 130 | } 131 | }, 132 | 133 | seek: function(isForward){ 134 | var seekAmount = isForward ? 5 : -5; 135 | var el = $('#a' + this.currentImage); 136 | el.currentTime = ((el.currentTime + seekAmount) % el.duration) 137 | } 138 | } 139 | })(); 140 | 141 | module.exports = galUi; 142 | -------------------------------------------------------------------------------- /src/galFly/stringified.js: -------------------------------------------------------------------------------- 1 | var stringified = '["
  • \\"http://i.imgur.com/fVwv4rp.gif\\"MFW people post human babies on r/aww
    • ","
  • \\"http://i.imgur.com/NPbinFl.png\\"I found this on FB and thought my trollbros would appreciate it
    • ","
  • \\"http://i.imgur.com/SXXNUkZ.jpg\\"Guy Love
    • ","
  • \\"http://i.imgur.com/UHcHdQg.gif\\"When she says she\'s close
    • ","
  • \\"http://i.imgur.com/YfKA9rO.jpg\\"HIFW my girlfriend is angry at me and I try to calm her down
    • ","
  • \\"http://i.imgur.com/WCzpbQZ.gif\\"MRW the ex that cheated wants me back
    • ","
  • \\"http://i.imgur.com/XIA2xVJ.gif\\"When my GF asks if her butt is too fat
    • ","
  • \\"http://i.imgur.com/Ic0M9zd.gif\\"MRW my one-night-stand\'s parents barge in her room at 6 this morning asking if I\'m going to join them all for breakfast.
    • ","
  • \\"http://i.imgur.com/EUvUOvO.gif\\"Her reaction when she agrees to shower sex.
    • ","
  • \\"http://i.imgur.com/3YTp4Dz.jpg\\"Saw this and thought you guys needed to hear it.
    • ","
  • \\"https://i.imgur.com/udFDGbn.jpg\\"Answer me
    • ","
  • \\"http://i.imgur.com/I27Z42s.gif\\"My friend\'s longtime boyfriend left her yesterday. I stayed up with her all night playing old video games. When she put in Street Fighter 2, she said \\"I kinda suck at this, but don\'t let me win.\\" I didn\'t.
    • ","
  • \\"http://i.imgur.com/R12XL.gif\\"MRW I email my professor asking for a copy of the study guide and instead he sends me the test itself
    • ","
  • \\"http://i.imgur.com/EgqnRyp.gif\\"MRW My friend says, seriously, \\"Men can\'t be raped by a woman because they always want it.\\"
    • ","
  • \\"http://i.imgur.com/lMOGzs4.gif\\"MRW I finally make a girl orgasm with my penis
    • ","
  • \\"http://i.imgur.com/RkpIXTI.jpg\\"MRW I get all dressed up for a nice night with my GF, but we end up fighting all night
    • ","
  • \\"http://i.imgur.com/oZGhrUR.gif\\"MRW I\'m a 20 year-old student getting coffee with a cute girl, and I find out her ex is an attractive, 28 year-old, French millionaire
    • ","
  • \\"http://i.imgur.com/ChzUb.jpg?fb\\"HIF when a girl in Tinder is actually talking to me for more than a day
    • ","
  • \\"http://i.imgur.com/gWX8uwh.gif\\"MRW my landlord tells me that my roommate paid less than a third of her share of the rent
    • ","
  • \\"http://i.imgur.com/1nm2Fjh.gif\\"MRW I made my girlfriend squirt for the first time.
    • ","
  • \\"http://i.imgur.com/9N5deOY.gif\\"MRW the girls over at TrollX are swapping sex tips and do\'s/don\'t with each other
    • ","
  • \\"http://i.imgur.com/hCz04ct.jpg\\"When I\'m cooking next to my brother who has a degree in culinary arts
    • ","
  • \\"http://i.imgur.com/ioKFHYp.gif\\"MRW my gf comes over, ever since she confessed that me cooking for her turns her on.
    • ","
  • \\"http://i.imgur.com/ykWckDV.jpg\\"MRW when my girlfriend told me to go deeper..
    • ","
  • \\"http://i.imgur.com/9VvSvgn.jpg\\"They understand our struggle
    • ","
  • \\"http://i.imgur.com/JoXSTet.jpg\\"MRW I ask the girl I\'ve been talking to if she wants to watch all 3 Jurassic Park movies then go see the new one and she says \'Why would you want to watch movies with some dumb dinosaurs in it? You\'re 21, that\'s little kid stuff.\'
    • ","
  • \\"http://i.imgur.com/EcGElua.gif\\"When girls write \\"I love to laugh\\" on their dating profiles
    • ","
  • \\"https://media.giphy.com/media/SmGLzevndqQX6/giphy.gif\\"MRW I\'m walking into Starbucks feeing a little blue and a woman walking out with her coffee says, \\"I love your outfit! Just your whole ensemble!\\"
    • ","
  • \\"http://images.fineartamerica.com/images/artworkimages/mediumlarge/1/mr-joseph-blue-pulaski-nicholas-grunas.jpg\\"Naked women can get thousands of up votes, how many upvotes can my boy Blue get?
    • ","
  • \\"http://i.imgur.com/9LStPkz.jpg\\"Her: \\"It\'s not a rag, it\'s a dish towel!\\" Me: \\"Yeah, it sounds like you\'re on the \'dish towel\'...\\"
    • ","
  • \\"http://i.imgur.com/gPBuAgl.gif\\"HIFW I\'m meeting the new hires at work for the first time
    • ","
  • \\"http://i.imgur.com/OffEJTR.gif\\"MRW the spider near my desk starts letting bugs get all over the place
    • "]'; 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | galNum & galFly · mcdlr 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 |
    17 |

    galNum & galFly

    18 | Bookmarklets for creating image galleries on the fly 19 |
    20 |
    21 | 22 | 23 |
    24 |
    25 |

    galNum Bookmarklet

    26 | galNum 27 | To “install” this bookmarklet, just drag the big link above to your Bookmarks Toolbar. Voilà! 28 | 29 |

    There are a lot of images on the internet that follow a numeric progression. If there's an autumn-wallpaper-001.jpg there probably is an autumn-wallpaper-002.jpg and even more.

    30 |

    With galNum you can easily create a gallery of images that follow a numeric progression pattern.

    31 |
      32 |
    1. 33 | 1 34 |
      35 |

      First, “install” the bookmarklet above. Now, when you serendipitously find an image that you think is part of a set, click on the galNum bookmarklet

      36 |
      37 |
      38 | galNum step 1 39 |
      40 |
      2. 41 |
    2. 42 | 2 43 |
      44 |

      Now you'll be presented with the URL with its numbers highlighted. In this case we think the progression happens at the 001 part, so we click it!

      45 |
      46 |
      47 | galNum step 2 48 |
      49 |
      3. 50 |
    3. 51 | 3 52 |
      53 |

      We can select where to start from (by default this is filled with the same number we clicked) and we can select how many images at a time we want to see (by default 25)

      54 |

      The default settings are generally fine, but we can change them if we want. Now click on go!

      55 |
      56 |
      57 | galNum step 3 58 |
      59 |
      4. 60 |
    4. 61 | 4 62 |
      63 |

      The gallery is generated! We see 25 images and we can click on load more at the bottom to see more. Eventually there will be no more images, but the script will still try to generate them. It's our human job to just quit it and do something else :)

      64 |

      Refer to Common Features to know more about navigation and zooming.

      65 |
      66 |
      67 | galNum step 4 68 |
      69 |
      5. 70 |
    71 |
    72 |
    73 | 74 | 75 |
    76 |
    77 |

    galFly Bookmarklet

    78 | galFly 79 | To “install” this bookmarklet, just drag the big link above to your Bookmarks Toolbar. Voilà! 80 | 81 |

    In some cases you just find a lot of links that point to images! No number progression to analyze, just the raw links there for us to partake. Classically you would have to open these links in new tabs one by one, but with galFly we can just create a gallery right where we are!

    82 |
      83 |
    1. 84 | 1 85 |
      86 |

      First, “install” the bookmarklet above. Now, when you serendipitously find an index or page with lots of links to images, click on galFly

      87 |
      88 |
      89 | galFly step 1 90 |
      91 |
      2. 92 |
    2. 93 | 2 94 |
      95 |

      That's it! The gallery generates showing us 25 images at a time (in this case this setting is not modifiable, unless you change the code)

      96 |

      You can use galFly in any site that has links that point to images to get a gallery instantly.

      97 |

      Refer to Common Features to know more about navigation and zooming.

      98 |
      99 |
      100 | galFly step 2 101 |
      102 |
      3. 103 |
    104 |
    105 |
    106 | 107 | 108 |
    109 |
    110 |

    Common features

    111 | Common features for galNum & galFly 112 |
      113 |
    1. 114 | 1 115 |
      116 |

      Move from image to image using the controls at the bottom left, or you can also use j and k

      117 |
      118 |
      2. 119 |
    2. 120 | 2 121 |
      122 |

      Zoom the current image with the magnifying glass, or by clicking on the image, or by pressing l

      123 |
      124 |
      3. 125 |
    3. 126 | 3 127 |
      128 |

      When you've scrolled to the end, you can load more images. In the case of galNum, this is infinite and you have to apply judgment sparingly. In the case of galFly you will find a point where instead of Load more you'll find a reddish block. That means there's nothing more to see here :)

      129 |
      130 |
      4. 131 |
    4. 132 | 4 133 |
      134 |

      Click on the lightbulb to change the background color (white, grey or black)

      135 |
      136 |
      5. 137 |
    138 |
    139 |
    140 | 141 | 142 |
    143 |
    144 |

    The code

    145 |

    All the code for these bookmarklets is open source and you can check it on Github

    146 |

    If you are interested in modifying the code in any way, there is a handy build script for that. Check the readme file for more info on that.

    147 |

    Keep in mind that when you use a bookmarklet, you are willingly executing javascript code on your browser. Check the code to make sure everything is legit and ask your doctor in case of palpitations or insomnia.

    148 |

    Done with a lotta love ♥ by DrummerHead, you can find me on Twitter

    149 |
    150 |
    151 | 152 | 153 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | --------------------------------------------------------------------------------