Angular Super Image Gallery


Angular Super Image Gallery:

A feature-rich, touch-enabled image gallery component for Angular.

Features of Image Gallery

  • separated angular components (modal, panel and image)
  • many configuration options
  • full responsive (under fixing)
  • wide and fit image display mode
  • multiple image sizes / thumbnail (for panel) , medium (for image), original (for modal)
  • 3 built-in themes
  • 9 image transitions (CSS3 3D)
  • configurable keyboard shortcuts in modal window
  • touch support

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

Setup Angular Super Image Gallery

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]);

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
  • 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-,
  • AUTOPLAY_START: ASG-autoplay-start-,
  • AUTOPLAY_STOP: ASG-autoplay-stop-,
  • PARSE_IMAGES: ASG-parse-images-,
  • FIRST_IMAGE: ASG-first-image-,
  • LOAD_IMAGE: ASG-load-image-,
  • CHANGE_IMAGE: ASG-change-image-,
  • MODAL_OPEN: ASG-modal-open-,
  • MODAL_CLOSE: ASG-modal-close-,
  • THUMBNAIL_MOVE: ASG-thumbnail-move-,

Build

  • yarn install or npm install
  • typings install
  • gulp dev
  • gulp prod (minified javascript and css file)
  • gulp watch (automatic build under development)

Todo

  • 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
  • indicator component
  • load images and config from API endpoint
  • add edit mode (upload, delete, rename, etc.) for admin page
  • slideshow mode (fullscreen, hide menu and arrows, start autoplay)
  • 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 🙂

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",
    }]
});

For More Jquery Plugins Click

Read More | Demo | Download


 

Leave a Reply

Your email address will not be published. Required fields are marked *