{"id":15508342,"url":"https://github.com/tinesoft/ng-juxtapose","last_synced_at":"2025-04-23T02:21:27.176Z","repository":{"id":34595906,"uuid":"38543507","full_name":"tinesoft/ng-juxtapose","owner":"tinesoft","description":"AngularJS directive for JuxtaposeJS, a JavaScript library for making before/after image sliders.","archived":false,"fork":false,"pushed_at":"2016-03-06T13:35:22.000Z","size":6347,"stargazers_count":8,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-19T23:11:53.092Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://tinesoft.github.io/ng-juxtapose","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tinesoft.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-04T18:24:04.000Z","updated_at":"2023-03-07T03:56:32.000Z","dependencies_parsed_at":"2022-09-11T07:01:09.636Z","dependency_job_id":null,"html_url":"https://github.com/tinesoft/ng-juxtapose","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinesoft%2Fng-juxtapose","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinesoft%2Fng-juxtapose/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinesoft%2Fng-juxtapose/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinesoft%2Fng-juxtapose/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tinesoft","download_url":"https://codeload.github.com/tinesoft/ng-juxtapose/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250354803,"owners_count":21416788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-02T09:37:36.862Z","updated_at":"2025-04-23T02:21:27.146Z","avatar_url":"https://github.com/tinesoft.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"ng-juxtapose [![Build Status](https://travis-ci.org/tinesoft/ng-juxtapose.svg)](https://travis-ci.org/tinesoft/ng-juxtapose)[![devDependency Status](https://david-dm.org/tinesoft/ng-juxtapose/dev-status.svg)](https://david-dm.org/tinesoft/ng-juxtapose#info=devDependencies)\n===========================================================================================================================================\n\nAngularJS directive for [JuxtaposeJS](https://juxtapose.knightlab.com/), a JavaScript library for making before/after image sliders.\n\nDemo: http://tinesoft.github.io/ng-juxtapose\n\n### Installation\n\nUsing bower:\n\n```\n$ bower install ng-juxtapose --save\n```\n\nUsing npm:\n\n```\n$ npm install ng-juxtapose --save\n```\n\n### How to use it\n\nng-juxtapose depends on [JustaposeJS](https://github.com/NUKnightLab/juxtapose) library (the dependency should be automatically installed by bower/npm).\n\n1. Add a link to the **Juxtapose CSS** in the ```\u003chead\u003e``` section of your index.html file , as such:\n\n```\n\u003clink href=\"path/to/juxtapose.css\" rel=\"stylesheet\"\u003e\n```\n\n2. Add reference to  **JustaposeJS** and Angular scripts:\n\n```\n\u003cscript type=\"text/javascript\" src=\"path/to/juxtapose.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"path/to/angular.min.js\"\u003e\u003c/script\u003e\n```\n\n3. Add a reference to the ng-juxtapose script:\n\n```\n\u003cscript type=\"text/javascript\" src=\"path/to/ng-juxtapose.min.js\"\u003e\u003c/script\u003e\n```\n\n4. Inject `ngJuxtapose` in your application module:\n\n```\nangular.module('myApp', ['ngJuxtapose']);\n```\n\nand then just add an `juxtapose` tag, for example:\n\n```\n\u003cjuxtapose\n\tbefore-image-url=\"'http://online.wsj.com/media/LIONDOORA.jpg'\" \n\tafter-image-url=\"'http://online.wsj.com/media/LIONDOOR_2A.jpg'\"\u003e\n\u003c/juxtapose\u003e\n```\n\n### Options\n\n##### Directive Options:\n\n\u003e The **before image** refers to the image on the left (resp. on top) in case of **vertical** (resp. **horizontal**) orientation.\n\n\u003e The **after image** refers to the image on the right (resp. at the bottom) in case of **vertical** (resp. **horizontal**) orientation.\n\n* `before-image-url` : the URL to the before image\n* `before-image-label` : the label of the before image (displayed on top of the image)\n* `before-image-credit` : the credit for the before image (displayed as overlay, below the 2 images)\n* `before-image-alt` : the alternate  text  (`alt`) for the before image\n\n* `after-image-url` : the URL to the after image\n* `after-image-label` : the label of the after image (displayed as overlay, on top of the image)\n* `after-image-credit` : the credit for the after image (displayed below the 2 images)\n* `after-image-alt` : the alternate  text  (`alt`) for the after image\n\n\nExample with some above features:\n\n```\n\u003cjuxtapose \n\tbefore-image-url=\"'http://online.wsj.com/media/LIONDOORA.jpg'\" before-image-label=\"'Maidan square in 2009'\" before-image-credit=\"'WSJ'\"\n\tafter-image-url=\"'http://online.wsj.com/media/LIONDOOR_2A.jpg'\" after-image-label=\"'Maidan square in 2014'\" after-image-credit=\"\"\u003e\n\u003c/juxtapose\u003e\n```\n\n##### Config Options:\n\n* `starting-position` : the slider start position (default is `50%`, at the middle of the two images)\n* `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`)\n* `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`)\n* `animate` : If `true`, the divider will glide to the point where someone clicks; otherwise, it will jump (default is `true`)\n* `vertical` : If `true`, the divider will move vertically instead of horizontally (default is `true`)\n\nThese options can be configured globally for all your `juxtapose` directives, by using the **juxtaposeConfigProvider**, in the `config` section of your app.\n\nExample:\n\n```\nangular.module('yourApp', [])\n\t.config(['juxtaposeConfigProvider', function(juxtaposeConfigProvider){\n\n\t\tjuxtaposeConfigProvider.setStartingPosition('80%');\n\t\tjuxtaposeConfigProvider.setShowLabels(false);\n\t\t//...set other properties here\n\n\t}]);\n```\n\nThey 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**!.\n\nExample:\n\n```\n\u003cjuxtapose  starting-position=\"45%\"  show-credits=\"false\" animate=\"false\" vertical=\"false\"\n\tbefore-image-url=\"'http://online.wsj.com/media/LIONDOORA.jpg'\" before-image-label=\"'Maidan square in 2009'\" before-image-credit=\"'WSJ'\"\n\tafter-image-url=\"'http://online.wsj.com/media/LIONDOOR_2A.jpg'\" after-image-label=\"'Maidan square in 2014'\" after-image-credit=\"\"\u003e\n\u003c/juxtapose\u003e\n\n```\n### Build\n\nYou can run the tests by cloning the repo and then (inside the project folder) running\n\n```\n$ npm install\n$ bower install\n$ grunt watch\n```\n\nassuming you already have `grunt` installed, otherwise you also need to do:\n\n```\n$ npm install -g grunt-cli\n```\n\n### License\n\nCopyright (c) 2015 Tine Kondo. Licensed under the MIT License (MIT)\n\n\n### Thanks To\n\nJuxtaposeJS 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](http://www.twitter.com/asduner/). This plugin is built on top of his great work. So thanks to him!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinesoft%2Fng-juxtapose","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinesoft%2Fng-juxtapose","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinesoft%2Fng-juxtapose/lists"}