{"id":22466974,"url":"https://github.com/schalkt/angular-super-gallery","last_synced_at":"2025-08-02T07:31:17.318Z","repository":{"id":20422021,"uuid":"89878884","full_name":"schalkt/angular-super-gallery","owner":"schalkt","description":"AngularJS super image gallery","archived":false,"fork":false,"pushed_at":"2025-05-14T07:03:42.000Z","size":6012,"stargazers_count":50,"open_issues_count":0,"forks_count":17,"subscribers_count":6,"default_branch":"develop","last_synced_at":"2025-07-14T09:55:42.265Z","etag":null,"topics":["angular","angularjs","autoplay","fullscreen","gallery","image-gallery","modal","thumbnails","transition","transitions","typescript"],"latest_commit_sha":null,"homepage":"https://projects.schalk.hu/angular-super-gallery/demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/schalkt.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-04-30T21:39:34.000Z","updated_at":"2025-05-14T07:03:36.000Z","dependencies_parsed_at":"2023-01-13T20:58:09.404Z","dependency_job_id":"2887808b-3e22-484b-9ad7-f641edc2b8e9","html_url":"https://github.com/schalkt/angular-super-gallery","commit_stats":{"total_commits":228,"total_committers":7,"mean_commits":32.57142857142857,"dds":0.0964912280701754,"last_synced_commit":"158a1a3f10a898b2b4dc33a56092a6fc0d76be11"},"previous_names":[],"tags_count":85,"template":false,"template_full_name":null,"purl":"pkg:github/schalkt/angular-super-gallery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schalkt%2Fangular-super-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schalkt%2Fangular-super-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schalkt%2Fangular-super-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schalkt%2Fangular-super-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/schalkt","download_url":"https://codeload.github.com/schalkt/angular-super-gallery/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schalkt%2Fangular-super-gallery/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268348611,"owners_count":24236297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angularjs","autoplay","fullscreen","gallery","image-gallery","modal","thumbnails","transition","transitions","typescript"],"created_at":"2024-12-06T10:14:47.411Z","updated_at":"2025-08-02T07:31:17.034Z","avatar_url":"https://github.com/schalkt.png","language":"JavaScript","readme":"# AngularJS Super Gallery\n\nImage gallery based on **AngularJS** and **Bootstrap 4**. (for Bootstrap 3 switch to the bootstrap3 branch)\n\n[![npm](https://img.shields.io/npm/dt/angular-super-gallery.svg?style=flat-square)](https://www.npmjs.com/package/angular-super-gallery)\n[![GitHub issues](https://img.shields.io/github/issues/schalkt/angular-super-gallery.svg?style=flat-square)](https://github.com/schalkt/angular-super-gallery/issues)\n[![CodeQL](https://github.com/schalkt/angular-super-gallery/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/schalkt/angular-super-gallery/actions/workflows/codeql-analysis.yml)\n[![npm](https://img.shields.io/npm/v/angular-super-gallery.svg?style=flat-square)](https://www.npmjs.com/package/angular-super-gallery)\n\n[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=schalkt_angular-super-gallery\u0026metric=sqale_rating)](https://sonarcloud.io/dashboard?id=schalkt_angular-super-gallery)\n[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=schalkt_angular-super-gallery\u0026metric=security_rating)](https://sonarcloud.io/dashboard?id=schalkt_angular-super-gallery)\n[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=schalkt_angular-super-gallery\u0026metric=vulnerabilities)](https://sonarcloud.io/dashboard?id=schalkt_angular-super-gallery)\n[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=schalkt_angular-super-gallery\u0026metric=bugs)](https://sonarcloud.io/dashboard?id=schalkt_angular-super-gallery)\n\n## Preview\n\n[![preview](https://img.shields.io/badge/preview-click_here-green.svg?style=flat-square)](https://projects.schalk.hu/angular-super-gallery/demo/) or check /demo/index.html\n\n![angular-super-gallery-screenshot-1](https://projects.schalk.hu/angular-super-gallery/screenshot1.jpg)\n![angular-super-gallery-screenshot-2](https://projects.schalk.hu/angular-super-gallery/screenshot2.jpg)\n\n## Dependencies\n\n```json\n{\n    \"angular\": \"1.8.0\",\n    \"angular-animate\": \"1.8.0\",\n    \"angular-touch\": \"1.8.0\",\n    \"bootstrap\": \"4.5.0\",\n    \"font-awesome\": \"4.7.0\",\n    \"jquery\": \"3.5.1\",\n    \"screenfull\": \"5.0.2\"\n}\n```\n\n## Features\n\n- separated Angular components (image, modal, thumbnail, panel, info and control)\n- highly configurable\n- image display modes (cover, contain, auto, stretch)\n- multiple image sizes : thumbnail (for panel) , medium (for image), original (for modal)\n- responsive and 4 built-in themes\n- 13 image transitions (CSS3 3D)\n- configurable keyboard shortcuts in modal window\n- events (config load, image load, modal open/close, autoplay, update, etc.)\n- placeholder image and loading animation\n- touch support (swipe)\n\n## Install\n\n- `npm install --save angular-super-gallery` or `yarn add angular-super-gallery`\n\n## Setup\n\n```javascript\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport 'angular-super-gallery/dist/angular-super-gallery.css';\nimport 'jquery';\nimport 'angular';\nimport 'bootstrap';\nimport 'angular-animate';\nimport 'angular-touch';\nimport 'screenfull';\nimport angularSuperGallery from 'angular-super-gallery';\n\nangular.module(\"app\", [angularSuperGallery]);\n```\n\n## Quick usage in HTML\n\n```html\n\u003casg-image\n       data-options='{\"baseUrl\" : \"https://wallpaperscraft.com/image/\"}'\n       data-items='[\n        \"porsche_panamera_rear_view_white_auto_96846_1920x1080.jpg\",\n        \"subaru_brz_subaru_cars_sunset_93895_1920x1080.jpg\"\n       ]'\u003e\n    \u003casg-modal\u003e\n        \u003casg-thumbnail\u003e\u003c/asg-thumbnail\u003e\n    \u003c/asg-modal\u003e\n\u003c/asg-image\u003e\n```\n\n## Advanced usage\n\nsetup in controller\n\n```javascript\nthis.showModal = false;\nthis.nature1Options = {\n    baseUrl: \"https://\",\n    fields: {\n        source: {\n            modal: \"link\",\n            image: \"medium\",\n            panel: \"thumbnail\"\n        }\n    },\n    modal: {\n        transition: 'zoomInOut'\n    },\n    panel: {\n        thumbnail: {\n            class: \"col-md-4\"\n        },\n    },\n    image: {\n        transition: 'fadeInOut'\n    }\n};\nthis.nature1 = [\n    {\n        \"link\": \"wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_1920x1080.jpg\",\n        \"thumbnail\": \"i1.wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_300x188.jpg\",\n        \"medium\": \"i1.wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_602x339.jpg\",\n    }, {\n        \"link\": \"wallpaperscraft.com/image/summer_mountains_nature_lake_river_grass_93164_1920x1080.jpg\",\n        \"thumbnail\": \"i1.wallpaperscraft.com/image/summer_mountains_nature_lake_river_grass_93164_300x188.jpg\",\n        \"medium\": \"i1.wallpaperscraft.com/image/summer_mountains_nature_lake_river_grass_93164_602x339.jpg\",\n    }\n];\n```\n\nin HTML\n\n```html\n\u003casg-image data-id=\"nature\" data-options=\"ctrl.nature1Options\" data-items=\"ctrl.nature1\"\u003e\n    \u003casg-thumbnail\u003e\u003c/asg-thumbnail\u003e\n    \u003casg-modal data-visible=\"ctrl.showModal\"\u003e\u003c/asg-modal\u003e\n\u003c/asg-image\u003e\n\u003casg-panel data-id=\"nature\"\u003e\u003c/asg-panel\u003e\n```\n\nor (without thumbnails)\n\n```html\n\u003casg-image data-options=\"ctrl.nature1Options\" data-items=\"ctrl.nature1\"\u003e\n    \u003casg-modal data-visible=\"ctrl.showModal\"\u003e\u003c/asg-modal\u003e\n\u003c/asg-image\u003e\n\n```\n\n## Available options\n\n```javascript\n    debug: false, // image load, autoplay, etc. info in console.log\n    hashUrl: true, // enable/disable hash usage in url (#asg-nature-4)\n    baseUrl: '', // url prefix\n    duplicates: false, // enable or disable same images (url) in gallery\n    selected: 0, // selected image on init\n    fields: {\n        source: {\n            modal: 'url', // required, image url for modal component (large size)\n            panel: 'url', // image url for panel component (thumbnail size)\n            image: 'url', // image url for image (medium or custom size)\n            placeholder: null // image url for preload lowres image\n        },\n        title: 'title', // title field name\n        description: 'description', // description field name\n    },\n    autoplay: {\n        enabled: false, // slideshow play enabled/disabled\n        delay: 4100 // autoplay delay in millisecond\n    },\n    theme: 'default', // css style [default, darkblue, darkred, whitegold]\n    preloadNext: false, // preload next image (forward/backward)\n    preloadDelay: 770, // preload delay for preloadNext\n    loadingImage: 'preload.svg', // loader image\n    preload: [], // preload images by index number\n    modal: {\n        title: '', // modal window title\n        subtitle: '', // modal window subtitle\n        titleFromImage: false, // force update the gallery title by image title\n        subtitleFromImage: false, // force update the gallery subtitle by image description\n        placeholder: 'panel', // set image placeholder source type (thumbnail) or full url (http...)\n        caption: {\n            disabled: false, // disable image caption\n            visible: true, // show/hide image caption\n            position: 'top', // caption position [top, bottom]\n            download: false // show/hide download link\n        },\n        header: {\n            enabled: true, // enable/disable modal menu\n            dynamic: false, // show/hide modal menu on mouseover\n            buttons: ['playstop', 'index', 'prev', 'next', 'pin', 'size', 'transition', 'thumbnails', 'fullscreen', 'help', 'close'],\n        },\n        help: false, // show/hide help\n        arrows: {\n            enabled: true, // show/hide arrows\n            preload: true, // preload image on mouseover\n        },\n        click: {\n            close: true // when click on the image close the modal\n        },\n        thumbnail: {\n            height: 50, // thumbnail image height in pixel\n            index: false, // show index number on thumbnail\n            enabled: true, // enable/disable thumbnails\n            dynamic: false, // if true thumbnails visible only when mouseover\n            autohide: true, // hide thumbnail component when single image\n            click: {\n                select: true, // set selected image when true\n                modal: false // open modal when true\n            },\n            hover: {\n                preload: true, // preload image on mouseover\n                select: false // set selected image on mouseover when true\n            },\n        },\n        transition: 'slideLR', // transition effect\n        transitionSpeed: 0.7, // transition speed 0.7s\n        size: 'cover', // contain, cover, auto, stretch\n        keycodes: {\n            exit: [27], // esc\n            playpause: [80], // p\n            forward: [32, 39], // space, right arrow\n            backward: [37], // left arrow\n            first: [38, 36], // up arrow, home\n            last: [40, 35], // down arrow, end\n            fullscreen: [13], // enter\n            menu: [77], // m\n            caption: [67], // c\n            help: [72], // h\n            size: [83], // s\n            transition: [84] // t\n        }\n    },\n    thumbnail: {\n        height: 50, // thumbnail image height in pixel\n        index: false, // show index number on thumbnail\n        dynamic: false, // if true thumbnails visible only when mouseover\n        autohide: false, // hide thumbnail component when single image\n        click: {\n            select: true, // set selected image when true\n            modal: false // open modal when true\n        },\n        hover: {\n            preload: true, // preload image on mouseover\n            select: false // set selected image on mouseover when true\n        },\n    },\n    panel: {\n        visible: true,\n        item: {\n            class: 'col-md-3', // item class\n            caption: false, // show/hide image caption\n            index: false, // show/hide image index\n        },\n        hover: {\n            preload: true, // preload image on mouseover\n            select: false // set selected image on mouseover when true\n        },\n        click: {\n            select: false, // set selected image when true\n            modal: true // open modal when true\n        },\n    },\n    image: {\n        transition: 'slideLR', // transition effect\n        transitionSpeed: 0.7, // transition speed 0.7s\n        size: 'cover', // contain, cover, auto, stretch\n        arrows: {\n            enabled: true,  // show/hide arrows\n            preload: true, // preload image on mouseover\n        },\n        click: {\n            modal: true // when click on the image open the modal window\n        },\n        height: null, // height in pixel\n        heightMin: null, // min height in pixel\n        heightAuto: {\n            initial: true, // calculate div height by first image\n            onresize: false // calculate div height on window resize\n        },\n        placeholder: 'panel' // set image placeholder source type (thumbnail) or full url (http...)\n    }\n```\n\n## Edit\n\n### Add new image or images to the gallery by id\n\n```javascript\n$rootScope.$broadcast('ASG-gallery-edit', {\n    id: 'nature',\n    add: [{\n        \"link\": \"wallpaperscraft.com/image/tree_fog_nature_beautiful_84257_1920x1080.jpg\",\n        \"thumbnail\": \"images.wallpaperscraft.com/image/tree_fog_nature_beautiful_84257_300x168.jpg\",\n        \"medium\": \"images.wallpaperscraft.com/image/tree_fog_nature_beautiful_84257_960x544.jpg\",\n    }]\n});\n```\n\n### Update gallery options and set selected image\n\n```javascript\n    $rootScope.$broadcast('ASG-gallery-edit', {\n        id: 'nature',\n        selected: 0,\n        options: this.options1\n    });\n```\n\n### Reload gallery images\n\n```javascript\n    $rootScope.$broadcast('ASG-gallery-edit', {\n        id: 'nature',\n        refresh: true\n    });\n```\n\n### Delete image\n\n```javascript\n    $rootScope.$broadcast('ASG-gallery-edit', {\n        id: 'nature',\n        delete: null // index number or null for delete selected image\n    });\n```\n\n### Update gallery images\n\n```javascript\n    $rootScope.$broadcast('ASG-gallery-edit', {\n        id: 'nature',\n        update: ['image1url', 'image2url', {source: {image: 'image3url', title: 'image3title'}}]; // use image url or object\n    });\n```\n\n## Transitions\n\n- no\n- fadeInOut\n- zoomIn\n- zoomOut\n- zoomInOut\n- rotateLR\n- rotateTB\n- rotateZY\n- slideLR\n- slideTB\n- zlideLR\n- zlideTB\n- flipX\n- flipY\n\n## Default keyboard shortcuts in modal window\n\n- RIGHT / SPACE : forward\n- LEFT : backward\n- UP / HOME : first\n- DOWN / END : last\n- ESC : exit\n- ENTER : toggle fullscreen\n- p : play/pause\n- t : change transition effect\n- m : toggle menu\n- s : toggle image size\n- c : toggle caption\n- h : toggle help\n\n## Events\n\n- CONFIG_LOAD: `ASG-config-load-[gallery id]`,\n- AUTOPLAY_START: `ASG-autoplay-start-[gallery id]`,\n- AUTOPLAY_STOP: `ASG-autoplay-stop-[gallery id]`,\n- PARSE_IMAGES: `ASG-parse-images-[gallery id]`,\n- FIRST_IMAGE: `ASG-first-image-[gallery id]`,\n- LOAD_IMAGE: `ASG-load-image-[gallery id]`,\n- CHANGE_IMAGE: `ASG-change-image-[gallery id]`,\n- MODAL_OPEN: `ASG-modal-open-[gallery id]`,\n- MODAL_CLOSE: `ASG-modal-close-[gallery id]`,\n- THUMBNAIL_MOVE: `ASG-thumbnail-move-[gallery id]`,\n\n## Build\n\n- Node.js 12 recommended\n- `npm install`\n- `npm run dev`\n- `npm run prod` (minified javascript and css file)\n- `npm run watch` (automatic build under development)\n\n## Todo\n\n- Vimeo video player [WIP]\n- slideshow mode (fullscreen, hide menu and arrows, start autoplay)\n- indicator component\n- theme color setup\n- remove caption from modal and add asg-info\n- control component custom buttons\n- header component with controls = modal header?\n- fix info component image width and height data\n- exit button must be visible on modal when menubar hidden\n- load images and config from API endpoint\n- add edit mode (upload, delete, rename, etc.) for admin page\n- options and info menu in modal\n- image zoom / drag / rotate\n- image info (original width and height / bytes)\n- preloader svg fix in Microsoft Edge (or fix Edge :)\n- remember website hash and set back when modal closed?\n\n## Photos\n\n[unsplash.com](https://unsplash.com/)\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fschalkt%2Fangular-super-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fschalkt%2Fangular-super-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fschalkt%2Fangular-super-gallery/lists"}