@dpouris/gswap 0.0.13 → 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +8 -6
- package/dist/src/index.html +13 -0
- package/dist/src/main.js +3 -5
- package/dist/types/GallerySwapTypes.d.ts +14 -0
- package/dist/types/GallerySwapTypes.js +2 -0
- package/package.json +2 -5
package/README.md
CHANGED
|
@@ -2,11 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
### Create a gallery of images with ease.
|
|
4
4
|
|
|
5
|
+
|
|
6
|
+
|
|
5
7
|
---
|
|
6
8
|
|
|
7
9
|
To get started, in your project folder, run:
|
|
8
10
|
|
|
9
|
-
```
|
|
11
|
+
```bash
|
|
10
12
|
npm i @dpouris/gswap
|
|
11
13
|
```
|
|
12
14
|
|
|
@@ -14,12 +16,12 @@ npm i @dpouris/gswap
|
|
|
14
16
|
|
|
15
17
|
First, import the library and create a new gswap instance:
|
|
16
18
|
|
|
17
|
-
```
|
|
19
|
+
```js
|
|
18
20
|
import { GSwap } from '@dpouris/gswap';
|
|
19
21
|
|
|
20
22
|
...
|
|
21
23
|
|
|
22
|
-
const = document.getElementById("gallery")
|
|
24
|
+
const galleryContainer = document.getElementById("gallery")
|
|
23
25
|
|
|
24
26
|
const gswap = new GSwap({
|
|
25
27
|
containerElem: galleryContainer,
|
|
@@ -116,7 +118,7 @@ This will create a new instance of gswap and will place the gallery absolutely i
|
|
|
116
118
|
Displays the next image in the gallery.
|
|
117
119
|
You can call the **next()** method by calling it from the gallery instance like so.
|
|
118
120
|
|
|
119
|
-
```
|
|
121
|
+
```js
|
|
120
122
|
const gallery = new GSwap(...);
|
|
121
123
|
|
|
122
124
|
...
|
|
@@ -128,7 +130,7 @@ OR
|
|
|
128
130
|
|
|
129
131
|
You can bind the **next()** method to an onclick event like so.
|
|
130
132
|
|
|
131
|
-
```
|
|
133
|
+
```js
|
|
132
134
|
const gallery = new GSwap(...);
|
|
133
135
|
const nextBtn = document.getElementById('nextGalleryBtn')
|
|
134
136
|
|
|
@@ -149,7 +151,7 @@ Stacks the images in the gallery in case their position was altered.
|
|
|
149
151
|
|
|
150
152
|
Can be called from the gallery instance like so.
|
|
151
153
|
|
|
152
|
-
```
|
|
154
|
+
```js
|
|
153
155
|
const gallery = new GSwap(...);
|
|
154
156
|
|
|
155
157
|
...
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<script src="./main.js" defer></script>
|
|
8
|
+
<title>Document</title>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="gallery"></div>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
package/dist/src/main.js
CHANGED
|
@@ -16,11 +16,11 @@ class GSwap {
|
|
|
16
16
|
nav.classList.add("gallery-swap-nav");
|
|
17
17
|
const navLeft = document.createElement("button");
|
|
18
18
|
navLeft.onclick = this.prev;
|
|
19
|
-
navLeft.innerHTML = "&
|
|
19
|
+
navLeft.innerHTML = "←";
|
|
20
20
|
navLeft.classList.add("gallery-swap-nav-left");
|
|
21
21
|
const navRight = document.createElement("button");
|
|
22
22
|
navRight.onclick = this.next;
|
|
23
|
-
navRight.innerHTML = "&
|
|
23
|
+
navRight.innerHTML = "→";
|
|
24
24
|
navRight.classList.add("gallery-swap-nav-right");
|
|
25
25
|
if (this.options.navigation === "forwardOnly") {
|
|
26
26
|
nav.appendChild(navRight);
|
|
@@ -121,9 +121,7 @@ class GSwap {
|
|
|
121
121
|
this.containerElem = containerElem;
|
|
122
122
|
this.images = images;
|
|
123
123
|
this.options = options;
|
|
124
|
-
this.options.imgDimensions = this.options
|
|
125
|
-
.imgDimensions.hasOwnProperty("height")
|
|
126
|
-
.hasOwnProperty("width")
|
|
124
|
+
this.options.imgDimensions = this.options.imgDimensions
|
|
127
125
|
? this.options.imgDimensions
|
|
128
126
|
: { width: 300, height: 300 };
|
|
129
127
|
this.options.direction = this.options.direction;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export interface GallerySwap {
|
|
2
|
+
container: HTMLDivElement;
|
|
3
|
+
}
|
|
4
|
+
export declare type Options = {
|
|
5
|
+
animation?: string;
|
|
6
|
+
animationDuration?: number;
|
|
7
|
+
navigation?: boolean | "forwardOnly" | "backOnly";
|
|
8
|
+
repeat?: boolean;
|
|
9
|
+
direction?: "left" | "right" | "top" | "bottom";
|
|
10
|
+
imgDimensions?: {
|
|
11
|
+
height: number;
|
|
12
|
+
width: number;
|
|
13
|
+
};
|
|
14
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dpouris/gswap",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"description": "A library for swapping between images in a gallery",
|
|
5
5
|
"main": "dist/src/index.js",
|
|
6
6
|
"types": "dist/src/index.d.ts",
|
|
@@ -16,8 +16,5 @@
|
|
|
16
16
|
},
|
|
17
17
|
"keywords": [],
|
|
18
18
|
"author": "dpouris",
|
|
19
|
-
"license": "ISC"
|
|
20
|
-
"dependencies": {
|
|
21
|
-
"@dpouris/gswap": "^0.0.3"
|
|
22
|
-
}
|
|
19
|
+
"license": "ISC"
|
|
23
20
|
}
|