/galNum-galFly

Bookmarklets for creating image galleries on the fly

Primary LanguageHTMLOtherNOASSERTION

galNum & galFly

This project generates two bookmarklets that make viewing images on the internet easier.

For a description and "installation" of these bookmarklets, check http://mcdlr.com/galNum-galFly/ (or index.html in this project)

Dependencies

  • Ruby
  • Node

On project root run:

mkdir dist temp .tmp
npm install -g gulp-cli
npm install

Development

The two bookmarklets share CSS and JS, namely

  • src/_gal-ui.scss
  • src/node_modules/gal-ui.js

And then each bookmarklet has its specific code at

  • src/galFly
  • src/galNum

Running local versions

For galFly:

gulp serve:fly

For galNum

gulp serve:num

Files

They both share a similar file structure, explained below

bookmarklet.js

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.

Also you will find seemingly interpolated information in the form of {{html}}, this is used in the "compiling" process by make.rb

index.html

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.

Other forms of interpolation are present also to be changed by make.rb to make resources inline for the bookmarklet.

main.js

Specific bookmarklet code. It requires selector and gal-ui shared code

main.scss

Specific bookmarklet styling. It @imports _gal-ui.scss shared code.

stringified.js (only for galFly)

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.

Generate

After making your changes you can generate the new versions with

./make.rb

And following the instructions