angular-xGallerify

AngularJS directive for jquery.xGallerify
1 person uses it
Submitted by: 6803264?v=4 JohnnyTheTank

angular-xGallerify

AngularJS directive for jquery.xGallerify

Demos

Usage

  1. Install
    1. via bower: bower install --save angular-xGallerify
    2. via downloaded files
  2. Add jtt_angular_xgallerify to your application's module dependencies.
  3. Include dependencies in your HTML.
    1. When using bower <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/xGallerify/dist/jquery.xgallerify.min.js"></script>
    2. When using downloaded files <script src="YOUR_PATH/jquery.min.js"></script> <script src="YOUR_PATH/angular.min.js"></script> <script src="YOUR_PATH/jquery.xgallerify.min.js"></script>
  4. Use the directive xgallerify as html attribute

Sample

<div xgallerify> <img src="http://placehold.it/600x400"> <img src="http://placehold.it/600x320"> <img src="http://placehold.it/600x320"> <img src="http://placehold.it/600x400"> <img src="http://placehold.it/600x600"> <img src="http://placehold.it/600x400"> <img src="http://placehold.it/600x600"> <img src="http://placehold.it/600x400"> <img src="http://placehold.it/600x400"> <img src="http://placehold.it/600x600"> <img src="http://placehold.it/600x320"> <img src="http://placehold.it/600x400"> <img src="http://placehold.it/600x400"> </div>

Parameters

Set your xGallerify parameters like this: <div xgallerify="{ 'margin':10, 'mode':'bootstrap' }"> </div>

All parameters

Get the full list of parameters at the original project page: jquery.xGallerify

Compatibility

<div xgallerify> </div> is equal to <div data-xgallerify> </div>

Dependencies

comments powered by Disqus
This page was last updated almost 3 years ago.