diff --git a/package.json b/package.json index 48bfdb4..0a8ca3f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "awesome-image-viewer", "description": "React, Angular, Vue, and Typescript compatible image viewer", - "version": "1.0.59", + "version": "1.0.60", "author": "Mostafa Mohammadzadeh", "license": "MIT", "main": "src/imageViewer.js", @@ -9,7 +9,7 @@ "scripts": { "test": "jest", "test-cov": "jest --coverage", - "deploy": "npm update && npm publish && cd website && npm update && npm run build && npm run export && cd .. && find website/out -type d -exec chmod 755 {} \\; && find website/out -type f -exec chmod 644 {} \\; && git add -A && git commit -m \"[deployment auto commit]\" && git ftp push" + "deploy": "cd website && npm run build && npm run export && cd .. && find website/out -type d -exec chmod 755 {} \\; && find website/out -type f -exec chmod 644 {} \\; && git add -A && git commit -m \"[deployment auto commit]\" && git ftp push" }, "devDependencies": { "jest": "^28.1.3", diff --git a/src/imageViewer.js b/src/imageViewer.js index ca12342..dff20fb 100644 --- a/src/imageViewer.js +++ b/src/imageViewer.js @@ -877,5 +877,5 @@ const Style = ` .imageViewer > .container > .footer { bottom: 5px; } - }/*# sourceMappingURL=imageViewer.css.map */ + } `; diff --git a/src/imageViewer.ts b/src/imageViewer.ts index 5c658dc..55c3a12 100644 --- a/src/imageViewer.ts +++ b/src/imageViewer.ts @@ -945,5 +945,5 @@ const Style = ` .imageViewer > .container > .footer { bottom: 5px; } - }/*# sourceMappingURL=imageViewer.css.map */ + } `; \ No newline at end of file diff --git a/todo.md b/todo.md index 3fa902e..5f77926 100644 --- a/todo.md +++ b/todo.md @@ -1,6 +1,3 @@ -## Bug: -- Alert for compname.css.map on react - ## Features: - Documents: scrollable code segments on mobile - Unique id/class diff --git a/website/out/404.html b/website/out/404.html index a6fa2cc..8862f15 100644 --- a/website/out/404.html +++ b/website/out/404.html @@ -1,4 +1,4 @@ -404: This page could not be found

404

This page could not be found.

\ No newline at end of file + }

404

This page could not be found.

