npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ng-juxtapose

v1.0.2

Published

AngularJS directive for JuxtaposeJS, a JavaScript library for making before/after image sliders.

Downloads

181

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

tinesofttinesoft

Keywords

angularjuxtaposecompareimagessliderbeforeafter

Readme

ng-juxtapose Build StatusdevDependency Status

AngularJS directive for JuxtaposeJS, a JavaScript library for making before/after image sliders.

Demo: http://tinesoft.github.io/ng-juxtapose

Installation

Using bower:

$ bower install ng-juxtapose --save

Using npm:

$ npm install ng-juxtapose --save

How to use it

ng-juxtapose depends on JustaposeJS library (the dependency should be automatically installed by bower/npm).

  1. Add a link to the Juxtapose CSS in the <head> section of your index.html file , as such:
<link href="path/to/juxtapose.css" rel="stylesheet">
  1. Add reference to JustaposeJS and Angular scripts:
<script type="text/javascript" src="path/to/juxtapose.min.js"></script>
<script type="text/javascript" src="path/to/angular.min.js"></script>
  1. Add a reference to the ng-juxtapose script:
<script type="text/javascript" src="path/to/ng-juxtapose.min.js"></script>
  1. Inject 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>

Options

Directive Options:

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>
Config Options:
  • 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>

Build

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

License

Copyright (c) 2015 Tine Kondo. Licensed under the MIT License (MIT)

Thanks To

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!