Angularjs Image Gallery – Angular Super Image Gallery

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.

Read More Demo Download

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

[php]
// install gallery
npm install –save angular-super-gallery
// bower gallery
bower install –save angular-super-gallery
// CommonJS for gallery
webpack (CommonJS) supported
[/php]

in Controller :

[php]
// 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”: “itsolutionstuck/wp-content/uploads/2017/05/Angular-Super-Image-Gallery-example.jpg”,
“thumbnail”: “itsolutionstuck/wp-content/uploads/2017/05/Angular-Super-Image-Gallery-example.jpg”,
“medium”: “itsolutionstuck/wp-content/uploads/2017/05/Angular-Super-Image-Gallery-example.jpg”,
}, {
“link”: “hitsolutionstuck/wp-content/uploads/2017/05/Angular-Super-Image-Gallery-example.jpg”,
“thumbnail”: “itsolutionstuck/wp-content/uploads/2017/05/Angular-Super-Image-Gallery-example.jpg”,
“medium”: “itsolutionstuck/wp-content/uploads/2017/05/Angular-Super-Image-Gallery-example.jpg”,
}
];
[/php]

HTML for Angularjs Image Gallery

[php]

[/php]

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

• 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