write some docs and fixup demo

1 files changed, 1 insertions, 269 deletions

diff --git a/dist/touch-imagelightbox.css b/dist/touch-imagelightbox.css
index cb28641..f1ca31d 100644
--- a/dist/touch-imagelightbox.css
+++ b/dist/touch-imagelightbox.css
@@ -1,269 +1 @@
-html {
-  -ms-touch-action: manipulation;
-  touch-action: manipulation;
-}
-
-#imagelightbox {
-  -ms-touch-action: none;
-  touch-action: none;
-  -moz-box-shadow: rgba(0, 0, 0, 0.75) 0 0 50px;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 0 0 50px;
-  box-shadow: rgba(0, 0, 0, 0.75) 0 0 50px;
-  cursor: pointer;
-  position: fixed;
-  z-index: 10000;
-}
-
-#imagelightbox-loading,
-#imagelightbox-loading div {
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-}
-
-#imagelightbox-loading {
-  -moz-box-shadow: rgba(0, 0, 0, 0.75) 0 0 40px;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 0 0 40px;
-  box-shadow: rgba(0, 0, 0, 0.75) 0 0 40px;
-  background: #444;
-  background: rgba(0, 0, 0, 0.5);
-  height: 20px;
-  left: 50%;
-  margin: -20px 0 0 -20px;
-  padding: 10px;
-  position: fixed;
-  top: 50%;
-  width: 20px;
-  z-index: 10003;
-}
-#imagelightbox-loading div {
-  -moz-animation: imagelightbox-loading .5s ease infinite;
-  -o-animation: imagelightbox-loading .5s ease infinite;
-  -webkit-animation: imagelightbox-loading .5s ease infinite;
-  animation: imagelightbox-loading .5s ease infinite;
-  background-color: #fff;
-  height: 20px;
-  width: 20px;
-}
-
-@-webkit-keyframes imagelightbox-loading {
-  0% {
-    opacity: .5;
-    -webkit-transform: scale(0.75);
-  }
-
-  50% {
-    opacity: 1;
-    -webkit-transform: scale(1);
-  }
-
-  100% {
-    opacity: .5;
-    -webkit-transform: scale(0.75);
-  }
-}
-@-moz-keyframes imagelightbox-loading {
-  0% {
-    opacity: .5;
-    -moz-transform: scale(0.75);
-  }
-
-  50% {
-    opacity: 1;
-    -moz-transform: scale(1);
-  }
-
-  100% {
-    opacity: .5;
-    -moz-transform: scale(0.75);
-  }
-}
-@-o-keyframes imagelightbox-loading {
-  0% {
-    opacity: .5;
-    -o-transform: scale(0.75);
-  }
-
-  50% {
-    opacity: 1;
-    -o-transform: scale(1);
-  }
-
-  100% {
-    opacity: .5;
-    -o-transform: scale(0.75);
-  }
-}
-@keyframes imagelightbox-loading {
-  0% {
-    opacity: .5;
-    transform: scale(0.75);
-  }
-
-  50% {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  100% {
-    opacity: .5;
-    transform: scale(0.75);
-  }
-}
-#imagelightbox-overlay {
-  background: #fff;
-  background: rgba(255, 255, 255, 0.9);
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 9998;
-}
-
-#imagelightbox-close {
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  background-color: #666;
-  height: 40px;
-  position: fixed;
-  right: 40px;
-  text-align: left;
-  text-indent: -9999px;
-  top: 40px;
-  -moz-transition: color .3s ease;
-  -ms-transition: color .3s ease;
-  -o-transition: color .3s ease;
-  -webkit-transition: color .3s ease;
-  transition: color .3s ease;
-  width: 40px;
-  z-index: 10002;
-}
-#imagelightbox-close:hover {
-  background-color: #111;
-}
-#imagelightbox-close:before, #imagelightbox-close:after {
-  background-color: #fff;
-  bottom: 20%;
-  content: '';
-  left: 50%;
-  margin-left: -1px;
-  position: absolute;
-  top: 20%;
-  width: 2px;
-}
-#imagelightbox-close:before {
-  -moz-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  -webkit-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-#imagelightbox-close:after {
-  -moz-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  -webkit-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-}
-
-#imagelightbox-caption {
-  background-color: #666;
-  bottom: 0;
-  color: #fff;
-  left: 0;
-  padding: 10px;
-  position: fixed;
-  right: 0;
-  text-align: center;
-  z-index: 10001;
-}
-
-#imagelightbox-nav {
-  -moz-border-radius: 20px;
-  -webkit-border-radius: 20px;
-  border-radius: 20px;
-  -moz-transform: translateX(-50%);
-  -ms-transform: translateX(-50%);
-  -webkit-transform: translateX(-50%);
-  transform: translateX(-50%);
-  background-color: #444;
-  background-color: rgba(0, 0, 0, 0.5);
-  bottom: 60px;
-  left: 50%;
-  padding: 5px 2px 1px;
-  position: fixed;
-  z-index: 10001;
-}
-#imagelightbox-nav a {
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  border: 1px solid #fff;
-  display: inline-block;
-  height: 20px;
-  margin: 0 5px;
-  width: 20px;
-}
-#imagelightbox-nav .active {
-  background-color: #fff;
-}
-
-#imagelightbox-loading,
-#imagelightbox-overlay,
-#imagelightbox-close,
-#imagelightbox-caption,
-#imagelightbox-nav {
-  -moz-animation: fade-in .25s linear;
-  -o-animation: fade-in .25s linear;
-  -webkit-animation: fade-in .25s linear;
-  animation: fade-in .25s linear;
-}
-
-@-webkit-keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-@-moz-keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-@-o-keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-@media only screen and (max-width: 660px) {
-  #imagelightbox-close {
-    right: 20px;
-    top: 20px;
-  }
-
-  #imagelightbox-nav {
-    bottom: 20px;
-  }
-}
-
-/*# sourceMappingURL=touch-imagelightbox.css.map */
+#imagelightbox-loading,#imagelightbox-loading div{border-radius:50%}#imagelightbox-loading{box-shadow:rgba(0,0,0,.75)0 0 40px;background:rgba(0,0,0,.5);height:20px;left:50%;margin:-20px 0 0 -20px;padding:10px;position:fixed;top:50%;width:20px;z-index:10003;animation:fade-in .25s linear}#imagelightbox-loading div{animation:imagelightbox-loading .5s ease infinite;background-color:#fff;height:20px;width:20px}@keyframes imagelightbox-loading{0%{opacity:.5;transform:scale(.75)}50%{opacity:1;transform:scale(1)}100%{opacity:.5;transform:scale(.75)}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}#imagelightbox-overlay{background:rgba(255,255,255,.9);bottom:0;left:0;position:fixed;right:0;top:0;z-index:9998;animation:fade-in .25s linear}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}#imagelightbox-close{border-radius:50%;background-color:#666;height:40px;position:fixed;right:40px;text-align:left;text-indent:-9999px;top:40px;transition:color .3s ease;width:40px;z-index:10002;cursor:pointer;animation:fade-in .25s linear}#imagelightbox-close:hover{background-color:#111}#imagelightbox-close:before,#imagelightbox-close:after{background-color:#fff;bottom:20%;content:'';left:50%;margin-left:-1px;position:absolute;top:20%;width:2px}#imagelightbox-close:before{rotate:45deg}#imagelightbox-close:after{rotate:-45deg}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@media only screen and (max-width:660px){#imagelightbox-close{right:20px;top:20px}}#imagelightbox-nav-sink{display:flex;justify-content:center}#imagelightbox-nav{border-radius:20px;animation:fade-in .25s linear;background-color:rgba(0,0,0,.5);bottom:60px;padding:5px 2px 1px;position:fixed;z-index:10001}#imagelightbox-nav a{border-radius:50%;border:1px solid #fff;display:inline-block;height:20px;margin:0 5px;width:20px}#imagelightbox-nav .active{background-color:#fff}@media only screen and (max-width:660px){#imagelightbox-nav{bottom:20px}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}#imagelightbox-caption{background-color:#666;bottom:0;color:#fff;left:0;padding:10px;position:fixed;right:0;text-align:center;z-index:10001;animation:fade-in .25s linear}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}html{-ms-touch-action:manipulation;touch-action:manipulation}#imagelightbox{-ms-touch-action:none;touch-action:none;box-shadow:rgba(0,0,0,.75)0 0 50px;cursor:pointer;position:fixed;z-index:10000}
\ No newline at end of file