# media-showcase
> A simple UI component for showcasing images or videos with the best UX for each device
Latest version **1.0.1** (published 2020-12-11) · ISC license · 0 weekly downloads
## Install
```sh
npm install media-showcase
pnpm add media-showcase
yarn add media-showcase
bun add media-showcase
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-12-11 |
| First published | 2020-12-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Alex Florisca |
| Maintainers | alexflorisca |
## Links
- npm: https://www.npmjs.com/package/media-showcase
- Repository: https://github.com/alexflorisca/showcase
- Homepage: https://github.com/alexflorisca/showcase#readme
- Issues: https://github.com/alexflorisca/showcase/issues
- npm.io page: https://npm.io/package/media-showcase
## Recent versions
- 1.0.1 (latest) — 2020-12-11
- 1.0.0 — 2020-12-11
## README
# Showcase
Showcase helps you display a bunch of images in the most optimum way on all devices. A slideshow on small screens, add some thumbnails on bigger screeens and a grid of images on evern bigger screens. Because why hide all your fancy images if you don't have to.
## Usage
Markup your html as follows, include the showcase.css and showcase.js (or showcase.min.js) and initialise
```html
...
...
```
## Options
**`breakpoints`** - Array(2). 2 breakpoints for mobile - tablet and tablet - desktop thresholds
**`thumbPosition`** - String('bottom' | 'right' | 'left') - Where should the thumbnails live relative to the main image?
## Why?
Born out of frustration with Shopify themes. While making some small changes to an existing theme, I found that the product image gallery was pulling in 2 different slideshow libraries, both dependent on jQuery of course. Chuck in different sets of markup for desktop and mobile and hundreds of lines of CSS and you've got a payload that's about 250kb - just to display some images.
Fuck that.
I also couldn't find a really simple slider that just works, without a crazy ton of options and customization. So I built Showcase.
## What?
Here's the manifesto:
- Provide the best UX for showcasing something on any device
- Encourage best practice through minimum options
- Accessible
- Fast & small (no slide transitions on purpose!)
- Support modern browsers only (last 2 versions). No support for IE.
### Minimal config
Design and UX decisions are based on user research, best practices and optimisations to converts users into customers. There are only 2 configuration options on purpose. But you can hack at it as you wish of course.
### Accessible
The demo markup includes best practices for accessibility. You can also focus on the slideshow and tap left and right arrows to navigate through it.
### Fast & Small
Performance was a key driver for this project, so I'm keeping it purposefully small and include only the bare essentials
showcase.min.js ~ **2.3kb** gziped
showcase.min.css ~ **1.7kb** gzipped
### Modern browsers
Works in all modern browsers and web views. Nobody uses IE anymore (https://caniuse.com/usage-table). 1.42% are on IE11 and Microsoft is trying hard to get people off it. So no polyfills, no hacks, just clean code.
---
_Source: https://npm.io/package/media-showcase · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
