1gallery 中文文档教程
1gallery
Online Demo
Usage :
有关示例，请参阅演示源代码。
需要 node.js。
在您的项目根目录中，在 cli 中：
npm install --save-dev 1gallery ejs
在您的 ejs 解析文件中，当您想要插入 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>
您可以使用 css 类来在图库范围 或卡片范围 上自定义 1 图库行为。
Gallery class :
可缩放：添加全屏模式和相关图标。
autoplay-[1-999]s：每 [0-999] 秒自动转到下一张幻灯片
banner：横幅样式画廊（高度：150 像素）
splash< /strong> : splash style gallery (height : 100vh)
PS : 你可以使用 css 覆盖任何默认的 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：对于一些奇怪的 html 幻灯片用例，您可以在同一张卡片上使用 ratio 和 cover。
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.
