ngModal_with_gallery

AngularJS Modal Directive - Simple and highly customizable modal with photo gallery support.
0 people use it
Author: 5711821?v=3 thatisuday

ngModal ☛ : Preview

AngularJS Modal Directive - Simple and highly customizable modal with image Gallery support.

Install

Using bower

Manual install

Required files

ngModal.js and ngModal.css

Dependencies

AngularJS get here and animate.css get here

Include order (inside <head><head/>)

Configure app

Directive

Code structure

modalOptions, modalControls, modalCallbacks and galleryImages are models (json objects) bound to controller scope ($scope).

All above models attributes are optional.

Options

Modal options can be set at two levels.

1. Config directive options provider

2. Using modalOptions model

If you see Directive Code Structure above, you can see options attribute with value modalOptions. modalOptions is a model that must be bound to parent scope which provides options for your modal. For example, $scope.modalOptions = {bla:bleh,...}

| Option | Ex. value | What it does? | | --------------------- |------------- | -------------- | | closable | true | Modal can be closed by clicking on modal backdrop | compactClose | false | Modal close button will be placed at right-top corder of modal body | fullscreen | false | Modal body will take entire browser viewport | closeIcon | '_cross_icon' | Close button icon class, ex. fa fa-times | flat | 'forest' | Flat background color of modal. Try these options red, lynch, brown, orange, amber, yellow, pear, forest, green, persian_green, egg_blue, cerulean_cerulean, dodger_blue, san_marino, purple, seance, smaranth, pomegranate | width | '700px' | Width of modal body | height | '400px' | Height of modal body | padding | '20px 30px' | Padding of modal body | borderRadius | '3px' | Border radius of modal body | backdrop | 'rgba(0,0,0,0.75)' | Backdrop background color | background | '#fff' | Background color of modal body | zIndex | '9999' | z-index of modal, useful in case of multiple modals | animation | true | Animate modal entrance and exit (if set to false, below options will not work) | animDropIn | 'fadeIn' | Animate.css class for modal backdrop entrance (when modal opens) | animDropOut | 'fadeOut' | Animate.css class for modal backdrop exit (when modal closes) | animBodyIn | 'zoomIn' | Animate.css class for modal body entrance (when modal opens) | animBodyOut | 'fadeOut' | Animate.css class for modal body exit (when modal closes)

Extra options for Image Gallery

| Option | Ex. value | What it does? | | --------------------- |------------- | -------------- | | prevIcon | '_prev_icon' | icon class for previous image button | nextIcon | '_next_icon' | icon class for next image button | thumbs | true | Show thumbnails for modal gallery | thumbsLength | 300 | Duration of above animation (in milliseconds) | animImage | 'fadeIn' | Animate.css animation class for image load

Example $scope.modalOptions = { closable : true, closeIcon : 'ion-close-circled', width:'600px', height:'auto' };

Controls (Methods)

If you see Directive Code Structure above, you can see controls attribute with value modalControls. modalControls is a model that must be bound to parent scope which provides a gateway to control model actions. For example, //In view <button ng-click="modalControls.open();">Open Modal</button> <button ng-click="modalControls.close();">Close Modal</button> AND/OR //In controller $scope.modalControls = {}; $scope.modalControls.open();

| Method | Arguments | What it does? | | --------------------- |------------- | -------------- | | open | none | Opens the model | close | none | Closes the model | getStates | none | Returns model states json object (ex. {isTouched:false, isOpened:false, isClosed:true})

Extra methods for Image Gallery

| Method | Arguments | What it does? | | --------------------- |------------- | -------------- | | nextImage | none | Load next image in gallery | prevImage | none | Load prev image in gallery | showImage | index (interger) | Show image at index position in gallery. index[0 - images.length]

Events (Callbacks)

If you see Directive Code Structure above, you can see callbacks attribute with value modalCallbacks. modalCallbacks is a model that must be bound to parent scope which feeds callback methods to be executed after some event occurs. For example,

| Callback | When it fires? | | ---------------------- |---------------- | | onOpen | When modal opens | onClose | When modal closes

onOpen and OnClose callbacks can also execute functions from inline on-open and on-close attributes, see Directive Code Structure above. For example, //In controller $scope.modalOnOpen = function(){ console.log('Modal opened. Inline callback.'); } $scope.modalOnClose = function(){ console.log('Modal closed. Inline callback.'); }

Extra callbacks for Image Gallery

| Callback | When it fires? | | ---------------------- |---------------- | | onPrev | When previous button is clicked | onPrevDone | When previous image is loaded | onNext | When next button is clicked | onNextDone | When next image is loaded

Gallery (Gallery images)

If you see Directive Code Structure above, you can see gallery attribute with value galleryImages. galleryImages is a model that must be bound to parent scope which feeds images to the gallery. For example,

Please check Preview of gallery. Open developers console to see what's going on.

Video (Embed)

If you see Directive Code Structure above, you can see video attribute with value {{videoEmbedUrl}}. videoEmbedUrl is a model that must be a string. You can also add raw embed url string like for example <div ng-modal controls="modalControls" video="https://www.youtube.com/embed/c7nRTF2SowQ"></div>

Best practices

  1. Modals can be opened on top of each other. But use zIndex option to put them on top of each other else they will be shown in order of their DOM appearances.
  2. You can nest modal inside other. Nested modal will have backdrop inside parent modal. You must give proper width and height to child modal. Also set compactClose option to true else close button will not show up for child modal. You should avoid nesting gallery modals.
  3. Play with Animate.css but do not add exit animation-class like zoomOut in entry animation-class option like animBodyIn.
  4. Use flat option for Flat UI modal, set borderRadius option to 0px for good UI. backdrop, compactClose options will be useless in this case.

Complaints & Contribute

Create an issue and mention your commits there. Don't take a fork.

comments powered by Disqus
This page was last updated about 1 year ago.