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.org/wp-content/uploads/2017/05/Angular-Super-Image-Gallery-example.jpg",
  		"thumbnail": "onlinecode.org/wp-content/uploads/2017/05/Angular-Super-Image-Gallery-example.jpg",
  		"medium": "onlinecode.org/wp-content/uploads/2017/05/Angular-Super-Image-Gallery-example.jpg",
  	}, {
  		"link": "honlinecode.org/wp-content/uploads/2017/05/Angular-Super-Image-Gallery-example.jpg",
  		"thumbnail": "onlinecode.org/wp-content/uploads/2017/05/Angular-Super-Image-Gallery-example.jpg",
  		"medium": "onlinecode.org/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