1gallery

0.0.8 • Public • Published

1gallery

Online Demo

Usage :

For examples, see demo source code.

Require node.js.

In your project root, in cli :

npm install --save-dev 1gallery ejs

In your ejs parsed files when you want insert a 1gallery :

<%
const galleryOptions = 'banner zoomable autoplay-5s'
const exampleCards = [];
exampleCards.push(`<section class="card cover"><h1><center>A full size card/slide</center></h1></section>`);
exampleCards.push(`<img class="card" src="img/1forma-tic-fond-ecran.png"/>`);
%>
<%- include('../PATH_TO/node_modules/1gallery/1gallery.ejs',{cards:exampleCards,classes:galleryOptions}); %>

<link rel="stylesheet" href="../PATH_TO/node_modules/1gallery/1gallery.css"/>
<script src="../PATH_TO/node_modules/1gallery/1gallery.js"></script>

You can use css class to customize 1gallery behavior on gallery scope or card scope.

Gallery class :

  • zoomable : add fullscreen mode and related icon.

  • autoplay-[1-999]s : automatically go to next slide every [0-999] seconds

  • banner : banner style gallery (height : 150px)

  • splash : splash style gallery (height : 100vh)

PS : you can use css to override any default 1gallery css.

Card class :

  • card : required to let the gallery engine detect each card/slide
  • auto : default resize the card to match screen ratio.
  • cover : extend the card to the gallery size like css object-fit: cover;
  • ratio-[1-9999]-[1-9999] : force card ratio to [1-9999]/[1-9999]. Usefull for photo.

PS : you can use ratio and cover on the same card for some strange html slide use-case.

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
0.0.80latest

Version History

VersionDownloads (Last 7 Days)Published
0.0.80
0.0.70
0.0.60
0.0.51
0.0.40
0.0.30
0.0.20
0.0.10

Package Sidebar

Install

npm i 1gallery

Weekly Downloads

1

Version

0.0.8

License

AGPL-3.0

Unpacked Size

41.7 kB

Total Files

7

Last publish

Collaborators

  • 1000i100