Nocturnal Pajama Mutants

    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    Responsive Image Gallery

    Responsive image gallery that supports category system for web and mobile browsers. For more information you can take a look at the demo: Demo


    npm install --save-dev responsive-image-gallery


    You can simply import Responsive Image Gallery and create a new object.

    import Gallery from 'responsive-image-gallery';
    const gallery = new Gallery({
        el: '#gallery'

    You can also add the script file into your html.

    <script src="/node_modules/responsive-image-gallery/dist/responsive-image-gallery.min.js"></script>
    var gallery = new ResponsiveImageGallery({
        el: '#gallery'
        <ul id="bar">
            <li category="*">ALL</li>
            <li category="abstract">Abstract</li>
            <li category="space">Space</li>
        <div id="gallery”>
            <img src="abstract01.jpg" category="abstract" />
            <img src="space01.jpg" category="space" />
            <img src="abstract02.jpg" category="abstract" />
            <img src="space02.jpg" category="space" />
            <img src="abstract03.jpg" category="abstract" />
            <img src="space03.jpg" category="space" />
    <script src="/node_modules/responsive-image-gallery/dist/responsive-image-gallery.min.js"></script>
    var gallery = new Gallery({
        el: '#gallery',
        bar: '#bar'



    Option Type Default Description
    el string | HTMLElement* null Container element.
    bar string | HTMLElement* null Bar element.
    active string “*” Specifies the initial active category.
    timing string “ease” Specifies the speed curve of an animation. Takes all the values CSS3 can take. (like ease, linear, cubic-bezier, step)
    duration number 500 Defines how long an animation should take to complete one cycle. (as milliseconds)
    minWidth number 250 Specifies the minimum width of a gallery element.
    maxWidth number 500 Specifies the maximum width of a gallery element.
    height number 80 Sets the height according to the width. (as percent)
    horizontalSpace number 10 Specifies the horizontal space between gallery elements.
    verticalSpace number 10 Specifies the vertical space between gallery elements.
    overflow boolean false Allows elements to overflow if the container element's width is smaller than minWidth.
    grid boolean true Enables grid view.

    *: You can give an HTML element or a CSS selector (like #gallery, .container > div:first-child)


    Method Params Return Description
    get string Returns the active category.
    set category: string, animate: boolean void Sets the active category.
    getTiming string Returns timing value.
    setTiming timing:string void Sets timing value.
    getDuration number Returns duration.
    setDuration duration:number void Sets duration.
    destroy void Destroys the gallery.

    IE Support

    IE 10 is not supported and patches to fix problems will not be accepted.


    Responsive Image Gallery is provided under the MIT License.

    Related Projects


    npm i responsive-image-gallery

    DownloadsWeekly Downloads






    Unpacked Size

    76 kB

    Total Files


    Last publish


    • cevadtokatli