diff --git a/.husky/.gitignore b/.husky/.gitignore new file mode 100644 index 0000000..31354ec --- /dev/null +++ b/.husky/.gitignore @@ -0,0 +1 @@ +_ diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..36af219 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +npx lint-staged diff --git a/.node-version b/.node-version index 641c7df..8ddbc0c 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -v8.9.4 +v18.16.0 diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..4c4f65b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "bracketSameLine": true, + "printWidth": 100, + "semi": true, + "singleQuote": true, + "tabWidth": 2 +} diff --git a/css/smartphoto.css b/css/smartphoto.css index cf26384..f9d3623 100644 --- a/css/smartphoto.css +++ b/css/smartphoto.css @@ -27,7 +27,7 @@ @keyframes smartphoto-loader { 0% { - opacity: .4; + opacity: 0.4; transform: rotate(0deg); } 50% { @@ -35,7 +35,7 @@ transform: rotate(180deg); } 100% { - opacity: .4; + opacity: 0.4; transform: rotate(360deg); } } @@ -93,7 +93,7 @@ animation-timing-function: ease-out; } -.smartphoto[aria-hidden="true"] { +.smartphoto[aria-hidden='true'] { display: none; } @@ -103,7 +103,7 @@ .smartphoto-count { display: inline-block; - color: #FFF; + color: #fff; font-size: 16px; } @@ -140,12 +140,13 @@ border: none; background-color: transparent; background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI4MzQuNjUgMjgzNC42NSIgZmlsbD0iI0ZGRiI+PHRpdGxlPmljb248L3RpdGxlPjxwYXRoIGQ9Ik0xNTc2LjQyLDE0MDYuNzYsMjc4NCwxOTkuMTlhNTYuODYsNTYuODYsMCwwLDAsMC04MC4xOGwtNzguOTItNzguOTJhNTYuODYsNTYuODYsMCwwLDAtODAuMTgsMEwxNDE3LjMyLDEyNDcuNjYsMjA5Ljc1LDQwLjA5YTU2Ljg2LDU2Ljg2LDAsMCwwLTgwLjE4LDBMNTAuNjUsMTE5YTU2Ljg2LDU2Ljg2LDAsMCwwLDAsODAuMThMMTI1OC4yMywxNDA2Ljc2LDUwLjY1LDI2MTQuMzRhNTYuODYsNTYuODYsMCwwLDAsMCw4MC4xOGw3OC45Miw3OC45MmE1Ni44Niw1Ni44NiwwLDAsMCw4MC4xOCwwTDE0MTcuMzIsMTU2NS44NiwyNjI0LjksMjc3My40NGE1Ni44Niw1Ni44NiwwLDAsMCw4MC4xOCwwbDc4LjkyLTc4LjkyYTU2Ljg2LDU2Ljg2LDAsMCwwLDAtODAuMThaIi8+PC9zdmc+); - text-shadow: 0 1px 0 #FFF; - color: #FFF; + text-shadow: 0 1px 0 #fff; + color: #fff; font-size: 30px; text-decoration: none; cursor: pointer; line-height: 1; + z-index: 102; } .smartphoto-body { @@ -226,7 +227,7 @@ animation-timing-function: ease-out; } -.smartphoto-arrows[aria-hidden="true"] { +.smartphoto-arrows[aria-hidden='true'] { animation-name: smartphoto-hide; display: none; } @@ -248,7 +249,7 @@ outline: none; } -.smartphoto-arrows [aria-hidden="true"] { +.smartphoto-arrows [aria-hidden='true'] { animation-name: smartphoto-hide; display: none; } @@ -295,7 +296,7 @@ animation-timing-function: ease-out; } -.smartphoto-nav[aria-hidden="true"] { +.smartphoto-nav[aria-hidden='true'] { animation-name: smartphoto-hide; display: none; } @@ -322,14 +323,14 @@ display: block; width: 100%; height: 100%; - background-color: #FFF; + background-color: #fff; background-position: center center; background-size: cover; - opacity: .5; + opacity: 0.5; } .smartphoto-nav a:focus { - opacity: .8; + opacity: 0.8; } .smartphoto-nav a.current { @@ -379,7 +380,7 @@ width: 100%; height: 50px; padding: 0 50px; - color: #FFF; + color: #fff; font-size: 12px; text-align: center; line-height: 50px; @@ -409,10 +410,10 @@ height: 30px; margin-top: -25px; margin-left: -25px; - border: 8px solid #17CDDD; + border: 8px solid #17cddd; border-right-color: transparent; border-radius: 50%; - animation: smartphoto-loader .5s infinite linear; + animation: smartphoto-loader 0.5s infinite linear; } .smartphoto-img-clone { diff --git a/css/smartphoto.min.css b/css/smartphoto.min.css index 710a190..4099939 100644 --- a/css/smartphoto.min.css +++ b/css/smartphoto.min.css @@ -1 +1,386 @@ -@keyframes smartphoto{from{opacity:0}to{opacity:1}}@keyframes smartphoto-img-wrap{from{opacity:0}to{opacity:1}}@keyframes smartphoto-inner{from{transform:translate(0, 100px)}to{transform:translate(0, 0)}}@keyframes smartphoto-loader{0%{opacity:.4;transform:rotate(0deg)}50%{opacity:1;transform:rotate(180deg)}100%{opacity:.4;transform:rotate(360deg)}}@keyframes smartphoto-appear{0%{display:none;opacity:0}1%{display:block;opacity:0}100%{display:block;opacity:1}}@keyframes smartphoto-hide{0%{display:block;opacity:1}99%{display:block;opacity:0}100%{display:none;opacity:0}}.smartphoto{position:fixed;z-index:100;top:0;left:0;width:100%;height:100%;overflow:hidden;background-color:#000;opacity:1;font-family:sans-serif;cursor:pointer;-webkit-transition:opacity .3s ease-out;-moz-transition:opacity .3s ease-out;-ms-transition:opacity .3s ease-out;-o-transition:opacity .3s ease-out;transition:opacity .3s ease-out;transition:all 0.3s ease-out;animation-name:smartphoto;animation-duration:.3s;animation-timing-function:ease-out}.smartphoto[aria-hidden="true"]{display:none}.smartphoto-close{opacity:0}.smartphoto-count{display:inline-block;color:#FFF;font-size:16px}.smartphoto-header{display:block;box-sizing:border-box;position:fixed;z-index:102;top:0;left:0;width:100%;height:50px;padding:15px;background-color:rgba(0,0,0,0.2)}.smartphoto-content{display:block;position:absolute;top:0;left:0;width:100%;height:100%}.smartphoto-dismiss{display:block;position:absolute;top:15px;right:10px;width:20px;height:20px;padding:0;border:none;background-color:transparent;background-image:url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI4MzQuNjUgMjgzNC42NSIgZmlsbD0iI0ZGRiI+PHRpdGxlPmljb248L3RpdGxlPjxwYXRoIGQ9Ik0xNTc2LjQyLDE0MDYuNzYsMjc4NCwxOTkuMTlhNTYuODYsNTYuODYsMCwwLDAsMC04MC4xOGwtNzguOTItNzguOTJhNTYuODYsNTYuODYsMCwwLDAtODAuMTgsMEwxNDE3LjMyLDEyNDcuNjYsMjA5Ljc1LDQwLjA5YTU2Ljg2LDU2Ljg2LDAsMCwwLTgwLjE4LDBMNTAuNjUsMTE5YTU2Ljg2LDU2Ljg2LDAsMCwwLDAsODAuMThMMTI1OC4yMywxNDA2Ljc2LDUwLjY1LDI2MTQuMzRhNTYuODYsNTYuODYsMCwwLDAsMCw4MC4xOGw3OC45Miw3OC45MmE1Ni44Niw1Ni44NiwwLDAsMCw4MC4xOCwwTDE0MTcuMzIsMTU2NS44NiwyNjI0LjksMjc3My40NGE1Ni44Niw1Ni44NiwwLDAsMCw4MC4xOCwwbDc4LjkyLTc4LjkyYTU2Ljg2LDU2Ljg2LDAsMCwwLDAtODAuMThaIi8+PC9zdmc+);text-shadow:0 1px 0 #FFF;color:#FFF;font-size:30px;text-decoration:none;cursor:pointer;line-height:1}.smartphoto-body{position:relative;z-index:102;width:100%;height:100%;margin:0 auto}.smartphoto-inner{position:relative;width:100%;height:100%;vertical-align:top}.smartphoto-img{display:none;max-width:none;width:auto;height:auto;cursor:zoom-in;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:transform 0.3s ease-out;-webkit-user-drag:none}.smartphoto-img.active{display:block}.smartphoto-img-onmove{cursor:grab;cursor:-webkit-grab;transition:none}.smartphoto-img-elasticmove{transition:transform 0.3s ease-out}.smartphoto-img-wrap{display:inline-block;opacity:1;-webkit-transition:opacity .3s ease-out;-moz-transition:opacity .3s ease-out;-ms-transition:opacity .3s ease-out;-o-transition:opacity .3s ease-out;transition:opacity .3s ease-out;animation-name:smartphoto-img-wrap;animation-duration:.3s;animation-timing-function:ease-out}.smartphoto-img-left{transform:translateX(150%) !important}.smartphoto-img-right{transform:translateX(-150%) !important}.smartphoto-arrows{list-style-type:none;margin:0;padding:0;position:relative;z-index:1002;top:50%;left:0;opacity:1;animation-name:smartphoto-appear;animation-duration:.3s;animation-timing-function:ease-out}.smartphoto-arrows[aria-hidden="true"]{animation-name:smartphoto-hide;display:none}.smartphoto-arrows li{display:block;position:absolute;top:50%;width:30px;height:30px;margin-top:-20px;box-sizing:content-box;animation-duration:.3s;animation-timing-function:ease-out;animation-name:smartphoto-appear}.smartphoto-arrows li:focus{outline:none}.smartphoto-arrows [aria-hidden="true"]{animation-name:smartphoto-hide;display:none}.smartphoto-arrows a{display:block;width:100%;height:100%;text-decoration:none}.smartphoto-arrow-right{right:0;padding:5px 0;background-color:rgba(0,0,0,0.5)}.smartphoto-arrow-right a{background-image:url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI4MzQuNjUgMjgzNC42NSIgZmlsbD0iI0ZGRiAiPjx0aXRsZT5pY29uPC90aXRsZT48cGF0aCBkPSJNMTgzNy44OCwxNDE3LjMyLDY0My41OSwyMjNhNzIuMjEsNzIuMjEsMCwwLDEsMC0xMDEuODJMNzQzLjgyLDIxYTcyLjIxLDcyLjIxLDAsMCwxLDEwMS44MiwwTDIwOTAuODMsMTI2Ni4xOWwxMDAuMjMsMTAwLjIzYTcyLjIxLDcyLjIxLDAsMCwxLDAsMTAxLjgyTDg0NS42NCwyODEzLjY1YTcyLjIxLDcyLjIxLDAsMCwxLTEwMS44MiwwTDY0My41OSwyNzEzLjQyYTcyLjIxLDcyLjIxLDAsMCwxLDAtMTAxLjgyWiIvPjwvc3ZnPg==)}.smartphoto-arrow-left{left:0;padding:5px 0;background-color:rgba(0,0,0,0.5)}.smartphoto-arrow-left a{background-image:url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI4MzQuNjUgMjgzNC42NSIgZmlsbD0iI0ZGRiI+PHRpdGxlPmljb248L3RpdGxlPjxwYXRoIGQ9Ik05OTYuNzcsMTQxNy4zMiwyMTkxLjA2LDIyM2E3Mi4yMSw3Mi4yMSwwLDAsMCwwLTEwMS44MkwyMDkwLjgzLDIxQTcyLjIxLDcyLjIxLDAsMCwwLDE5ODksMjFMNzQzLjgyLDEyNjYuMTksNjQzLjU5LDEzNjYuNDJhNzIuMjEsNzIuMjEsMCwwLDAsMCwxMDEuODJMMTk4OSwyODEzLjY1YTcyLjIxLDcyLjIxLDAsMCwwLDEwMS44MiwwbDEwMC4yMy0xMDAuMjNhNzIuMjEsNzIuMjEsMCwwLDAsMC0xMDEuODJaIi8+PC9zdmc+)}.smartPhotoArrowHideIcon{display:none}.smartphoto-nav{position:absolute;bottom:0;left:0;width:100%;opacity:1;animation-name:smartphoto-appear;animation-duration:.3s;animation-timing-function:ease-out}.smartphoto-nav[aria-hidden="true"]{animation-name:smartphoto-hide;display:none}.smartphoto-nav ul{display:block;overflow-x:auto;list-style:none;margin:0;padding:0;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.smartphoto-nav li{display:inline-block;overflow:hidden;width:50px;height:50px}.smartphoto-nav a{display:block;width:100%;height:100%;background-color:#FFF;background-position:center center;background-size:cover;opacity:.5}.smartphoto-nav a:focus{opacity:.8}.smartphoto-nav a.current{opacity:1}.smartphoto-nav img{width:auto;height:100%}.smartphoto-list{list-style-type:none;position:absolute;z-index:101;top:0;left:0;margin:0;padding:0;white-space:nowrap}.smartphoto-list li{display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:all 0.3s ease-out}.smartphoto-list li:focus{outline:none}.smartphoto-list-onmove{transition:all 0.3s ease-out}.smartphoto-caption{overflow:hidden;box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:50px;padding:0 50px;color:#FFF;font-size:12px;text-align:center;line-height:50px;white-space:nowrap;text-overflow:ellipsis}.smartphoto-caption:focus{outline:none}.smartphoto-loader-wrap{display:block;position:relative;z-index:103;width:0;height:0;transform:translate(50vw, 50vh)}.smartphoto-loader{position:absolute;z-index:101;top:0;left:0;width:30px;height:30px;margin-top:-25px;margin-left:-25px;border:8px solid #17CDDD;border-right-color:transparent;border-radius:50%;animation:smartphoto-loader .5s infinite linear}.smartphoto-img-clone{position:fixed;z-index:100;top:0;left:0;transition:all .3s ease-out}.smartphoto-sr-only{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0, 0, 0, 0)} +@keyframes smartphoto { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes smartphoto-img-wrap { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes smartphoto-inner { + from { + transform: translate(0, 100px); + } + to { + transform: translate(0, 0); + } +} +@keyframes smartphoto-loader { + 0% { + opacity: 0.4; + transform: rotate(0deg); + } + 50% { + opacity: 1; + transform: rotate(180deg); + } + 100% { + opacity: 0.4; + transform: rotate(360deg); + } +} +@keyframes smartphoto-appear { + 0% { + display: none; + opacity: 0; + } + 1% { + display: block; + opacity: 0; + } + 100% { + display: block; + opacity: 1; + } +} +@keyframes smartphoto-hide { + 0% { + display: block; + opacity: 1; + } + 99% { + display: block; + opacity: 0; + } + 100% { + display: none; + opacity: 0; + } +} +.smartphoto { + position: fixed; + z-index: 100; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + background-color: #000; + opacity: 1; + font-family: sans-serif; + cursor: pointer; + -webkit-transition: opacity 0.3s ease-out; + -moz-transition: opacity 0.3s ease-out; + -ms-transition: opacity 0.3s ease-out; + -o-transition: opacity 0.3s ease-out; + transition: opacity 0.3s ease-out; + transition: all 0.3s ease-out; + animation-name: smartphoto; + animation-duration: 0.3s; + animation-timing-function: ease-out; +} +.smartphoto[aria-hidden='true'] { + display: none; +} +.smartphoto-close { + opacity: 0; +} +.smartphoto-count { + display: inline-block; + color: #fff; + font-size: 16px; +} +.smartphoto-header { + display: block; + box-sizing: border-box; + position: fixed; + z-index: 102; + top: 0; + left: 0; + width: 100%; + height: 50px; + padding: 15px; + background-color: rgba(0, 0, 0, 0.2); +} +.smartphoto-content { + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.smartphoto-dismiss { + display: block; + position: absolute; + top: 15px; + right: 10px; + width: 20px; + height: 20px; + padding: 0; + border: none; + background-color: transparent; + background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI4MzQuNjUgMjgzNC42NSIgZmlsbD0iI0ZGRiI+PHRpdGxlPmljb248L3RpdGxlPjxwYXRoIGQ9Ik0xNTc2LjQyLDE0MDYuNzYsMjc4NCwxOTkuMTlhNTYuODYsNTYuODYsMCwwLDAsMC04MC4xOGwtNzguOTItNzguOTJhNTYuODYsNTYuODYsMCwwLDAtODAuMTgsMEwxNDE3LjMyLDEyNDcuNjYsMjA5Ljc1LDQwLjA5YTU2Ljg2LDU2Ljg2LDAsMCwwLTgwLjE4LDBMNTAuNjUsMTE5YTU2Ljg2LDU2Ljg2LDAsMCwwLDAsODAuMThMMTI1OC4yMywxNDA2Ljc2LDUwLjY1LDI2MTQuMzRhNTYuODYsNTYuODYsMCwwLDAsMCw4MC4xOGw3OC45Miw3OC45MmE1Ni44Niw1Ni44NiwwLDAsMCw4MC4xOCwwTDE0MTcuMzIsMTU2NS44NiwyNjI0LjksMjc3My40NGE1Ni44Niw1Ni44NiwwLDAsMCw4MC4xOCwwbDc4LjkyLTc4LjkyYTU2Ljg2LDU2Ljg2LDAsMCwwLDAtODAuMThaIi8+PC9zdmc+); + text-shadow: 0 1px 0 #fff; + color: #fff; + font-size: 30px; + text-decoration: none; + cursor: pointer; + line-height: 1; + z-index: 102; +} +.smartphoto-body { + position: relative; + z-index: 102; + width: 100%; + height: 100%; + margin: 0 auto; +} +.smartphoto-inner { + position: relative; + width: 100%; + height: 100%; + vertical-align: top; +} +.smartphoto-img { + display: none; + max-width: none; + width: auto; + height: auto; + cursor: zoom-in; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + transition: transform 0.3s ease-out; + -webkit-user-drag: none; +} +.smartphoto-img.active { + display: block; +} +.smartphoto-img-onmove { + cursor: grab; + cursor: -webkit-grab; + transition: none; +} +.smartphoto-img-elasticmove { + transition: transform 0.3s ease-out; +} +.smartphoto-img-wrap { + display: inline-block; + opacity: 1; + -webkit-transition: opacity 0.3s ease-out; + -moz-transition: opacity 0.3s ease-out; + -ms-transition: opacity 0.3s ease-out; + -o-transition: opacity 0.3s ease-out; + transition: opacity 0.3s ease-out; + animation-name: smartphoto-img-wrap; + animation-duration: 0.3s; + animation-timing-function: ease-out; +} +.smartphoto-img-left { + transform: translateX(150%) !important; +} +.smartphoto-img-right { + transform: translateX(-150%) !important; +} +.smartphoto-arrows { + list-style-type: none; + margin: 0; + padding: 0; + position: relative; + z-index: 1002; + top: 50%; + left: 0; + opacity: 1; + animation-name: smartphoto-appear; + animation-duration: 0.3s; + animation-timing-function: ease-out; +} +.smartphoto-arrows[aria-hidden='true'] { + animation-name: smartphoto-hide; + display: none; +} +.smartphoto-arrows li { + display: block; + position: absolute; + top: 50%; + width: 30px; + height: 30px; + margin-top: -20px; + box-sizing: content-box; + animation-duration: 0.3s; + animation-timing-function: ease-out; + animation-name: smartphoto-appear; +} +.smartphoto-arrows li:focus { + outline: none; +} +.smartphoto-arrows [aria-hidden='true'] { + animation-name: smartphoto-hide; + display: none; +} +.smartphoto-arrows a { + display: block; + width: 100%; + height: 100%; + text-decoration: none; +} +.smartphoto-arrow-right { + right: 0; + padding: 5px 0; + background-color: rgba(0, 0, 0, 0.5); +} +.smartphoto-arrow-right a { + background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI4MzQuNjUgMjgzNC42NSIgZmlsbD0iI0ZGRiAiPjx0aXRsZT5pY29uPC90aXRsZT48cGF0aCBkPSJNMTgzNy44OCwxNDE3LjMyLDY0My41OSwyMjNhNzIuMjEsNzIuMjEsMCwwLDEsMC0xMDEuODJMNzQzLjgyLDIxYTcyLjIxLDcyLjIxLDAsMCwxLDEwMS44MiwwTDIwOTAuODMsMTI2Ni4xOWwxMDAuMjMsMTAwLjIzYTcyLjIxLDcyLjIxLDAsMCwxLDAsMTAxLjgyTDg0NS42NCwyODEzLjY1YTcyLjIxLDcyLjIxLDAsMCwxLTEwMS44MiwwTDY0My41OSwyNzEzLjQyYTcyLjIxLDcyLjIxLDAsMCwxLDAtMTAxLjgyWiIvPjwvc3ZnPg==); +} +.smartphoto-arrow-left { + left: 0; + padding: 5px 0; + background-color: rgba(0, 0, 0, 0.5); +} +.smartphoto-arrow-left a { + background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0i44Os44Kk44Ok44O8XzEiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI4MzQuNjUgMjgzNC42NSIgZmlsbD0iI0ZGRiI+PHRpdGxlPmljb248L3RpdGxlPjxwYXRoIGQ9Ik05OTYuNzcsMTQxNy4zMiwyMTkxLjA2LDIyM2E3Mi4yMSw3Mi4yMSwwLDAsMCwwLTEwMS44MkwyMDkwLjgzLDIxQTcyLjIxLDcyLjIxLDAsMCwwLDE5ODksMjFMNzQzLjgyLDEyNjYuMTksNjQzLjU5LDEzNjYuNDJhNzIuMjEsNzIuMjEsMCwwLDAsMCwxMDEuODJMMTk4OSwyODEzLjY1YTcyLjIxLDcyLjIxLDAsMCwwLDEwMS44MiwwbDEwMC4yMy0xMDAuMjNhNzIuMjEsNzIuMjEsMCwwLDAsMC0xMDEuODJaIi8+PC9zdmc+); +} +.smartPhotoArrowHideIcon { + display: none; +} +.smartphoto-nav { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + opacity: 1; + animation-name: smartphoto-appear; + animation-duration: 0.3s; + animation-timing-function: ease-out; +} +.smartphoto-nav[aria-hidden='true'] { + animation-name: smartphoto-hide; + display: none; +} +.smartphoto-nav ul { + display: block; + overflow-x: auto; + list-style: none; + margin: 0; + padding: 0; + text-align: center; + white-space: nowrap; + -webkit-overflow-scrolling: touch; +} +.smartphoto-nav li { + display: inline-block; + overflow: hidden; + width: 50px; + height: 50px; +} +.smartphoto-nav a { + display: block; + width: 100%; + height: 100%; + background-color: #fff; + background-position: center center; + background-size: cover; + opacity: 0.5; +} +.smartphoto-nav a:focus { + opacity: 0.8; +} +.smartphoto-nav a.current { + opacity: 1; +} +.smartphoto-nav img { + width: auto; + height: 100%; +} +.smartphoto-list { + list-style-type: none; + position: absolute; + z-index: 101; + top: 0; + left: 0; + margin: 0; + padding: 0; + white-space: nowrap; +} +.smartphoto-list li { + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transition: all 0.3s ease-out; +} +.smartphoto-list li:focus { + outline: none; +} +.smartphoto-list-onmove { + transition: all 0.3s ease-out; +} +.smartphoto-caption { + overflow: hidden; + box-sizing: border-box; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 50px; + padding: 0 50px; + color: #fff; + font-size: 12px; + text-align: center; + line-height: 50px; + white-space: nowrap; + text-overflow: ellipsis; +} +.smartphoto-caption:focus { + outline: none; +} +.smartphoto-loader-wrap { + display: block; + position: relative; + z-index: 103; + width: 0; + height: 0; + transform: translate(50vw, 50vh); +} +.smartphoto-loader { + position: absolute; + z-index: 101; + top: 0; + left: 0; + width: 30px; + height: 30px; + margin-top: -25px; + margin-left: -25px; + border: 8px solid #17cddd; + border-right-color: transparent; + border-radius: 50%; + animation: smartphoto-loader 0.5s infinite linear; +} +.smartphoto-img-clone { + position: fixed; + z-index: 100; + top: 0; + left: 0; + transition: all 0.3s ease-out; +} +.smartphoto-sr-only { + overflow: hidden; + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + border: 0; + clip: rect(0, 0, 0, 0); +} diff --git a/examples/jquery.html b/examples/jquery.html index 0d377f6..a7f39e2 100644 --- a/examples/jquery.html +++ b/examples/jquery.html @@ -42,26 +42,6 @@
-
-
-
-
-
-
-
-
-