digirati-manifest-cabinet
v1.0.6Manifest cabinet
Usage
To get up and running quickly, you need the following packages on your page.
<!-- At the top of the page -->
<link rel="stylesheet" href="//unpkg.com/[email protected]/umd/main.1f473ac9.css" />
<!-- At the bottom of the page -->
<script type="application/javascript" src="//unpkg.com/[email protected]/umd/digirati-manifest-cabinet.js"></script>
You can use the provided CSS as a starting point and replace it with your own. It's less than ~100 lines.
Basic usage
To add to your page, you need the following structure as a minimum:
<div class="cabinet">
<div class="cabinet__container">
<div class="cabinet__item" tabindex="0">
<img src="..." />
</div>
<div class="cabinet__item" tabindex="0">
<img src="..." />
</div>
<div class="cabinet__item" tabindex="0">
<img src="..." />
</div>
</div>
</div>
Full example
Here is a full example of the mark up with inline comments documenting places to customise.
<!-- The outermost container needs to be positioned relative -->
<div class="cabinet">
<!-- In this container you can put your controls and position them relative to your
your outer container.
-->
<!-- The .cabinet__total class gets populated with the total number of images -->
<h1>Total images: <span class="cabinet__total"></span></h1>
<!-- These two "paddles" are positioned left and right of the image for navigation
The functional piece is the attribute data-cabinet="prev".
All actions have this data attribute.
-->
<div class="cabinet__veneer cabinet__veneer--left" data-cabinet="prev">prev</div>
<!-- This is another example of a functional button that goes back to the
start of the carousel.
-->
<div data-cabinet="reset">reset</div>
<!-- The cabinet container moves. The way the sliding works is to translate the
cabinet container to the left or right depending on the selected image.
The widths are calculated, so you there is no work to make these specific widths.
Padding and styling can be added without breaking this positioning.
It's advised to only put `.cabinet_item` in the container.
-->
<div class="cabinet__container">
<!-- The cabinet item is considered a "selectable" item in the slides -->
<div class="cabinet__item" tabindex="0">
<!--
Each item can contain anything in theory, images are the most likely candidate.
This has been tested to work with deep zoom image viewers. -->
<img src="..." />
</div>
<div class="cabinet__item" tabindex="0">
<img src="..." />
</div>
<div class="cabinet__item" tabindex="0">
<img src="..." />
</div>
</div>
<!-- Another "paddle" that controls the flow externally. -->
<div class="cabinet__veneer cabinet__veneer--right" data-cabinet="next">next</div>
</div>
Custom controls
To create your own buttons you simply attach the data-cabinet
attribute to any HTML element.
You can also use data-cabinet-on
to change the DOM event.
For example:
<a href="#" data-cabinet="reset" data-cabinet-on="doubleclick">Reset</a>
This will only work when double-clicking this anchor tag. There is no requirements for anything other than the data attributes for this to work.
List of events
next
- moves forwardprev
- moves backreset
- moves to first slidefullscreenToggle
- toggles pseudo-fullscreen mode.