angular-super-gallery

    2.1.11 • Public • Published

    AngularJS Super Gallery

    Image gallery based on AngularJS and Bootstrap 4. (for Bootstrap 3 switch to the bootstrap3 branch)

    npm GitHub issues Build Status npm

    Maintainability Rating Security Rating Vulnerabilities Bugs

    Preview

    preview or check /demo/index.html

    angular-super-gallery-screenshot-1 angular-super-gallery-screenshot-2

    Dependencies

    {
        "angular": "1.8.0",
        "angular-animate": "1.8.0",
        "angular-touch": "1.8.0",
        "bootstrap": "4.5.0",
        "font-awesome": "4.7.0",
        "jquery": "3.5.1",
        "screenfull": "5.0.2"
    }

    Features

    • separated Angular components (image, modal, thumbnail, panel, info and control)
    • highly configurable
    • image display modes (cover, contain, auto, stretch)
    • multiple image sizes : thumbnail (for panel) , medium (for image), original (for modal)
    • responsive and 4 built-in themes
    • 13 image transitions (CSS3 3D)
    • configurable keyboard shortcuts in modal window
    • events (config load, image load, modal open/close, autoplay, update, etc.)
    • placeholder image and loading animation
    • touch support (swipe)

    Install

    • npm install --save angular-super-gallery or yarn add angular-super-gallery

    Setup

    import 'bootstrap/dist/css/bootstrap.min.css';
    import 'angular-super-gallery/dist/angular-super-gallery.css';
    import 'jquery';
    import 'angular';
    import 'bootstrap';
    import 'angular-animate';
    import 'angular-touch';
    import 'screenfull';
    import angularSuperGallery from 'angular-super-gallery';
    
    angular.module("app", [angularSuperGallery]);

    Quick usage in HTML

    <asg-image
           data-options='{"baseUrl" : "https://wallpaperscraft.com/image/"}'
           data-items='[
            "porsche_panamera_rear_view_white_auto_96846_1920x1080.jpg",
            "subaru_brz_subaru_cars_sunset_93895_1920x1080.jpg"
           ]'>
        <asg-modal>
            <asg-thumbnail></asg-thumbnail>
        </asg-modal>
    </asg-image>

    Advanced usage

    setup in controller

    this.showModal = false;
    this.nature1Options = {
        baseUrl: "https://",
        fields: {
            source: {
                modal: "link",
                image: "medium",
                panel: "thumbnail"
            }
        },
        modal: {
            transition: 'zoomInOut'
        },
        panel: {
            thumbnail: {
                class: "col-md-4"
            },
        },
        image: {
            transition: 'fadeInOut'
        }
    };
    this.nature1 = [
        {
            "link": "wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_1920x1080.jpg",
            "thumbnail": "i1.wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_300x188.jpg",
            "medium": "i1.wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_602x339.jpg",
        }, {
            "link": "wallpaperscraft.com/image/summer_mountains_nature_lake_river_grass_93164_1920x1080.jpg",
            "thumbnail": "i1.wallpaperscraft.com/image/summer_mountains_nature_lake_river_grass_93164_300x188.jpg",
            "medium": "i1.wallpaperscraft.com/image/summer_mountains_nature_lake_river_grass_93164_602x339.jpg",
        }
    ];

    in HTML

    <asg-image data-id="nature" data-options="ctrl.nature1Options" data-items="ctrl.nature1">
        <asg-thumbnail></asg-thumbnail>
        <asg-modal data-visible="ctrl.showModal"></asg-modal>
    </asg-image>
    <asg-panel data-id="nature"></asg-panel>

    or (without thumbnails)

    <asg-image data-options="ctrl.nature1Options" data-items="ctrl.nature1">
        <asg-modal data-visible="ctrl.showModal"></asg-modal>
    </asg-image>

    Available options

        debug: false, // image load, autoplay, etc. info in console.log
        hashUrl: true, // enable/disable hash usage in url (#asg-nature-4)
        baseUrl: '', // url prefix
        duplicates: false, // enable or disable same images (url) in gallery
        selected: 0, // selected image on init
        fields: {
            source: {
                modal: 'url', // required, image url for modal component (large size)
                panel: 'url', // image url for panel component (thumbnail size)
                image: 'url', // image url for image (medium or custom size)
                placeholder: null // image url for preload lowres image
            },
            title: 'title', // title field name
            description: 'description', // description field name
        },
        autoplay: {
            enabled: false, // slideshow play enabled/disabled
            delay: 4100 // autoplay delay in millisecond
        },
        theme: 'default', // css style [default, darkblue, darkred, whitegold]
        preloadNext: false, // preload next image (forward/backward)
        preloadDelay: 770, // preload delay for preloadNext
        loadingImage: 'preload.svg', // loader image
        preload: [], // preload images by index number
        modal: {
            title: '', // modal window title
            subtitle: '', // modal window subtitle
            titleFromImage: false, // force update the gallery title by image title
            subtitleFromImage: false, // force update the gallery subtitle by image description
            placeholder: 'panel', // set image placeholder source type (thumbnail) or full url (http...)
            caption: {
                disabled: false, // disable image caption
                visible: true, // show/hide image caption
                position: 'top', // caption position [top, bottom]
                download: false // show/hide download link
            },
            header: {
                enabled: true, // enable/disable modal menu
                dynamic: false, // show/hide modal menu on mouseover
                buttons: ['playstop', 'index', 'prev', 'next', 'pin', 'size', 'transition', 'thumbnails', 'fullscreen', 'help', 'close'],
            },
            help: false, // show/hide help
            arrows: {
                enabled: true, // show/hide arrows
                preload: true, // preload image on mouseover
            },
            click: {
                close: true // when click on the image close the modal
            },
            thumbnail: {
                height: 50, // thumbnail image height in pixel
                index: false, // show index number on thumbnail
                enabled: true, // enable/disable thumbnails
                dynamic: false, // if true thumbnails visible only when mouseover
                autohide: true, // hide thumbnail component when single image
                click: {
                    select: true, // set selected image when true
                    modal: false // open modal when true
                },
                hover: {
                    preload: true, // preload image on mouseover
                    select: false // set selected image on mouseover when true
                },
            },
            transition: 'slideLR', // transition effect
            transitionSpeed: 0.7, // transition speed 0.7s
            size: 'cover', // contain, cover, auto, stretch
            keycodes: {
                exit: [27], // esc
                playpause: [80], // p
                forward: [32, 39], // space, right arrow
                backward: [37], // left arrow
                first: [38, 36], // up arrow, home
                last: [40, 35], // down arrow, end
                fullscreen: [13], // enter
                menu: [77], // m
                caption: [67], // c
                help: [72], // h
                size: [83], // s
                transition: [84] // t
            }
        },
        thumbnail: {
            height: 50, // thumbnail image height in pixel
            index: false, // show index number on thumbnail
            dynamic: false, // if true thumbnails visible only when mouseover
            autohide: false, // hide thumbnail component when single image
            click: {
                select: true, // set selected image when true
                modal: false // open modal when true
            },
            hover: {
                preload: true, // preload image on mouseover
                select: false // set selected image on mouseover when true
            },
        },
        panel: {
            visible: true,
            item: {
                class: 'col-md-3', // item class
                caption: false, // show/hide image caption
                index: false, // show/hide image index
            },
            hover: {
                preload: true, // preload image on mouseover
                select: false // set selected image on mouseover when true
            },
            click: {
                select: false, // set selected image when true
                modal: true // open modal when true
            },
        },
        image: {
            transition: 'slideLR', // transition effect
            transitionSpeed: 0.7, // transition speed 0.7s
            size: 'cover', // contain, cover, auto, stretch
            arrows: {
                enabled: true,  // show/hide arrows
                preload: true, // preload image on mouseover
            },
            click: {
                modal: true // when click on the image open the modal window
            },
            height: null, // height in pixel
            heightMin: null, // min height in pixel
            heightAuto: {
                initial: true, // calculate div height by first image
                onresize: false // calculate div height on window resize
            },
            placeholder: 'panel' // set image placeholder source type (thumbnail) or full url (http...)
        }

    Edit

    Add new image or images to the gallery by id

    $rootScope.$broadcast('ASG-gallery-edit', {
        id: 'nature',
        add: [{
            "link": "wallpaperscraft.com/image/tree_fog_nature_beautiful_84257_1920x1080.jpg",
            "thumbnail": "images.wallpaperscraft.com/image/tree_fog_nature_beautiful_84257_300x168.jpg",
            "medium": "images.wallpaperscraft.com/image/tree_fog_nature_beautiful_84257_960x544.jpg",
        }]
    });

    Update gallery options and set selected image

        $rootScope.$broadcast('ASG-gallery-edit', {
            id: 'nature',
            selected: 0,
            options: this.options1
        });

    Reload gallery images

        $rootScope.$broadcast('ASG-gallery-edit', {
            id: 'nature',
            refresh: true
        });

    Delete image

        $rootScope.$broadcast('ASG-gallery-edit', {
            id: 'nature',
            delete: null // index number or null for delete selected image
        });

    Update gallery images

        $rootScope.$broadcast('ASG-gallery-edit', {
            id: 'nature',
            update: ['image1url', 'image2url', {source: {image: 'image3url', title: 'image3title'}}]; // use image url or object
        });

    Transitions

    • no
    • fadeInOut
    • zoomIn
    • zoomOut
    • zoomInOut
    • rotateLR
    • rotateTB
    • rotateZY
    • slideLR
    • slideTB
    • zlideLR
    • zlideTB
    • flipX
    • flipY

    Default keyboard shortcuts in modal window

    • RIGHT / SPACE : forward
    • LEFT : backward
    • UP / HOME : first
    • DOWN / END : last
    • ESC : exit
    • ENTER : toggle fullscreen
    • p : play/pause
    • t : change transition effect
    • m : toggle menu
    • s : toggle image size
    • c : toggle caption
    • h : toggle help

    Events

    • CONFIG_LOAD: ASG-config-load-[gallery id],
    • AUTOPLAY_START: ASG-autoplay-start-[gallery id],
    • AUTOPLAY_STOP: ASG-autoplay-stop-[gallery id],
    • PARSE_IMAGES: ASG-parse-images-[gallery id],
    • FIRST_IMAGE: ASG-first-image-[gallery id],
    • LOAD_IMAGE: ASG-load-image-[gallery id],
    • CHANGE_IMAGE: ASG-change-image-[gallery id],
    • MODAL_OPEN: ASG-modal-open-[gallery id],
    • MODAL_CLOSE: ASG-modal-close-[gallery id],
    • THUMBNAIL_MOVE: ASG-thumbnail-move-[gallery id],

    Build

    • Node.js 12 recommended
    • npm install
    • gulp dev
    • gulp prod (minified javascript and css file)
    • gulp watch (automatic build under development)

    Todo

    • Vimeo video player [WIP]
    • slideshow mode (fullscreen, hide menu and arrows, start autoplay)
    • indicator component
    • theme color setup
    • remove caption from modal and add asg-info
    • control component custom buttons
    • header component with controls = modal header?
    • fix info component image width and height data
    • exit button must be visible on modal when menubar hidden
    • load images and config from API endpoint
    • add edit mode (upload, delete, rename, etc.) for admin page
    • options and info menu in modal
    • image zoom / drag / rotate
    • image info (original width and height / bytes)
    • preloader svg fix in Microsoft Edge (or fix Edge :)
    • remember website hash and set back when modal closed?

    Photos

    unsplash.com

    License

    MIT

    Install

    npm i angular-super-gallery

    DownloadsWeekly Downloads

    124

    Version

    2.1.11

    License

    MIT

    Unpacked Size

    2.17 MB

    Total Files

    104

    Last publish

    Collaborators

    • schanpm