Skip to content

Commit c998b2b

Browse files
codegeouscodegeous
committed
Added external link for image zoom
1 parent 1093b2e commit c998b2b

File tree

2 files changed

+70
-70
lines changed

2 files changed

+70
-70
lines changed

‎src/App.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,10 @@ export default {
114114
tutorial: `${YOUTUBE_BASE}0AS9Gfd1j5s`,
115115
code: `${GIT_REPO}pages/FileDownloader/index.js`,
116116
},
117+
imageZoom: {
118+
tutorial: `${YOUTUBE_BASE}uhgQFqr9ezQ`,
119+
code: `${GIT_REPO}pages/ImageZoom/index.js`,
120+
},
117121
},
118122
youtubeVideos: [
119123
{

‎src/pages/ImageZoom/index.js‎

Lines changed: 66 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -3,82 +3,78 @@ import Header from "components/Header";
33

44
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
55
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
6+
import ExternalInfo from "components/ExternalInfo";
67
const IMAGES = [
7-
"https://source.unsplash.com/WLUHO9A_xik/1600x900",
8-
"https://source.unsplash.com/dpbXgTh0Lac/1600x900",
8+
"https://source.unsplash.com/WLUHO9A_xik/1600x900",
9+
"https://source.unsplash.com/dpbXgTh0Lac/1600x900",
910
];
1011

1112
const ImageZoom = () => {
12-
return (
13-
<>
14-
<Header title="Zoomable image controller" />
15-
<div className="row">
16-
<div className="col text-center">
17-
<h2>Zoomable Image</h2>
18-
<p className="mt-3">
19-
<div className="row mt-3 d-flex justify-content-center">
20-
<div className="col-lg-8 text-center text-dark">
21-
<TransformWrapper
22-
defaultScale={1}
23-
defaultPositionX={1}
24-
defaultPositionY={1}
25-
>
26-
<TransformComponent>
27-
<img
28-
src={IMAGES[0]}
29-
style={{ width: "100%" }}
30-
/>
31-
</TransformComponent>
32-
</TransformWrapper>
33-
</div>
34-
</div>
35-
</p>
13+
return (
14+
<>
15+
<Header title="Zoomable image controller" />
3616

37-
<p className="mt-5">
38-
<div className="row mt-3 d-flex justify-content-center">
39-
<div className="col-lg-12 text-center text-dark">
40-
<h2>Zoomable image with custom controls</h2>
41-
</div>
42-
<div className="col-lg-8 text-center text-dark">
43-
<TransformWrapper
44-
defaultScale={1}
45-
defaultPositionX={1}
46-
defaultPositionY={1}
47-
>
48-
{({ zoomIn, zoomOut, ...rest }) => (
49-
<>
50-
<div className="col-lg-12 text-center mb-3">
51-
<button
52-
className="btn btn-outline-primary mr-2"
53-
onClick={zoomIn}
54-
>
55-
<FontAwesomeIcon icon="plus" />{" "}
56-
Zoom In
57-
</button>
58-
<button
59-
className="btn btn-outline-secondary"
60-
onClick={zoomOut}
61-
>
62-
<FontAwesomeIcon icon="minus" />{" "}
63-
Zoom Out
64-
</button>
65-
</div>
66-
<TransformComponent>
67-
<img
68-
src={IMAGES[1]}
69-
style={{ width: "100%" }}
70-
/>
71-
</TransformComponent>
72-
</>
73-
)}
74-
</TransformWrapper>
75-
</div>
76-
</div>
77-
</p>
78-
</div>
17+
<ExternalInfo page="imageZoom" />
18+
19+
<div className="row">
20+
<div className="col text-center">
21+
<h2>Zoomable Image</h2>
22+
<p className="mt-3">
23+
<div className="row mt-3 d-flex justify-content-center">
24+
<div className="col-lg-8 text-center text-dark">
25+
<TransformWrapper
26+
defaultScale={1}
27+
defaultPositionX={1}
28+
defaultPositionY={1}
29+
>
30+
<TransformComponent>
31+
<img src={IMAGES[0]} style={{ width: "100%" }} />
32+
</TransformComponent>
33+
</TransformWrapper>
34+
</div>
35+
</div>
36+
</p>
37+
38+
<p className="mt-5">
39+
<div className="row mt-3 d-flex justify-content-center">
40+
<div className="col-lg-12 text-center text-dark">
41+
<h2>Zoomable image with custom controls</h2>
42+
</div>
43+
<div className="col-lg-8 text-center text-dark">
44+
<TransformWrapper
45+
defaultScale={1}
46+
defaultPositionX={1}
47+
defaultPositionY={1}
48+
>
49+
{({ zoomIn, zoomOut, ...rest }) => (
50+
<>
51+
<div className="col-lg-12 text-center mb-3">
52+
<button
53+
className="btn btn-outline-primary mr-2"
54+
onClick={zoomIn}
55+
>
56+
<FontAwesomeIcon icon="plus" /> Zoom In
57+
</button>
58+
<button
59+
className="btn btn-outline-secondary"
60+
onClick={zoomOut}
61+
>
62+
<FontAwesomeIcon icon="minus" /> Zoom Out
63+
</button>
64+
</div>
65+
<TransformComponent>
66+
<img src={IMAGES[1]} style={{ width: "100%" }} />
67+
</TransformComponent>
68+
</>
69+
)}
70+
</TransformWrapper>
71+
</div>
7972
</div>
80-
</>
81-
);
73+
</p>
74+
</div>
75+
</div>
76+
</>
77+
);
8278
};
8379

8480
export default ImageZoom;

0 commit comments

Comments
 (0)