Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
ng-juxtapose
Advanced tools
Changelog
1.0.2 (2016-03-05)
<a name"1.0.1"></a>
Readme
AngularJS directive for JuxtaposeJS, a JavaScript library for making before/after image sliders.
Demo: http://tinesoft.github.io/ng-juxtapose
Using bower:
$ bower install ng-juxtapose --save
Using npm:
$ npm install ng-juxtapose --save
ng-juxtapose depends on JustaposeJS library (the dependency should be automatically installed by bower/npm).
<head>
section of your index.html file , as such:<link href="path/to/juxtapose.css" rel="stylesheet">
<script type="text/javascript" src="path/to/juxtapose.min.js"></script>
<script type="text/javascript" src="path/to/angular.min.js"></script>
<script type="text/javascript" src="path/to/ng-juxtapose.min.js"></script>
ngJuxtapose
in your application module:angular.module('myApp', ['ngJuxtapose']);
and then just add an juxtapose
tag, for example:
<juxtapose
before-image-url="'http://online.wsj.com/media/LIONDOORA.jpg'"
after-image-url="'http://online.wsj.com/media/LIONDOOR_2A.jpg'">
</juxtapose>
The before image refers to the image on the left (resp. on top) in case of vertical (resp. horizontal) orientation.
The after image refers to the image on the right (resp. at the bottom) in case of vertical (resp. horizontal) orientation.
before-image-url
: the URL to the before image
before-image-label
: the label of the before image (displayed on top of the image)
before-image-credit
: the credit for the before image (displayed as overlay, below the 2 images)
before-image-alt
: the alternate text (alt
) for the before image
after-image-url
: the URL to the after image
after-image-label
: the label of the after image (displayed as overlay, on top of the image)
after-image-credit
: the credit for the after image (displayed below the 2 images)
after-image-alt
: the alternate text (alt
) for the after image
Example with some above features:
<juxtapose
before-image-url="'http://online.wsj.com/media/LIONDOORA.jpg'" before-image-label="'Maidan square in 2009'" before-image-credit="'WSJ'"
after-image-url="'http://online.wsj.com/media/LIONDOOR_2A.jpg'" after-image-label="'Maidan square in 2014'" after-image-credit="">
</juxtapose>
starting-position
: the slider start position (default is 50%
, at the middle of the two images)show-labels
: indicates if image labels must be displayed. You must have labels for both images, or they won't be shown, even if true
is set (default is true
)show-credits
: indicates if image credits must be displayed below the slider. You must have credits for both images, or they won't be shown, even if true
is set (default is true
)animate
: If true
, the divider will glide to the point where someone clicks; otherwise, it will jump (default is true
)vertical
: If true
, the divider will move vertically instead of horizontally (default is true
)These options can be configured globally for all your juxtapose
directives, by using the juxtaposeConfigProvider, in the config
section of your app.
Example:
angular.module('yourApp', [])
.config(['juxtaposeConfigProvider', function(juxtaposeConfigProvider){
juxtaposeConfigProvider.setStartingPosition('80%');
juxtaposeConfigProvider.setShowLabels(false);
//...set other properties here
}]);
They can also be set directly on each directive as DOM attributes. In this case, the values specified in the DOM take precedence over the ones from the config!.
Example:
<juxtapose starting-position="45%" show-credits="false" animate="false" vertical="false"
before-image-url="'http://online.wsj.com/media/LIONDOORA.jpg'" before-image-label="'Maidan square in 2009'" before-image-credit="'WSJ'"
after-image-url="'http://online.wsj.com/media/LIONDOOR_2A.jpg'" after-image-label="'Maidan square in 2014'" after-image-credit="">
</juxtapose>
You can run the tests by cloning the repo and then (inside the project folder) running
$ npm install
$ bower install
$ grunt watch
assuming you already have grunt
installed, otherwise you also need to do:
$ npm install -g grunt-cli
Copyright (c) 2015 Tine Kondo. Licensed under the MIT License (MIT)
JuxtaposeJS is one of a series of tools for content creators produced by the Northwestern University Knight Lab. It was created by Medill student Alex Duner. This plugin is built on top of his great work. So thanks to him!
FAQs
AngularJS directive for JuxtaposeJS, a JavaScript library for making before/after image sliders.
The npm package ng-juxtapose receives a total of 48 weekly downloads. As such, ng-juxtapose popularity was classified as not popular.
We found that ng-juxtapose demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.