\ No newline at end of file diff --git a/website/out/_next/static/znLl4AeSfQzWEU7HBupEI/_buildManifest.js b/website/out/_next/static/9kaWAh1u7BLqoqeck6NW0/_buildManifest.js similarity index 80% rename from website/out/_next/static/znLl4AeSfQzWEU7HBupEI/_buildManifest.js rename to website/out/_next/static/9kaWAh1u7BLqoqeck6NW0/_buildManifest.js index acd896c..ff9a493 100644 --- a/website/out/_next/static/znLl4AeSfQzWEU7HBupEI/_buildManifest.js +++ b/website/out/_next/static/9kaWAh1u7BLqoqeck6NW0/_buildManifest.js @@ -1 +1 @@ -self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/chunks/16-4f01535df62a4a79.js","static/chunks/pages/index-dc83a7bfba7380b9.js"],"/_error":["static/chunks/pages/_error-7397496ca01950b1.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB() \ No newline at end of file +self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/chunks/16-4f01535df62a4a79.js","static/chunks/pages/index-e9944addc43c04d4.js"],"/_error":["static/chunks/pages/_error-7397496ca01950b1.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB() \ No newline at end of file diff --git a/website/out/_next/static/znLl4AeSfQzWEU7HBupEI/_ssgManifest.js b/website/out/_next/static/9kaWAh1u7BLqoqeck6NW0/_ssgManifest.js similarity index 100% rename from website/out/_next/static/znLl4AeSfQzWEU7HBupEI/_ssgManifest.js rename to website/out/_next/static/9kaWAh1u7BLqoqeck6NW0/_ssgManifest.js diff --git a/website/out/_next/static/chunks/pages/index-dc83a7bfba7380b9.js b/website/out/_next/static/chunks/pages/index-e9944addc43c04d4.js similarity index 99% rename from website/out/_next/static/chunks/pages/index-dc83a7bfba7380b9.js rename to website/out/_next/static/chunks/pages/index-e9944addc43c04d4.js index f025fa1..448f505 100644 --- a/website/out/_next/static/chunks/pages/index-dc83a7bfba7380b9.js +++ b/website/out/_next/static/chunks/pages/index-e9944addc43c04d4.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{5557:function(a,b,c){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return c(7080)}])},7080:function(a,b,c){"use strict";c.r(b),c.d(b,{default:function(){return x}});var d=c(5893),e=c(9008),f=c.n(e),g=c(1664),h=c.n(g),i=c(5885),j=c(2882),k=c(3991),l={src:"/_next/static/media/Beach.0e600ab2.jpg",height:1621,width:1080,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAgABQMBIgACEQEDEQH/xAAnAAEBAAAAAAAAAAAAAAAAAAAABgEBAAAAAAAAAAAAAAAAAAAABP/aAAwDAQACEAMQAAAAoQRn/8QAGhABAQACAwAAAAAAAAAAAAAAAQMABAIhcf/aAAgBAQABPwDR0whxrSiUoCp15n//xAAYEQEBAAMAAAAAAAAAAAAAAAACAQADEv/aAAgBAgEBPwBbGlb1c//EABoRAAICAwAAAAAAAAAAAAAAAAECAAMRIVH/2gAIAQMBAT8ASmutFQKMDu5//9k="},m={src:"/_next/static/media/Beach.min.b349f366.jpg",height:450,width:300,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAgABQMBIgACEQEDEQH/xAAnAAEBAAAAAAAAAAAAAAAAAAAABgEBAAAAAAAAAAAAAAAAAAAABP/aAAwDAQACEAMQAAAAoQRn/8QAGhABAQACAwAAAAAAAAAAAAAAAQMCBAAhcf/aAAgBAQABPwDR0sSGNaZpSgKnXnP/xAAYEQEBAAMAAAAAAAAAAAAAAAACAQADEv/aAAgBAgEBPwBbGlb1c//EABoRAAICAwAAAAAAAAAAAAAAAAIDAAERIUH/2gAIAQMBAT8AWlawEBGsVXdz/9k="},n={src:"/_next/static/media/Fountain.62dd4c86.jpg",height:1620,width:1080,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAgABQMBIgACEQEDEQH/xAAoAAEBAAAAAAAAAAAAAAAAAAAABAEBAQAAAAAAAAAAAAAAAAAABAX/2gAMAwEAAhADEAAAALhEf//EABwQAAICAgMAAAAAAAAAAAAAAAIDAREABBQjov/aAAgBAQABPwDhraRyrZaMQVdqQ81n/8QAGREAAgMBAAAAAAAAAAAAAAAAAQIABAWR/9oACAECAQE/AH2tJWIFh+z/xAAZEQACAwEAAAAAAAAAAAAAAAABAgADBAX/2gAIAQMBAT8Az87I9KM1QJn/2Q=="},o={src:"/_next/static/media/Fountain.min.d5958e69.jpg",height:450,width:300,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAgABQMBIgACEQEDEQH/xAAoAAEBAAAAAAAAAAAAAAAAAAAABAEBAQAAAAAAAAAAAAAAAAAABAX/2gAMAwEAAhADEAAAALBDf//EAB0QAAICAQUAAAAAAAAAAAAAAAIDAREABBIUI6L/2gAIAQEAAT8A4a2kcq1ThjdXakPNZ//EABkRAAIDAQAAAAAAAAAAAAAAAAECAAQFkf/aAAgBAgEBPwB9rSViBYfs/8QAGREAAgMBAAAAAAAAAAAAAAAAAQIAAwQF/9oACAEDAQE/AM/OyPSjNUCZ/9k="},p={src:"/_next/static/media/Steel Wool.bf6b1214.jpg",height:1080,width:1620,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAUACAMBIgACEQEDEQH/xAAnAAEBAAAAAAAAAAAAAAAAAAAABgEBAAAAAAAAAAAAAAAAAAAAA//aAAwDAQACEAMQAAAAhQT/AP/EAB0QAAEDBQEAAAAAAAAAAAAAAAMBAgQABRIUMkL/2gAIAQEAAT8AgyxktEgWu1HIdH5+ua//xAAZEQABBQAAAAAAAAAAAAAAAAAAAQIREnH/2gAIAQIBAT8Aqku0/8QAGBEAAgMAAAAAAAAAAAAAAAAAAQIAEnH/2gAIAQMBAT8AsQq5P//Z"},q={src:"/_next/static/media/Steel Wool.min.c2913367.jpg",height:300,width:450,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAUACAMBIgACEQEDEQH/xAAnAAEBAAAAAAAAAAAAAAAAAAAABwEBAAAAAAAAAAAAAAAAAAAAA//aAAwDAQACEAMQAAAAn4J//8QAHxAAAAQHAQAAAAAAAAAAAAAAAQIDBAAFEhMUMTJC/9oACAEBAAE/AGblM0pcJY5agXA9z1zqP//EABcRAQEBAQAAAAAAAAAAAAAAAAECAHH/2gAIAQIBAT8AJFru/8QAGREAAQUAAAAAAAAAAAAAAAAAAgABERJR/9oACAEDAQE/ALEwjGL/2Q=="},r=[{mainUrl:"/_next/static/media/Island.7e07e770.jpg",thumbnailUrl:"/_next/static/media/Island.min.62f050b5.jpg",description:"Island"},{mainUrl:"/_next/static/media/Balloon.4106ab43.jpg",thumbnailUrl:"/_next/static/media/Balloon.min.d65468cc.jpg",description:"Balloon"},{mainUrl:"/_next/static/media/Beach Hut.2cee5e8a.jpg",thumbnailUrl:"/_next/static/media/Beach Hut.min.5900a4bb.jpg",description:"Beach Hut"},{mainUrl:"/_next/static/media/Bluebell.a30cdb19.jpg",thumbnailUrl:"/_next/static/media/Bluebell.min.882a21a1.jpg",description:"Bluebell"},{mainUrl:"/_next/static/media/Bird.910eb4a9.jpg",thumbnailUrl:"/_next/static/media/Bird.min.0666a838.jpg",description:"Bird"},{mainUrl:"/_next/static/media/Antelope Canyon.b256d31d.jpg",thumbnailUrl:"/_next/static/media/Antelope Canyon.min.12cd76c8.jpg",description:"Antelope Canyon"},{mainUrl:"/_next/static/media/Snowman.9e958fc3.jpg",thumbnailUrl:"/_next/static/media/Snowman.min.0880285c.jpg",description:"Snowman"},{mainUrl:l.src,thumbnailUrl:m.src,description:"Beach"},{mainUrl:"/_next/static/media/Black Eyed Susanne.05674ca1.jpg",thumbnailUrl:"/_next/static/media/Black Eyed Susanne.min.7abe0521.jpg",description:"Black Eyed Susanne"},{mainUrl:"/_next/static/media/Butterfly.9b7b1263.jpg",thumbnailUrl:"/_next/static/media/Butterfly.min.d4960e35.jpg",description:"Butterfly"},{mainUrl:"/_next/static/media/Button.cf4dc418.jpg",thumbnailUrl:"/_next/static/media/Button.min.9ccb52ee.jpg",description:"Button"},{mainUrl:n.src,thumbnailUrl:o.src,description:"Fountain"},{mainUrl:"/_next/static/media/Gray Pansy.bdf172f9.jpg",thumbnailUrl:"/_next/static/media/Gray Pansy.min.7d331321.jpg",description:"Gray Pansy"},{mainUrl:"/_next/static/media/Ocean.6763187e.jpg",thumbnailUrl:"/_next/static/media/Ocean.min.07655516.jpg",description:"Ocean"},{mainUrl:"/_next/static/media/Arctic Ground Squirrel.77164533.jpg",thumbnailUrl:"/_next/static/media/Arctic Ground Squirrel.min.d1732f31.jpg",description:"Arctic Ground Squirrel"},{mainUrl:p.src,thumbnailUrl:q.src,description:"Steel Wool"}],s=[{mainUrl:p.src,thumbnailUrl:q.src,description:"Steel Wool"},{mainUrl:l.src,thumbnailUrl:m.src,description:"Beach"},{mainUrl:n.src}],t=[{mainUrl:q.src,thumbnailUrl:q.src,description:"Steel Wool"},{mainUrl:m.src,thumbnailUrl:m.src,description:"Beach"},{mainUrl:o.src}],u={src:"/_next/static/media/edit.023c8e49.svg",height:24,width:24},v={src:"/_next/static/media/delete.5a45305b.svg",height:24,width:24},w=!1;function x(){var a=function(a){navigator.clipboard&&navigator.clipboard.writeText(a).then(function(){new j.Z("Copied to clipboard \uD83D\uDC4D")},function(a){new j.Z("cannot copy \uD83D\uDC4E")})},b=new i.Z;return setTimeout(function(){!w&& void 0===b.get("IV_WelcomeMsg")&&(w=!0,new j.Z("Welcome to Awesome Image Viewer! \uD83D\uDC4B",{position:"top-center",timeout:2e3,afterHide:function(){new j.Z("Click on code sections to run the demo",{position:"top-center",timeout:0,actionText:"Got it",onAction:function(){return b.set("IV_WelcomeMsg","yes",{path:"/",maxAge:864e5})}})}}))},2e3),(0,d.jsxs)("div",{id:"window",style:{scrollBehavior:"smooth"},children:[(0,d.jsxs)(f(),{children:[(0,d.jsx)("title",{children:"Awesome Image Viewer | React, Angular, Vue, and Typescript compatible image viewer"}),(0,d.jsx)("meta",{name:"viewport",content:"initial-scale=1.0, width=device-width"})]}),(0,d.jsxs)("header",{id:"header",children:[(0,d.jsx)(h(),{href:"https://awesome-components.com",children:(0,d.jsx)("a",{className:"headerLink",children:"Awesome Components"})}),(0,d.jsx)(h(),{href:"https://buymeacoffee.com/mostafamdzh",children:(0,d.jsx)("a",{className:"headerLink",id:"coffee",children:"buy me a coffee! :)"})})]}),(0,d.jsx)("div",{className:"container",id:"intro",children:(0,d.jsxs)("div",{id:"main",children:[(0,d.jsx)("div",{id:"navigation",children:(0,d.jsxs)("div",{id:"navigationWrapper",children:[(0,d.jsx)("a",{className:"navLink",href:"#intro",children:"intro "}),(0,d.jsx)("a",{className:"navLink",href:"#installation",children:"installation "}),(0,d.jsx)("a",{className:"navLink",href:"#images-format",children:"images format "}),(0,d.jsx)("a",{className:"navLink",href:"#current-selected",children:"current selected"}),(0,d.jsx)("a",{className:"navLink",href:"#cover-size",children:"cover size "}),(0,d.jsx)("a",{className:"navLink",href:"#thumbnails",children:"thumbnails "}),(0,d.jsx)("a",{className:"navLink",href:"#zoom",children:"zoom "}),(0,d.jsx)("a",{className:"navLink",href:"#custom-buttons",children:"custom buttons "})]})}),(0,d.jsxs)("div",{id:"content",children:[(0,d.jsx)("a",{href:"https://github.com/MostafaMDZH/Awesome-Image-Viewer",id:"github",children:"Github"}),(0,d.jsx)("h3",{id:"awesome",children:(0,d.jsx)(h(),{href:"/",children:"Awesome"})}),(0,d.jsxs)("div",{id:"name-versionWrapper",children:[(0,d.jsx)("h1",{id:"appName",children:(0,d.jsx)(h(),{href:"/",children:"Image Viewer"})}),(0,d.jsx)("a",{id:"version",children:"V1.0.59"})]}),(0,d.jsx)("p",{className:"sectionDescription",children:"React, Angular, Vue, and Typescript compatible image viewer"}),(0,d.jsx)("h3",{className:"sectionName",id:"features",children:(0,d.jsx)("a",{children:"# Features"})}),(0,d.jsxs)("ul",{className:"features",children:[(0,d.jsx)("li",{children:"Lazy Loading"}),(0,d.jsx)("li",{children:"Zoomable"}),(0,d.jsx)("li",{children:"Custom Buttons"}),(0,d.jsx)("li",{children:"Description"}),(0,d.jsx)("li",{children:"Custom Select"}),(0,d.jsx)("li",{children:"Swipe On Touchscreen"}),(0,d.jsx)("li",{children:"Cover Size"}),(0,d.jsx)("li",{children:"Thumbnail Support"}),(0,d.jsx)("li",{children:"Navigation With Arrow Keys"}),(0,d.jsx)("li",{children:"Responsive Design"}),(0,d.jsx)("li",{children:"Dynamic HTML"}),(0,d.jsx)("li",{children:"Lightweight"}),(0,d.jsx)("li",{children:"Zero Dependency"})]}),(0,d.jsx)("h3",{className:"sectionName",id:"installation",children:(0,d.jsx)("a",{href:"#installation",children:"# Installation"})}),(0,d.jsxs)("p",{className:"step",children:[(0,d.jsxs)("a",{className:"bold",children:[">"," step 1 : "]}),"you can use either npm or yarn, or import the main file with the script tag."]}),(0,d.jsxs)("div",{className:"codeWrapper",children:[(0,d.jsx)("p",{className:"comment",children:"# npm"}),(0,d.jsx)("button",{className:"codeSection copyable",onClick:function(){return a("npm i awesome-image-viewer")},children:(0,d.jsxs)("p",{children:["npm i ",(0,d.jsx)("span",{children:"awesome-image-viewer"})]})}),(0,d.jsx)("p",{className:"comment",children:"# yarn"}),(0,d.jsx)("button",{className:"codeSection copyable",onClick:function(){return a("yarn add awesome-image-viewer")},children:(0,d.jsxs)("p",{children:["yarn add ",(0,d.jsx)("span",{children:"awesome-image-viewer"})]})}),(0,d.jsxs)("p",{className:"comment",children:["# html (download the imageViewer.js file from the\xa0",(0,d.jsx)("a",{href:"https://github.com/MostafaMDZH/Awesome-Image-Viewer/tree/main/src",children:"src"}),"\xa0directory)"]}),(0,d.jsx)("button",{className:"codeSection copyable",onClick:function(){return a('')},children:(0,d.jsxs)("p",{children:['']})})]}),(0,d.jsxs)("p",{className:"step",children:[(0,d.jsxs)("a",{className:"bold",children:[">"," step 2 : "]}),"include the package in your code:"]}),(0,d.jsxs)("div",{className:"codeWrapper",children:[(0,d.jsx)("p",{className:"comment",children:"# npm and yarn"}),(0,d.jsx)("button",{className:"codeSection copyable",onClick:function(){return a("import ImageViewer from 'awesome-image-viewer'")},children:(0,d.jsxs)("p",{children:["import ",(0,d.jsx)("span",{children:"ImageViewer"})," from ",(0,d.jsx)("span",{children:"'awesome-image-viewer'"})]})})]}),(0,d.jsxs)("p",{className:"step",children:[(0,d.jsxs)("a",{className:"bold",children:[">"," step 3 : "]}),"start showing your images!"]}),(0,d.jsx)("div",{className:"codeWrapper",children:(0,d.jsx)("button",{className:"codeSection executable",onClick:function(){new k.Z({images:r})},children:(0,d.jsxs)("p",{children:[(0,d.jsx)("span",{children:"new ImageViewer"}),"({",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0","images: myImages",(0,d.jsx)("br",{}),"});"]})})}),(0,d.jsx)("h3",{className:"sectionName",id:"images-format",children:(0,d.jsx)("a",{href:"#images-format",children:"# Images Format"})}),(0,d.jsx)("p",{className:"sectionDescription",children:"The format of the images should be like this:"}),(0,d.jsxs)("div",{className:"codeWrapper",children:[(0,d.jsx)("p",{className:"comment",children:"# The thumbnail and description are optional"}),(0,d.jsx)("button",{className:"codeSection executable",onClick:function(){new k.Z({images:s})},children:(0,d.jsxs)("p",{children:["const data = [",(0,d.jsx)("br",{}),"\xa0\xa0","{",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"mainUrl"}),": 'cdn.com/img1.jpg',",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"thumbnailUrl"}),": 'cdn.com/img1.min.jpg',",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"description"}),": 'Steel Wool',",(0,d.jsx)("br",{}),"\xa0\xa0","},",(0,d.jsx)("br",{}),"\xa0\xa0","{",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"mainUrl"}),": 'cdn.com/img2.jpg',",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"thumbnailUrl"}),": 'cdn.com/img2.min.jpg',",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"description"}),": 'Beach',",(0,d.jsx)("br",{}),"\xa0\xa0","},",(0,d.jsx)("br",{}),"\xa0\xa0","{",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"mainUrl"}),": 'cdn.com/img3.jpg',",(0,d.jsx)("br",{}),"\xa0\xa0","},",(0,d.jsx)("br",{}),"\xa0\xa0","...",(0,d.jsx)("br",{}),"]"]})})]}),(0,d.jsx)("h3",{className:"sectionName",id:"current-selected",children:(0,d.jsx)("a",{href:"#current-selected",children:"# Current Selected"})}),(0,d.jsx)("p",{className:"sectionDescription",children:"Instead of the first image, you can select whatever you want:"}),(0,d.jsxs)("div",{className:"codeWrapper",children:[(0,d.jsx)("p",{className:"comment",children:"# Index starts from one"}),(0,d.jsx)("button",{className:"codeSection executable",onClick:function(){new k.Z({images:s,currentSelected:1})},children:(0,d.jsxs)("p",{children:["new ImageViewer({",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0","images: sampleImages,",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"currentSelected"}),": 2",(0,d.jsx)("br",{}),"});"]})})]}),(0,d.jsx)("h3",{className:"sectionName",id:"cover-size",children:(0,d.jsx)("a",{href:"#cover-size",children:"# Cover Size"})}),(0,d.jsx)("p",{className:"sectionDescription",children:"If you set the stretchImages to true, it would stretch the small images to fill the page:"}),(0,d.jsxs)("div",{className:"codeWrapper",children:[(0,d.jsx)("p",{className:"comment",children:"# default:"}),(0,d.jsx)("button",{className:"codeSection executable",onClick:function(){new k.Z({images:t,stretchImages:!1})},children:(0,d.jsxs)("p",{children:["new ImageViewer({",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0","images: smallSampleImages",(0,d.jsx)("br",{}),"});"]})}),(0,d.jsx)("p",{className:"comment",children:"# stretch:"}),(0,d.jsx)("button",{className:"codeSection executable",onClick:function(){new k.Z({images:t,stretchImages:!0})},children:(0,d.jsxs)("p",{children:["new ImageViewer({",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0","images: smallSampleImages,",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"stretchImages"}),": true",(0,d.jsx)("br",{}),"});"]})})]}),(0,d.jsx)("h3",{className:"sectionName",id:"thumbnails",children:(0,d.jsx)("a",{href:"#thumbnails",children:"# Thumbnails"})}),(0,d.jsx)("p",{className:"sectionDescription",children:"If you don't specify the thumbnail image, the main image will be used as the thumbnail. but if you don't want to show the thumbnails, you can set the showThumbnails to false:"}),(0,d.jsx)("div",{className:"codeWrapper",children:(0,d.jsx)("button",{className:"codeSection executable",onClick:function(){new k.Z({images:s,showThumbnails:!1})},children:(0,d.jsxs)("p",{children:["new ImageViewer({",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0","images: sampleImages,",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"showThumbnails"}),": false",(0,d.jsx)("br",{}),"});"]})})}),(0,d.jsx)("h3",{className:"sectionName",id:"zoom",children:(0,d.jsx)("a",{href:"#zoom",children:"# Zoom"})}),(0,d.jsx)("p",{className:"sectionDescription",children:"Zooming is available with the zoom button or double tap, but you can disable it with isZoomable parameter:"}),(0,d.jsx)("div",{className:"codeWrapper",children:(0,d.jsx)("button",{className:"codeSection executable",onClick:function(){new k.Z({images:s,isZoomable:!1})},children:(0,d.jsxs)("p",{children:["new ImageViewer({",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0","images: sampleImages,",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"isZoomable"}),": false",(0,d.jsx)("br",{}),"});"]})})}),(0,d.jsx)("h3",{className:"sectionName",id:"custom-buttons",children:(0,d.jsx)("a",{href:"#custom-buttons",children:"# Custom Buttons"})}),(0,d.jsx)("p",{className:"sectionDescription",children:"You can add some custom buttons:"}),(0,d.jsxs)("div",{className:"codeWrapper",children:[(0,d.jsx)("p",{className:"comment",children:"# iconSize is optional (default value is '19px auto')"}),(0,d.jsx)("button",{className:"codeSection executable",onClick:function(){new k.Z({images:s,buttons:[{name:"Edit",iconSrc:u.src,onSelect:function(){return alert("Edit selected!")}},{name:"Delete",iconSrc:v.src,iconSize:"18px auto",onSelect:function(){return alert("Delete selected!")}}]})},children:(0,d.jsxs)("p",{children:["new ImageViewer({",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0","images: sampleImages,",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"buttons: ["}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"{"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"name: 'Edit',"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"iconSrc: 'cdn.con/icons/edit.svg',"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"onSelect: () => alert('Edit selected!')"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"},"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"{"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"name: 'Delete',"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"iconSrc: 'cdn.con/icons/delete.svg',"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"iconSize: '18px auto',"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"onSelect: () => alert('Delete selected!')"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"}"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"]"}),(0,d.jsx)("br",{})," });"]})})]})]})]})}),(0,d.jsxs)("footer",{id:"footer",children:[(0,d.jsxs)("p",{children:["Made with ♡ by ",(0,d.jsx)("a",{href:"https://github.com/MostafaMDZH",children:"Mostafa Mohammadzadeh"})]}),(0,d.jsx)("p",{id:"dash",children:"-"}),(0,d.jsxs)("p",{id:"githubLink",children:["Source on ",(0,d.jsx)("a",{href:"https://github.com/MostafaMDZH/Awesome-Image-Viewer",children:"Github"})]}),(0,d.jsxs)("p",{id:"awesomeComponents",children:["From ",(0,d.jsx)(h(),{href:"https://awesome-components.com",children:(0,d.jsx)("a",{children:"Awesome Components"})})]})]})]})}}},function(a){a.O(0,[16,774,888,179],function(){var b;return a(a.s=5557)}),_N_E=a.O()}]) \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{5557:function(a,b,c){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return c(7080)}])},7080:function(a,b,c){"use strict";c.r(b),c.d(b,{default:function(){return x}});var d=c(5893),e=c(9008),f=c.n(e),g=c(1664),h=c.n(g),i=c(5885),j=c(2882),k=c(3991),l={src:"/_next/static/media/Beach.0e600ab2.jpg",height:1621,width:1080,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAgABQMBIgACEQEDEQH/xAAnAAEBAAAAAAAAAAAAAAAAAAAABgEBAAAAAAAAAAAAAAAAAAAABP/aAAwDAQACEAMQAAAAoQRn/8QAGhABAQACAwAAAAAAAAAAAAAAAQMABAIhcf/aAAgBAQABPwDR0whxrSiUoCp15n//xAAYEQEBAAMAAAAAAAAAAAAAAAACAQADEv/aAAgBAgEBPwBbGlb1c//EABoRAAICAwAAAAAAAAAAAAAAAAECAAMRIVH/2gAIAQMBAT8ASmutFQKMDu5//9k="},m={src:"/_next/static/media/Beach.min.b349f366.jpg",height:450,width:300,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAgABQMBIgACEQEDEQH/xAAnAAEBAAAAAAAAAAAAAAAAAAAABgEBAAAAAAAAAAAAAAAAAAAABP/aAAwDAQACEAMQAAAAoQRn/8QAGhABAQACAwAAAAAAAAAAAAAAAQMCBAAhcf/aAAgBAQABPwDR0sSGNaZpSgKnXnP/xAAYEQEBAAMAAAAAAAAAAAAAAAACAQADEv/aAAgBAgEBPwBbGlb1c//EABoRAAICAwAAAAAAAAAAAAAAAAIDAAERIUH/2gAIAQMBAT8AWlawEBGsVXdz/9k="},n={src:"/_next/static/media/Fountain.62dd4c86.jpg",height:1620,width:1080,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAgABQMBIgACEQEDEQH/xAAoAAEBAAAAAAAAAAAAAAAAAAAABAEBAQAAAAAAAAAAAAAAAAAABAX/2gAMAwEAAhADEAAAALhEf//EABwQAAICAgMAAAAAAAAAAAAAAAIDAREABBQjov/aAAgBAQABPwDhraRyrZaMQVdqQ81n/8QAGREAAgMBAAAAAAAAAAAAAAAAAQIABAWR/9oACAECAQE/AH2tJWIFh+z/xAAZEQACAwEAAAAAAAAAAAAAAAABAgADBAX/2gAIAQMBAT8Az87I9KM1QJn/2Q=="},o={src:"/_next/static/media/Fountain.min.d5958e69.jpg",height:450,width:300,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAgABQMBIgACEQEDEQH/xAAoAAEBAAAAAAAAAAAAAAAAAAAABAEBAQAAAAAAAAAAAAAAAAAABAX/2gAMAwEAAhADEAAAALBDf//EAB0QAAICAQUAAAAAAAAAAAAAAAIDAREABBIUI6L/2gAIAQEAAT8A4a2kcq1ThjdXakPNZ//EABkRAAIDAQAAAAAAAAAAAAAAAAECAAQFkf/aAAgBAgEBPwB9rSViBYfs/8QAGREAAgMBAAAAAAAAAAAAAAAAAQIAAwQF/9oACAEDAQE/AM/OyPSjNUCZ/9k="},p={src:"/_next/static/media/Steel Wool.bf6b1214.jpg",height:1080,width:1620,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAUACAMBIgACEQEDEQH/xAAnAAEBAAAAAAAAAAAAAAAAAAAABgEBAAAAAAAAAAAAAAAAAAAAA//aAAwDAQACEAMQAAAAhQT/AP/EAB0QAAEDBQEAAAAAAAAAAAAAAAMBAgQABRIUMkL/2gAIAQEAAT8AgyxktEgWu1HIdH5+ua//xAAZEQABBQAAAAAAAAAAAAAAAAAAAQIREnH/2gAIAQIBAT8Aqku0/8QAGBEAAgMAAAAAAAAAAAAAAAAAAQIAEnH/2gAIAQMBAT8AsQq5P//Z"},q={src:"/_next/static/media/Steel Wool.min.c2913367.jpg",height:300,width:450,blurDataURL:"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAUACAMBIgACEQEDEQH/xAAnAAEBAAAAAAAAAAAAAAAAAAAABwEBAAAAAAAAAAAAAAAAAAAAA//aAAwDAQACEAMQAAAAn4J//8QAHxAAAAQHAQAAAAAAAAAAAAAAAQIDBAAFEhMUMTJC/9oACAEBAAE/AGblM0pcJY5agXA9z1zqP//EABcRAQEBAQAAAAAAAAAAAAAAAAECAHH/2gAIAQIBAT8AJFru/8QAGREAAQUAAAAAAAAAAAAAAAAAAgABERJR/9oACAEDAQE/ALEwjGL/2Q=="},r=[{mainUrl:"/_next/static/media/Island.7e07e770.jpg",thumbnailUrl:"/_next/static/media/Island.min.62f050b5.jpg",description:"Island"},{mainUrl:"/_next/static/media/Balloon.4106ab43.jpg",thumbnailUrl:"/_next/static/media/Balloon.min.d65468cc.jpg",description:"Balloon"},{mainUrl:"/_next/static/media/Beach Hut.2cee5e8a.jpg",thumbnailUrl:"/_next/static/media/Beach Hut.min.5900a4bb.jpg",description:"Beach Hut"},{mainUrl:"/_next/static/media/Bluebell.a30cdb19.jpg",thumbnailUrl:"/_next/static/media/Bluebell.min.882a21a1.jpg",description:"Bluebell"},{mainUrl:"/_next/static/media/Bird.910eb4a9.jpg",thumbnailUrl:"/_next/static/media/Bird.min.0666a838.jpg",description:"Bird"},{mainUrl:"/_next/static/media/Antelope Canyon.b256d31d.jpg",thumbnailUrl:"/_next/static/media/Antelope Canyon.min.12cd76c8.jpg",description:"Antelope Canyon"},{mainUrl:"/_next/static/media/Snowman.9e958fc3.jpg",thumbnailUrl:"/_next/static/media/Snowman.min.0880285c.jpg",description:"Snowman"},{mainUrl:l.src,thumbnailUrl:m.src,description:"Beach"},{mainUrl:"/_next/static/media/Black Eyed Susanne.05674ca1.jpg",thumbnailUrl:"/_next/static/media/Black Eyed Susanne.min.7abe0521.jpg",description:"Black Eyed Susanne"},{mainUrl:"/_next/static/media/Butterfly.9b7b1263.jpg",thumbnailUrl:"/_next/static/media/Butterfly.min.d4960e35.jpg",description:"Butterfly"},{mainUrl:"/_next/static/media/Button.cf4dc418.jpg",thumbnailUrl:"/_next/static/media/Button.min.9ccb52ee.jpg",description:"Button"},{mainUrl:n.src,thumbnailUrl:o.src,description:"Fountain"},{mainUrl:"/_next/static/media/Gray Pansy.bdf172f9.jpg",thumbnailUrl:"/_next/static/media/Gray Pansy.min.7d331321.jpg",description:"Gray Pansy"},{mainUrl:"/_next/static/media/Ocean.6763187e.jpg",thumbnailUrl:"/_next/static/media/Ocean.min.07655516.jpg",description:"Ocean"},{mainUrl:"/_next/static/media/Arctic Ground Squirrel.77164533.jpg",thumbnailUrl:"/_next/static/media/Arctic Ground Squirrel.min.d1732f31.jpg",description:"Arctic Ground Squirrel"},{mainUrl:p.src,thumbnailUrl:q.src,description:"Steel Wool"}],s=[{mainUrl:p.src,thumbnailUrl:q.src,description:"Steel Wool"},{mainUrl:l.src,thumbnailUrl:m.src,description:"Beach"},{mainUrl:n.src}],t=[{mainUrl:q.src,thumbnailUrl:q.src,description:"Steel Wool"},{mainUrl:m.src,thumbnailUrl:m.src,description:"Beach"},{mainUrl:o.src}],u={src:"/_next/static/media/edit.023c8e49.svg",height:24,width:24},v={src:"/_next/static/media/delete.5a45305b.svg",height:24,width:24},w=!1;function x(){var a=function(a){navigator.clipboard&&navigator.clipboard.writeText(a).then(function(){new j.Z("Copied to clipboard \uD83D\uDC4D")},function(a){new j.Z("cannot copy \uD83D\uDC4E")})},b=new i.Z;return setTimeout(function(){!w&& void 0===b.get("IV_WelcomeMsg")&&(w=!0,new j.Z("Welcome to Awesome Image Viewer! \uD83D\uDC4B",{position:"top-center",timeout:2e3,afterHide:function(){new j.Z("Click on code sections to run the demo",{position:"top-center",timeout:0,actionText:"Got it",onAction:function(){return b.set("IV_WelcomeMsg","yes",{path:"/",maxAge:864e5})}})}}))},2e3),(0,d.jsxs)("div",{id:"window",style:{scrollBehavior:"smooth"},children:[(0,d.jsxs)(f(),{children:[(0,d.jsx)("title",{children:"Awesome Image Viewer | React, Angular, Vue, and Typescript compatible image viewer"}),(0,d.jsx)("meta",{name:"viewport",content:"initial-scale=1.0, width=device-width"})]}),(0,d.jsxs)("header",{id:"header",children:[(0,d.jsx)(h(),{href:"https://awesome-components.com",children:(0,d.jsx)("a",{className:"headerLink",children:"Awesome Components"})}),(0,d.jsx)(h(),{href:"https://buymeacoffee.com/mostafamdzh",children:(0,d.jsx)("a",{className:"headerLink",id:"coffee",children:"buy me a coffee! :)"})})]}),(0,d.jsx)("div",{className:"container",id:"intro",children:(0,d.jsxs)("div",{id:"main",children:[(0,d.jsx)("div",{id:"navigation",children:(0,d.jsxs)("div",{id:"navigationWrapper",children:[(0,d.jsx)("a",{className:"navLink",href:"#intro",children:"intro "}),(0,d.jsx)("a",{className:"navLink",href:"#installation",children:"installation "}),(0,d.jsx)("a",{className:"navLink",href:"#images-format",children:"images format "}),(0,d.jsx)("a",{className:"navLink",href:"#current-selected",children:"current selected"}),(0,d.jsx)("a",{className:"navLink",href:"#cover-size",children:"cover size "}),(0,d.jsx)("a",{className:"navLink",href:"#thumbnails",children:"thumbnails "}),(0,d.jsx)("a",{className:"navLink",href:"#zoom",children:"zoom "}),(0,d.jsx)("a",{className:"navLink",href:"#custom-buttons",children:"custom buttons "})]})}),(0,d.jsxs)("div",{id:"content",children:[(0,d.jsx)("a",{href:"https://github.com/MostafaMDZH/Awesome-Image-Viewer",id:"github",children:"Github"}),(0,d.jsx)("h3",{id:"awesome",children:(0,d.jsx)(h(),{href:"/",children:"Awesome"})}),(0,d.jsxs)("div",{id:"name-versionWrapper",children:[(0,d.jsx)("h1",{id:"appName",children:(0,d.jsx)(h(),{href:"/",children:"Image Viewer"})}),(0,d.jsx)("a",{id:"version",children:"V1.0.60"})]}),(0,d.jsx)("p",{className:"sectionDescription",children:"React, Angular, Vue, and Typescript compatible image viewer"}),(0,d.jsx)("h3",{className:"sectionName",id:"features",children:(0,d.jsx)("a",{children:"# Features"})}),(0,d.jsxs)("ul",{className:"features",children:[(0,d.jsx)("li",{children:"Lazy Loading"}),(0,d.jsx)("li",{children:"Zoomable"}),(0,d.jsx)("li",{children:"Custom Buttons"}),(0,d.jsx)("li",{children:"Description"}),(0,d.jsx)("li",{children:"Custom Select"}),(0,d.jsx)("li",{children:"Swipe On Touchscreen"}),(0,d.jsx)("li",{children:"Cover Size"}),(0,d.jsx)("li",{children:"Thumbnail Support"}),(0,d.jsx)("li",{children:"Navigation With Arrow Keys"}),(0,d.jsx)("li",{children:"Responsive Design"}),(0,d.jsx)("li",{children:"Dynamic HTML"}),(0,d.jsx)("li",{children:"Lightweight"}),(0,d.jsx)("li",{children:"Zero Dependency"})]}),(0,d.jsx)("h3",{className:"sectionName",id:"installation",children:(0,d.jsx)("a",{href:"#installation",children:"# Installation"})}),(0,d.jsxs)("p",{className:"step",children:[(0,d.jsxs)("a",{className:"bold",children:[">"," step 1 : "]}),"you can use either npm or yarn, or import the main file with the script tag."]}),(0,d.jsxs)("div",{className:"codeWrapper",children:[(0,d.jsx)("p",{className:"comment",children:"# npm"}),(0,d.jsx)("button",{className:"codeSection copyable",onClick:function(){return a("npm i awesome-image-viewer")},children:(0,d.jsxs)("p",{children:["npm i ",(0,d.jsx)("span",{children:"awesome-image-viewer"})]})}),(0,d.jsx)("p",{className:"comment",children:"# yarn"}),(0,d.jsx)("button",{className:"codeSection copyable",onClick:function(){return a("yarn add awesome-image-viewer")},children:(0,d.jsxs)("p",{children:["yarn add ",(0,d.jsx)("span",{children:"awesome-image-viewer"})]})}),(0,d.jsxs)("p",{className:"comment",children:["# html (download the imageViewer.js file from the\xa0",(0,d.jsx)("a",{href:"https://github.com/MostafaMDZH/Awesome-Image-Viewer/tree/main/src",children:"src"}),"\xa0directory)"]}),(0,d.jsx)("button",{className:"codeSection copyable",onClick:function(){return a('')},children:(0,d.jsxs)("p",{children:['']})})]}),(0,d.jsxs)("p",{className:"step",children:[(0,d.jsxs)("a",{className:"bold",children:[">"," step 2 : "]}),"include the package in your code:"]}),(0,d.jsxs)("div",{className:"codeWrapper",children:[(0,d.jsx)("p",{className:"comment",children:"# npm and yarn"}),(0,d.jsx)("button",{className:"codeSection copyable",onClick:function(){return a("import ImageViewer from 'awesome-image-viewer'")},children:(0,d.jsxs)("p",{children:["import ",(0,d.jsx)("span",{children:"ImageViewer"})," from ",(0,d.jsx)("span",{children:"'awesome-image-viewer'"})]})})]}),(0,d.jsxs)("p",{className:"step",children:[(0,d.jsxs)("a",{className:"bold",children:[">"," step 3 : "]}),"start showing your images!"]}),(0,d.jsx)("div",{className:"codeWrapper",children:(0,d.jsx)("button",{className:"codeSection executable",onClick:function(){new k.Z({images:r})},children:(0,d.jsxs)("p",{children:[(0,d.jsx)("span",{children:"new ImageViewer"}),"({",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0","images: myImages",(0,d.jsx)("br",{}),"});"]})})}),(0,d.jsx)("h3",{className:"sectionName",id:"images-format",children:(0,d.jsx)("a",{href:"#images-format",children:"# Images Format"})}),(0,d.jsx)("p",{className:"sectionDescription",children:"The format of the images should be like this:"}),(0,d.jsxs)("div",{className:"codeWrapper",children:[(0,d.jsx)("p",{className:"comment",children:"# The thumbnail and description are optional"}),(0,d.jsx)("button",{className:"codeSection executable",onClick:function(){new k.Z({images:s})},children:(0,d.jsxs)("p",{children:["const data = [",(0,d.jsx)("br",{}),"\xa0\xa0","{",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"mainUrl"}),": 'cdn.com/img1.jpg',",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"thumbnailUrl"}),": 'cdn.com/img1.min.jpg',",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"description"}),": 'Steel Wool',",(0,d.jsx)("br",{}),"\xa0\xa0","},",(0,d.jsx)("br",{}),"\xa0\xa0","{",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"mainUrl"}),": 'cdn.com/img2.jpg',",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"thumbnailUrl"}),": 'cdn.com/img2.min.jpg',",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"description"}),": 'Beach',",(0,d.jsx)("br",{}),"\xa0\xa0","},",(0,d.jsx)("br",{}),"\xa0\xa0","{",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"mainUrl"}),": 'cdn.com/img3.jpg',",(0,d.jsx)("br",{}),"\xa0\xa0","},",(0,d.jsx)("br",{}),"\xa0\xa0","...",(0,d.jsx)("br",{}),"]"]})})]}),(0,d.jsx)("h3",{className:"sectionName",id:"current-selected",children:(0,d.jsx)("a",{href:"#current-selected",children:"# Current Selected"})}),(0,d.jsx)("p",{className:"sectionDescription",children:"Instead of the first image, you can select whatever you want:"}),(0,d.jsxs)("div",{className:"codeWrapper",children:[(0,d.jsx)("p",{className:"comment",children:"# Index starts from one"}),(0,d.jsx)("button",{className:"codeSection executable",onClick:function(){new k.Z({images:s,currentSelected:1})},children:(0,d.jsxs)("p",{children:["new ImageViewer({",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0","images: sampleImages,",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"currentSelected"}),": 2",(0,d.jsx)("br",{}),"});"]})})]}),(0,d.jsx)("h3",{className:"sectionName",id:"cover-size",children:(0,d.jsx)("a",{href:"#cover-size",children:"# Cover Size"})}),(0,d.jsx)("p",{className:"sectionDescription",children:"If you set the stretchImages to true, it would stretch the small images to fill the page:"}),(0,d.jsxs)("div",{className:"codeWrapper",children:[(0,d.jsx)("p",{className:"comment",children:"# default:"}),(0,d.jsx)("button",{className:"codeSection executable",onClick:function(){new k.Z({images:t,stretchImages:!1})},children:(0,d.jsxs)("p",{children:["new ImageViewer({",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0","images: smallSampleImages",(0,d.jsx)("br",{}),"});"]})}),(0,d.jsx)("p",{className:"comment",children:"# stretch:"}),(0,d.jsx)("button",{className:"codeSection executable",onClick:function(){new k.Z({images:t,stretchImages:!0})},children:(0,d.jsxs)("p",{children:["new ImageViewer({",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0","images: smallSampleImages,",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"stretchImages"}),": true",(0,d.jsx)("br",{}),"});"]})})]}),(0,d.jsx)("h3",{className:"sectionName",id:"thumbnails",children:(0,d.jsx)("a",{href:"#thumbnails",children:"# Thumbnails"})}),(0,d.jsx)("p",{className:"sectionDescription",children:"If you don't specify the thumbnail image, the main image will be used as the thumbnail. but if you don't want to show the thumbnails, you can set the showThumbnails to false:"}),(0,d.jsx)("div",{className:"codeWrapper",children:(0,d.jsx)("button",{className:"codeSection executable",onClick:function(){new k.Z({images:s,showThumbnails:!1})},children:(0,d.jsxs)("p",{children:["new ImageViewer({",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0","images: sampleImages,",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"showThumbnails"}),": false",(0,d.jsx)("br",{}),"});"]})})}),(0,d.jsx)("h3",{className:"sectionName",id:"zoom",children:(0,d.jsx)("a",{href:"#zoom",children:"# Zoom"})}),(0,d.jsx)("p",{className:"sectionDescription",children:"Zooming is available with the zoom button or double tap, but you can disable it with isZoomable parameter:"}),(0,d.jsx)("div",{className:"codeWrapper",children:(0,d.jsx)("button",{className:"codeSection executable",onClick:function(){new k.Z({images:s,isZoomable:!1})},children:(0,d.jsxs)("p",{children:["new ImageViewer({",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0","images: sampleImages,",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"isZoomable"}),": false",(0,d.jsx)("br",{}),"});"]})})}),(0,d.jsx)("h3",{className:"sectionName",id:"custom-buttons",children:(0,d.jsx)("a",{href:"#custom-buttons",children:"# Custom Buttons"})}),(0,d.jsx)("p",{className:"sectionDescription",children:"You can add some custom buttons:"}),(0,d.jsxs)("div",{className:"codeWrapper",children:[(0,d.jsx)("p",{className:"comment",children:"# iconSize is optional (default value is '19px auto')"}),(0,d.jsx)("button",{className:"codeSection executable",onClick:function(){new k.Z({images:s,buttons:[{name:"Edit",iconSrc:u.src,onSelect:function(){return alert("Edit selected!")}},{name:"Delete",iconSrc:v.src,iconSize:"18px auto",onSelect:function(){return alert("Delete selected!")}}]})},children:(0,d.jsxs)("p",{children:["new ImageViewer({",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0","images: sampleImages,",(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"buttons: ["}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"{"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"name: 'Edit',"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"iconSrc: 'cdn.con/icons/edit.svg',"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"onSelect: () => alert('Edit selected!')"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"},"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"{"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"name: 'Delete',"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"iconSrc: 'cdn.con/icons/delete.svg',"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"iconSize: '18px auto',"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"onSelect: () => alert('Delete selected!')"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"}"}),(0,d.jsx)("br",{}),"\xa0\xa0\xa0\xa0",(0,d.jsx)("span",{children:"]"}),(0,d.jsx)("br",{})," });"]})})]})]})]})}),(0,d.jsxs)("footer",{id:"footer",children:[(0,d.jsxs)("p",{children:["Made with ♡ by ",(0,d.jsx)("a",{href:"https://github.com/MostafaMDZH",children:"Mostafa Mohammadzadeh"})]}),(0,d.jsx)("p",{id:"dash",children:"-"}),(0,d.jsxs)("p",{id:"githubLink",children:["Source on ",(0,d.jsx)("a",{href:"https://github.com/MostafaMDZH/Awesome-Image-Viewer",children:"Github"})]}),(0,d.jsxs)("p",{id:"awesomeComponents",children:["From ",(0,d.jsx)(h(),{href:"https://awesome-components.com",children:(0,d.jsx)("a",{children:"Awesome Components"})})]})]})]})}}},function(a){a.O(0,[16,774,888,179],function(){var b;return a(a.s=5557)}),_N_E=a.O()}]) \ No newline at end of file diff --git a/website/out/index.html b/website/out/index.html index 6d837f5..c3972cc 100644 --- a/website/out/index.html +++ b/website/out/index.html @@ -1 +1 @@ -Awesome Image Viewer | React, Angular, Vue, and Typescript compatible image viewer
Github

Awesome

React, Angular, Vue, and Typescript compatible image viewer

# Features

  • Lazy Loading
  • Zoomable
  • Custom Buttons
  • Description
  • Custom Select
  • Swipe On Touchscreen
  • Cover Size
  • Thumbnail Support
  • Navigation With Arrow Keys
  • Responsive Design
  • Dynamic HTML
  • Lightweight
  • Zero Dependency

# Installation

> step 1 : you can use either npm or yarn, or import the main file with the script tag.

# npm

# yarn

# html (download the imageViewer.js file from the src directory)

> step 2 : include the package in your code:

# npm and yarn

> step 3 : start showing your images!

# Images Format

The format of the images should be like this:

# The thumbnail and description are optional

# Current Selected

Instead of the first image, you can select whatever you want:

# Index starts from one

# Cover Size

If you set the stretchImages to true, it would stretch the small images to fill the page:

# default:

# stretch:

# Thumbnails

If you don't specify the thumbnail image, the main image will be used as the thumbnail. but if you don't want to show the thumbnails, you can set the showThumbnails to false:

# Zoom

Zooming is available with the zoom button or double tap, but you can disable it with isZoomable parameter:

# Custom Buttons

You can add some custom buttons:

# iconSize is optional (default value is '19px auto')

\ No newline at end of file +Awesome Image Viewer | React, Angular, Vue, and Typescript compatible image viewer
Github

Awesome

React, Angular, Vue, and Typescript compatible image viewer

# Features

  • Lazy Loading
  • Zoomable
  • Custom Buttons
  • Description
  • Custom Select
  • Swipe On Touchscreen
  • Cover Size
  • Thumbnail Support
  • Navigation With Arrow Keys
  • Responsive Design
  • Dynamic HTML
  • Lightweight
  • Zero Dependency

# Installation

> step 1 : you can use either npm or yarn, or import the main file with the script tag.

# npm

# yarn

# html (download the imageViewer.js file from the src directory)

> step 2 : include the package in your code:

# npm and yarn

> step 3 : start showing your images!

# Images Format

The format of the images should be like this:

# The thumbnail and description are optional

# Current Selected

Instead of the first image, you can select whatever you want:

# Index starts from one

# Cover Size

If you set the stretchImages to true, it would stretch the small images to fill the page:

# default:

# stretch:

# Thumbnails

If you don't specify the thumbnail image, the main image will be used as the thumbnail. but if you don't want to show the thumbnails, you can set the showThumbnails to false:

# Zoom

Zooming is available with the zoom button or double tap, but you can disable it with isZoomable parameter:

# Custom Buttons

You can add some custom buttons:

# iconSize is optional (default value is '19px auto')

\ No newline at end of file diff --git a/website/pages/index.js b/website/pages/index.js index d3092c8..4821060 100644 --- a/website/pages/index.js +++ b/website/pages/index.js @@ -83,7 +83,7 @@ export default function Main(){

Awesome

Image Viewer

- V1.0.59 + V1.0.60

React, Angular, Vue, and Typescript compatible image viewer