https://github.com/jaywink/photo-gallery

Drop in page photo gallery web component made with Vue.
https://github.com/jaywink/photo-gallery

photo-gallery vue webcomponent

Last synced: 3 months ago
JSON representation

Drop in page photo gallery web component made with Vue.

• Host: GitHub
• URL: https://github.com/jaywink/photo-gallery
• Owner: jaywink
• License: mit
• Created: 2018-12-26T23:52:59.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-03-02T20:40:42.000Z (over 6 years ago)
• Last Synced: 2025-02-09T02:17:56.079Z (5 months ago)
• Topics: photo-gallery, vue, webcomponent
• Language: Vue
• Homepage: https://git.feneas.org/jaywink/photo-gallery
• Size: 435 KB
• Stars: 1
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Photo Gallery - Vue web component

Drop in page photo gallery web component made with Vue.

![](screenshot.png)

By default renders one random image and 5 thumbnails. The large image and random images are clickable, opening a [lightbox image viewer](https://github.com/am283721/vue-my-photos), allowing full-screen browsing of the images (including keyboard support).

## Usage

Requires [ImageMagick](https://www.imagemagick.org/) and Python 3 to be found on the system to process the images.

Collect a bunch of JPG/PNG images in a folder somewhere.

Run `./make_thumbs.sh ` to generate thumbnails.

Run `./make_manifest.py` to generate the manifest.

The processed images will be found in `images/`.

Upload the contents of `images` folder (including `_thumb` and `_medium` folders, and the `manifest.json` file inside) to a folder on your server served by the web server.

Upload the `dist/photo-gallery.js` script to the server in to a place where it can be reached from.

Include the component by loading the following on your site. Correct the path to `photo-gallery.js` as needed.

    

    

Add the component to your site HTML as follows:

    

    

By default the component will look for images in `/images` so if you upload them there, no `images-dir` needs to be set. Note, `images-dir` can also refer to an URL, though your browser will most likely block CORS requests cross-domain.

### Configuration

**images-dir**

Path or URL to the images folder which also includes the manifest and processsed medium and thumb sized files (see above). Defaults to `/images/`.

Example: ``

**hide-main-image**

By default a medium size large image will be shown. Pass "true" to hide the main image and just render thumbs.

Example: ``

**thumbs-count**

Controls how many thumbnails to render. Defaults to 5.

Example: ``

## Development

Install Node 10.

Run NPM install.

Do awesome changes.

Compile:

    node_modules/.bin/vue build -t wc PhotoGallery.vue

### Preview

In another shell, have `python3 -m http.server` running in the root of the project.

Collect some images in a folder, then run:

    ./make_thumbs.sh 

    ./make_manifest.py

Compile the component.

Open a web browser at `http://localhost:8000/dist/demo.html`

## Licence

MIT

## Author

Jason Robinson / https://jasonrobinson.me / @jaywink:feneas.org