Notorious Penguin Magicians
    Wondering what’s next for npm?Check out our public roadmap! »

    @qrac/darkbox-gallery

    1.0.0 • Public • Published

    Darkbox jQuery Gallery

    Simple, minimal, responsive jQuery Pop-up Gallery!


    Info:

    Open your thumbnails into a responsive popup gallery!
    DEMO on jsFiddle.net

    Getting started

    jQuery library, darkbox.js and darkbox.css must be included in your project.

    <link href="darkbox.css" rel="stylesheet" type="text/css">
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="darkbox.min.js"></script>

    (Preferably place your <script>s right before he closing </body> tag.)

    Use exaple / samples:

    Basic example

    darkbox can be called by any element, all it needs is a data-darkbox with a valid image URL

    <a data-darkbox="http://placehold.it/100x101/ff0">View image</a>

    Thumbnail calling darkbox

    <img src="http://placehold.it/50x50/f0f"
         data-darkbox="http://placehold.it/800x600/f0f"
         data-darkbox-description="<b>Title</b><br>Lorem ipsum dolor sit amet">

    Tips: insert any text or HTML into data-darkbox-description to add a slide description.

    Groups

    If you want to want to group a set of images use data-darkbox-group="groupName" like:

    <img
         src="http://placehold.it/50x50/0bf"      
         data-darkbox="http://placehold.it/800x600/0bf"
         data-darkbox-group="two"
         data-darkbox-description="<b>Title</b><br>Lorem ipsum dolor sit amet">
    <img
         src="http://placehold.it/50x50/f0b"
         data-darkbox="http://placehold.it/800x600/f0b"
         data-darkbox-group="two"
         data-darkbox-description="<b>Image 2</b><br>Description text...">

    Tips: Multiple thumbnails without a data-darkbox-group will open each separately.
    Darkbox as Group features PREV / NEXT buttons and a Stat Counter.

    Calling a group

    If you don't need visible thumbnails but you want a single element to call a Group:

    <span data-darkbox-group="group2" data-darkbox="http://placehold.it/800x600/f00"></span>
    <span data-darkbox-group="group2" data-darkbox="http://placehold.it/600x800/00f"></span>
    <a data-darkbox-group="group2">Open group2</a>

    Install

    npm i @qrac/darkbox-gallery

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    161 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar