You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

225 lines
4.7 KiB

7 years ago
  1. /*
  2. ImageViewer v 1.1.0
  3. Author: Sudhanshu Yadav
  4. Copyright (c) 2015 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
  5. Demo on: http://ignitersworld.com/lab/imageViewer.html
  6. */
  7. /***** image viewer css *****/
  8. #iv-container {
  9. position: fixed;
  10. background: #0d0d0d;
  11. width: 100%;
  12. height: 100%;
  13. top: 0;
  14. left: 0;
  15. display: none;
  16. z-index: 1000;
  17. }
  18. .iv-container {
  19. overflow: hidden;
  20. }
  21. .iv-close {
  22. width: 32px;
  23. height: 32px;
  24. position: absolute;
  25. right: 20px;
  26. top: 20px;
  27. cursor: pointer;
  28. text-align: center;
  29. overflow: hidden;
  30. text-shadow: 0px 0px 3px #6d6d6d;
  31. -webkit-transition: all ease 200ms;
  32. -moz-transition: all ease 200ms;
  33. -o-transition: all ease 200ms;
  34. transition: all ease 200ms;
  35. }
  36. .iv-close:after,
  37. .iv-close:before {
  38. content: "";
  39. height: 4px;
  40. width: 32px;
  41. background: #FFF;
  42. position: absolute;
  43. left: 0;
  44. top: 50%;
  45. margin-top: -2px;
  46. }
  47. .iv-close:before {
  48. -webkit-transform: rotate(45deg);
  49. -moz-transform: rotate(45deg);
  50. -ms-transform: rotate(45deg);
  51. -o-transform: rotate(45deg);
  52. transform: rotate(45deg);
  53. }
  54. .iv-close:after {
  55. -webkit-transform: rotate(-45deg);
  56. -moz-transform: rotate(-45deg);
  57. -ms-transform: rotate(-45deg);
  58. -o-transform: rotate(-45deg);
  59. transform: rotate(-45deg);
  60. }
  61. .iv-close:hover {
  62. -webkit-transform: rotate(90deg);
  63. -moz-transform: rotate(90deg);
  64. -ms-transform: rotate(90deg);
  65. -o-transform: rotate(90deg);
  66. transform: rotate(90deg);
  67. }
  68. /***** snap view css *****/
  69. .iv-snap-view {
  70. width: 150px;
  71. height: 150px;
  72. position: absolute;
  73. top: 20px;
  74. left: 20px;
  75. border: 1px solid #666;
  76. background: black;
  77. z-index: 100;
  78. -webkit-box-sizing: content-box;
  79. -moz-box-sizing: content-box;
  80. box-sizing: content-box;
  81. -webkit-transition: all ease 400ms;
  82. -moz-transition: all ease 400ms;
  83. -o-transition: all ease 400ms;
  84. transition: all ease 400ms;
  85. opacity: 0;
  86. }
  87. .iv-snap-image-wrap {
  88. display: inline-block;
  89. position: absolute;
  90. max-width: 150px;
  91. max-height: 150px;
  92. top: 50%;
  93. left: 50%;
  94. -webkit-transform: translate(-50%, -50%);
  95. -moz-transform: translate(-50%, -50%);
  96. -ms-transform: translate(-50%, -50%);
  97. -o-transform: translate(-50%, -50%);
  98. transform: translate(-50%, -50%);
  99. overflow: hidden;
  100. }
  101. .iv-snap-image {
  102. position: relative;
  103. }
  104. .iv-snap-handle {
  105. position: absolute;
  106. border: 1px solid #ccc;
  107. -webkit-transform: translate3d(0, 0, 0);
  108. -moz-transform: translate3d(0, 0, 0);
  109. -ms-transform: translate3d(0, 0, 0);
  110. -o-transform: translate3d(0, 0, 0);
  111. transform: translate3d(0, 0, 0);
  112. -webkit-box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.5);
  113. -moz-box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.5);
  114. box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.5);
  115. }
  116. /*** zoom slider ***/
  117. .iv-zoom-slider {
  118. width: 100%;
  119. -webkit-box-sizing: content-box;
  120. -moz-box-sizing: content-box;
  121. box-sizing: content-box;
  122. border: 1px solid #666;
  123. border-top: 0;
  124. background: rgba(204, 204, 204, 0.1);
  125. height: 15px;
  126. position: absolute;
  127. top: 150px;
  128. left: -1px;
  129. }
  130. .iv-zoom-handle {
  131. width: 20px;
  132. height: 15px;
  133. background: #ccc;
  134. position: absolute;
  135. }
  136. /**** snap view css end *****/
  137. .iv-image-view {
  138. position: absolute;
  139. height: 100%;
  140. width: 100%;
  141. }
  142. .iv-image-wrap {
  143. display: inline-block;
  144. }
  145. .iv-image-wrap:active {
  146. cursor: move;
  147. }
  148. .iv-large-image {
  149. max-width: 100%;
  150. max-height: 100%;
  151. position: absolute;
  152. -webkit-transform: translate3d(0, 0, 0);
  153. -moz-transform: translate3d(0, 0, 0);
  154. -ms-transform: translate3d(0, 0, 0);
  155. -o-transform: translate3d(0, 0, 0);
  156. transform: translate3d(0, 0, 0);
  157. }
  158. /****** CSS loader by http://projects.lukehaas.me/css-loaders/ *****/
  159. .iv-loader {
  160. top: 50%;
  161. left: 50%;
  162. border-radius: 50%;
  163. width: 32px;
  164. height: 32px;
  165. z-index: 100;
  166. margin-top: -16px;
  167. margin-left: -16px;
  168. font-size: 5px;
  169. position: absolute;
  170. text-indent: -9999em;
  171. border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  172. border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  173. border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  174. border-left: 1.1em solid #ffffff;
  175. -webkit-transform: translateZ(0);
  176. -ms-transform: translateZ(0);
  177. transform: translateZ(0);
  178. -webkit-animation: load8 1.1s infinite linear;
  179. animation: load8 1.1s infinite linear;
  180. }
  181. .iv-loader:after {
  182. width: 10em;
  183. height: 10em;
  184. border-radius: 50%;
  185. }
  186. @-webkit-keyframes load8 {
  187. 0% {
  188. -webkit-transform: rotate(0deg);
  189. transform: rotate(0deg);
  190. }
  191. 100% {
  192. -webkit-transform: rotate(360deg);
  193. transform: rotate(360deg);
  194. }
  195. }
  196. @keyframes load8 {
  197. 0% {
  198. -webkit-transform: rotate(0deg);
  199. transform: rotate(0deg);
  200. }
  201. 100% {
  202. -webkit-transform: rotate(360deg);
  203. transform: rotate(360deg);
  204. }
  205. }
  206. @media screen and (max-width: 767px) {
  207. .iv-snap-view {
  208. z-index: -1;
  209. visibility: hidden;
  210. }
  211. }