Angularjs Image Gallery – Angular Super Image Gallery
In this post we will show you how to use Angularjs Image Gallery with demo and example. A feature-rich, touch-enabled image gallery component for Angular.
Advantages for Angularjs Image Gallery
- isolated precise parts (modular, board and picture)
- numerous setup alternatives
- full responsive (under settling)
- wide and fit picture show mode
- numerous picture sizes/thumbnail (for board) , medium (for picture), unique (for modular)
- 3 worked in topics
- 9 picture moves (CSS3 3D)
- configurable console easy routes in modular window (keyCodes)
- touch bolster
Install for Angularjs Image Gallery
// install gallery npm install --save angular-super-gallery // bower gallery bower install --save angular-super-gallery // CommonJS for gallery webpack (CommonJS) supported
in Controller for Angularjs Image Gallery
// show Modal this.showModal = false; // set urls this.nature1Optionsgalary = { // set base Url baseUrl: "http://", // set fields fields: { // set source source: { modal: "link", image: "medium", : "thumbnail" } }, // set modal modal: { wide: true, transition: 'zoomInOut' }, // set panel panel: { // set thumbnail for image thumbnail: { class: "col-md-4 divs" }, }, // set image image: { // set transition for image transition: 'fadeInOut' } }; this.galarynature1 = [ { "link": "onlinecode/wp-content/uploads/2017/05/Angular-Super-Image-Gallery-example.jpg", "thumbnail": "onlinecode/wp-content/uploads/2017/05/Angular-Super-Image-Gallery-example.jpg", "medium": "onlinecode/wp-content/uploads/2017/05/Angular-Super-Image-Gallery-example.jpg", }, { "link": "honlinecode/wp-content/uploads/2017/05/Angular-Super-Image-Gallery-example.jpg", "thumbnail": "onlinecode/wp-content/uploads/2017/05/Angular-Super-Image-Gallery-example.jpg", "medium": "onlinecode/wp-content/uploads/2017/05/Angular-Super-Image-Gallery-example.jpg", } ];
HTML for Angularjs Image Gallery
<!-- set image gallery --> <asg-image data-id="nature"></asg-image> <!-- set image gallery options --> <asg-panel data-id="nature" data-options="ctrl.nature1Optionsgalary" data-items="ctrl.galarynature1"></asg-panel> <!-- set image gallery options Modal --> <asg-modal data-id="nature" data-visible="ctrl.showModal"></asg-modal>
How to Build Angularjs Image Gallery
npm install
typings install
gulp dev
gulp prod
(minified css file and javascript )
what Todo
- fix responsive read
- angular element for img
- image zoom / drag / rotate
- transitions fix in Microsoft Edge
- image data (original dimension and height / bytes)
- image preload fix
- rotateLR transition fix in Firefox on mack (or someone fix the Firefox 😉
- publish package to npm (webpack support)
- angular element for controls (play/stop/next/prev)
- exit button should be visible on modal once menubar hidden
Default keyboard shortcuts in modal window for Angularjs Image Gallery
- F / ENTER : toggle fullscreen
- H : toggle facilitate
- RIGHT / area : forward
- C : toggle caption
- ESC : exit
- M : toggle menu
- LEFT : backward
- W : toggle projection screen
- UP / HOME : initial
- DOWN / finish : last
- P : play/pause
Transitions for Angularjs Image Gallery
- slideTB
- no
- flipY
- fadeInOut
- rotateTB
- zoomInOut
- flipX
- slideLR
- rotateLR
- rotateZY
You also like google recaptcha using javascript and google recaptcha using php