Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/peterstaev/nativescript-image-swipe
A NativeScript widget to easily :point_up_2: and :mag: through a list of images
https://github.com/peterstaev/nativescript-image-swipe
android image-swipe ios nativescript swipe tangra ui widget zoom
Last synced: about 1 month ago
JSON representation
A NativeScript widget to easily :point_up_2: and :mag: through a list of images
- Host: GitHub
- URL: https://github.com/peterstaev/nativescript-image-swipe
- Owner: PeterStaev
- License: apache-2.0
- Created: 2017-05-07T12:29:42.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-08-07T13:44:49.000Z (over 5 years ago)
- Last Synced: 2024-10-09T22:04:58.448Z (about 1 month ago)
- Topics: android, image-swipe, ios, nativescript, swipe, tangra, ui, widget, zoom
- Language: TypeScript
- Homepage:
- Size: 6.32 MB
- Stars: 35
- Watchers: 4
- Forks: 21
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
__The author of this plugin will continue to support it in a separate repo exclusively as part of [ProPlugins](https://proplugins.org). This repo will remain supported by the NativeScript community.__
# Contribution - help wanted
This plugin is supported by the NativeScript community. All PRs are welcome but make sure that the demo applications work correctly before creating a new PR. If you do not have an issue you are facing but want to contribute to this plugin you can find a list of the on going issues [here](https://github.com/PeterStaev/nativescript-image-swipe/issues).
## Creating a PR checklist:
- Fork the repo
- Add new functionality or fix an issue and push it to your fork
- Start both demo and demo-ng apps and make sure they work correctly (make sure that no console errors are thrown on both iOS and Android)
- From your fork create a PR targeting the 'master' branch of this repository
Thank you for your contribution.
# NativeScript Image Swipe widget
[](https://travis-ci.org/PeterStaev/nativescript-image-swipe)
[](https://www.npmjs.com/package/nativescript-image-swipe)
[](https://www.npmjs.com/package/nativescript-image-swipe)
[](https://www.npmjs.com/package/nativescript-image-swipe)
A NativeScript widget that will allow you to easily swipe and zoom through a list of images.
## Screenshot
## Installation
Run the following command from the root of your project:
`tns plugin add nativescript-image-swipe`
This command automatically installs the necessary files, as well as stores nativescript-image-swipe as a dependency in your project's package.json file.
## Configuration
There is no additional configuration needed!
## API
### Events
* **pageChanged**
Triggered when the user swipes to the next/previous image in the list.
### Static Properties
* **pageChangedEvent** - *String*
String value used when hooking to pageChanged event.
### Instance Properties
* **ios** - *[UIScrollView](https://developer.apple.com/reference/uikit/uiscrollview)*
Gets the native iOS view that represents the user interface for this component. Valid only when running on iOS.
* **android** - *[android.support.v4.view.ViewPager](https://developer.android.com/reference/android/support/v4/view/ViewPager.html)*
Gets the native android widget that represents the user interface for this component. Valid only when running on Android OS.
* **items** - *Array | ObservableArray*
Gets or sets the items collection of the ImageSwipe. The items property can be set to an array or an object defining length and getItem(index) method.
* **pageNumber** - *Number*
Gets or sets the currently visible image.
* **imageUrlProperty** - *string*
Gets or sets the property inside the items' object that defines the Url from where to load the images
* **allowZoom** - *boolean (default: true)*
Gets or sets whether zoom is enabled
## Usage
You need to add `xmlns:is="nativescript-image-swipe"` to your page tag, and then simply use `` in order to add the widget to your page.
```xml
```
```typescript
// test-page.ts
import { EventData, Observable } from "data/observable";
import { ObservableArray } from "data/observable-array";
import { Page } from "ui/page";
import { PageChangeEventData } from "nativescript-image-swipe";
let viewModel: Observable;
export function navigatingTo(args: EventData) {
const page = args.object as Page;
const items = new ObservableArray();
items.push({ imageUrl: "http://something.com/picture1.jpg" });
items.push({ imageUrl: "http://something.com/picture2.jpg" });
items.push({ imageUrl: "http://something.com/picture3.jpg" });
items.push({ imageUrl: "http://something.com/picture4.jpg" });
items.push({ imageUrl: "http://something.com/picture5.jpg" });
viewModel = new Observable();
viewModel.set("items", items);
viewModel.set("pageNumber", 3);
page.bindingContext = viewModel;
}
export function pageChanged(e: PageChangeEventData) {
console.log(`Page changed to ${e.page}.`);
}
```
## Usage in Angular
In order to use the `ImageSwipe` you must register it in **BOTH** your `main.ts` and `main.aot.ts`!
```typescript
// main.ts
import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { registerElement } from "nativescript-angular/element-registry";
import { AppModule } from "./app.module";
registerElement("ImageSwipe", () => require("nativescript-image-swipe/image-swipe").ImageSwipe);
platformNativeScriptDynamic().bootstrapModule(AppModule);
```
```html
```
```typescript
// test.component.ts
import { Component, OnInit } from "@angular/core";
import { PageChangeEventData } from "nativescript-image-swipe";
@Component({
selector: "demo",
moduleId: module.id,
templateUrl: "./test.component.html",
})
export class ImageSwipeComponent implements OnInit {
public items: any[] = [];
public pageNumber: number = 3;
ngOnInit(): void {
this.items.push({ imageUrl: "http://something.com/picture1.jpg" });
this.items.push({ imageUrl: "http://something.com/picture2.jpg" });
this.items.push({ imageUrl: "http://something.com/picture3.jpg" });
this.items.push({ imageUrl: "http://something.com/picture4.jpg" });
this.items.push({ imageUrl: "http://something.com/picture5.jpg" });
}
public pageChanged(e: PageChangeEventData) {
console.log(`Page changed to ${e.page}.`);
}
}
```
## Demos
This repository includes both Angular and plain NativeScript demos. In order to run those execute the following in your shell:
```shell
$ git clone https://github.com/peterstaev/nativescript-image-swipe
$ cd nativescript-image-swipe
$ npm install
$ npm run demo-ios
```
This will run the plain NativeScript demo project on iOS. If you want to run it on Android simply use the `-android` instead of the `-ios` sufix.
If you want to run the Angular demo simply use the `demo-ng-` prefix instead of `demo-`.
## Donate
[](https://bit.ly/2AS9QKB)
`bitcoin:14fjysmpwLvSsAskvLASw6ek5XfhTzskHC`
