AngularJS directive for jquery.xGallerify
- Simple demo
- Dynamic demo (pictures from twitter) - based on apiNG
- Install via either bower, npm or downloaded files:
- via bower:
bower install --save angular-xGallerify
- via npm:
npm install --save angular-xgallerify
- via CDN (jsDelivr)
- via downloaded files
- via bower:
- Add
jtt_angular_xgallerify
to your application's module dependencies. - Include dependencies and angular-xGallerify in your HTML.
- When using bower
<!-- dependencies --> <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> <!-- angular-xGallerify --> <script src="bower_components/angular-xGallerify/dist/angular-xgallerify.min.js"></script>
- When using npm
<!-- dependencies --> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/angular/angular.min.js"></script> <script src="node_modules/xgallerify/dist/jquery.xgallerify.min.js"></script> <!-- angular-xGallerify --> <script src="node_modules/angular-xgallerify/dist/angular-xgallerify.min.js"></script>
- When using CDN (jsDelivr)
<!-- dependencies --> <script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="//cdn.jsdelivr.net/jquery.xgallerify/latest/jquery.xgallerify.min.js"></script> <!-- angular-xGallerify --> <script src="//cdn.jsdelivr.net/angular.xgallerify/latest/angular-xgallerify.min.js"></script>
- When using downloaded files
<!-- dependencies --> <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> <!-- angular-xGallerify --> <script src="YOUR_PATH/angular-xgallerify.min.js"></script>
- Use the directive
xgallerify
as html attribute
<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>
Angular event to manually re-balance all triggered elements use angular-xGallerify.refresh
//dispatches the event upwards through the scope hierarchy
$scope.$emit('angular-xGallerify.refresh');
//dispatches the event downwards to all child scopes
$scope.$broadcast('angular-xGallerify.refresh');
Set your xGallerify parameters like this:
<div xgallerify="{ 'margin':10, 'mode':'bootstrap' }">
</div>
Get the full list of parameters at the original project page: jquery.xGallerify
<div xgallerify>
</div>
is equal to
<div data-xgallerify>
</div>
MIT