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

// 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

Leave a Comment

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

6  +  2  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US