This commit is contained in:
Arsen Mirzaev Tatyano-Muradovich 2025-06-30 22:33:47 +07:00
parent 3230cfb9d0
commit bd578b5294

View File

@ -1,3 +1,35 @@
# gallery.mjs
Module for creating galleries with re-ordering
Module for creating galleries with re-ordering
## Example
```html
<section id="wrap">
<label for="images" class="unselectable">
Choose images
<input id="images" type="file" name="images" accept="image/png, image/jpeg, image/webp" multiple="true" onchange="document.getElementById('wrap')?.gallery.import(this.files)" />
</label>
<button id="reset" onclick="document.getElementById('wrap')?.gallery.ascending()">Reset</button>
<label id="loader" for="images" class="unselectable">Empty</label>
<div id="gallery"></div>
<span id="order" class="unselectable">Order:</div>
</section>
```
```js
import("/js/modules/gallery.mjs").then((module) => {
// Initializing the instance
const instance = new module.gallery(
document.getElementById("wrap"),
document.getElementById("images"),
document.getElementById("gallery"),
true
);
});
```
CSS in the `/index.css` file
## Demonstration
### [CodePen](https://codepen.io/mirzaev-sexy/pen/RNPdYvv)<br><br>
![CodePen preview](preview/1.png)
![CodePen preview](preview/2.gif)