10 examples of 'react native image zoom viewer' in JavaScript

55
render() {
56
    return (
57
        <div>
58
            <div>
59
                <h2>{`props: ${JSON.stringify(this.state.zoomProps)}`}</h2>
60
                <div style={{display: 'flex', marginBottom: 10}}>
61
                    <button onClick={this.setZoomProps(props1)} style={{marginRight: 10}}>
62
                        props1
63
                    </button>
64
                    <button onClick={this.setZoomProps(props2)} style={{marginRight: 10}}>
65
                        props2
66
                    </button>
67
                    <button onClick={this.setZoomProps(props3)} style={{marginRight: 10}}>
68
                        props3
69
                    </button>
70
                    <button onClick={this.setZoomProps(props4)} style={{marginRight: 10}}>
71
                        props4
72
                    </button>
73
                </div>
74
                <ReactImageZoom ref={this.getZoomRef} {...this.state.zoomProps} />
75
            </div>
76
        </div>
77
    );
78
}

145
value: function componentDidMount() {
146
  this.rerenderImageZoom(this.props);
147
}

11
componentDidMount() {
12
  window.addEventListener("mousewheel", this.onMouseWheel);
13
}

42
function ImageViewer(props) {
43
  var _this;
44
45
  _classCallCheck(this, ImageViewer);
46
47
  _this = _possibleConstructorReturn(this, _getPrototypeOf(ImageViewer).call(this, props));
48
  _this.state = {
49
    index: props.index || 0,
50
    opacity: 1
51
  };
52
  _this.changeIndex = _this.changeIndex.bind(_assertThisInitialized(_this));
53
  _this.handleOpacity = _this.handleOpacity.bind(_assertThisInitialized(_this));
54
  return _this;
55
}

12
zoomIn(scale = 2) {
13
  this.viewer.controls.zoomIn(scale);
14
}

164
value: function rerenderImageZoom(props) {
165
  this.imageZoom = new _jsImageZoom2.default(this.container, JSON.parse(JSON.stringify(props)));
166
}

26
zoomedIn(loaded: Function): void {
27
    let image: HTMLImageElement = document.createElement('img');
28
29
    image.onload = (): any => {
30
        this.loaded(image.width, image.height);
31
        this._image.removeAttribute(FULL_SRC_KEY);
32
        loaded();
33
    };
34
35
    image.src = this._fullSrc;
36
}

7
function SimpleZoom(options) {
8
9
    var container = null;
10
    var views = options.views;
11
    var zoomIn = document.createElement('div');
12
    var zoomOut = document.createElement('div');
13
14
    if (options.container) {
15
        container = document.getElementById(options.container);
16
    } else {
17
        container = document.createElement('div');
18
        views[0].container.appendChild(container);
19
    }
20
21
    zoomIn.className = "maperial-simple-zoom-in";
22
    zoomOut.className = "maperial-simple-zoom-out";
23
24
    container.appendChild(zoomIn);
25
    container.appendChild(zoomOut);
26
27
    zoomIn.addEventListener("click", function () {
28
        views.forEach(function (view) {
29
            view.trigger("zoom-in");
30
        });
31
    });
32
33
    zoomOut.addEventListener("click", function () {
34
        views.forEach(function (view) {
35
            view.trigger("zoom-out");
36
        });
37
    });
38
}

294
setZoom(zoom?: number): Promise<any> {
295
  return;
296
}

75
public componentDidMount(): void {
76
    const image = new Image()
77
    image.onload = () => {
78
        this.setState({
79
            width: image.width,
80
            height: image.height,
81
        })
82
    }
83
    image.src = this.props.imagePath
84
}