Never Punch Manticores

    digirati-manifest-cabinet

    1.0.6 • Public • Published

    Manifest cabinet

    npm version

    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/digirati-dragon@1.0.1/umd/main.1f473ac9.css" />
    <!-- At the bottom of the page -->
    <script type="application/javascript" src="//unpkg.com/digirati-manifest-cabinet@1.0.0/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.

    Keywords

    none

    Install

    npm i digirati-manifest-cabinet

    DownloadsWeekly Downloads

    15

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    60.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • stephenwf