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 installtypings installgulp devgulp 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