Manifest 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 forward
• prev - moves back
• reset - moves to first slide
• fullscreenToggle - toggles pseudo-fullscreen mode.