/* * Zoomer v3.0.12 - 2014-11-25 * A jQuery plugin for smooth image exploration. Part of the formstone library. * http://formstone.it/components/zoomer/ * * Copyright 2014 Ben Plum; MIT Licensed */ html, body { -ms-content-zooming: none; -ms-touch-action: none; } .zoomer .zoomer-holder { -ms-touch-action: none; } .zoomer, .zoomer * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .zoomer { background: #eee url(jquery.fs.zoomer-loading.gif) no-repeat center; height: 100%; overflow: hidden; position: relative; width: 100%; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .zoomer .zoomer-positioner { margin: 0; height: 1px; position: absolute; width: 1px; } .zoomer .zoomer-holder { box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); opacity: 0; position: relative; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .zoomer .zoomer-image { cursor: move; float: left; height: 100%; width: 100%; -webkit-transition: opacity 0.25 linear; -moz-transition: opacity 0.25 linear; -ms-transition: opacity 0.25 linear; -o-transition: opacity 0.25 linear; transition: opacity 0.25 linear; } .zoomer .zoomer-tiles { height: 100%; position: relative; width: 100%; } .zoomer .zoomer-tile { height: auto; position: absolute; width: auto; } /* CONTROLS */ .zoomer .zoomer-controls { background: rgba(0, 0, 0, 0.8); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius: 3px; padding: 5px; position: absolute; -webkit-transition: opacity 0.25 linear; -moz-transition: opacity 0.25 linear; -ms-transition: opacity 0.25 linear; -o-transition: opacity 0.25 linear; transition: opacity 0.25 linear; } .zoomer .zoomer-controls span { border-radius: 3px; color: #fff; cursor: pointer; display: block; font-size: 20px; font-weight: bold; height: 30px; line-height: 30px; margin: 0; text-align: center; width: 30px; } .zoomer .zoomer-controls .zoomer-next, .zoomer .zoomer-controls .zoomer-previous { display: none; } .zoomer.zoomer-gallery .zoomer-controls .zoomer-next, .zoomer.zoomer-gallery .zoomer-controls .zoomer-previous { display: block; } /* CONTROLS - TOP, BOTTOM */ .zoomer .zoomer-controls-top, .zoomer .zoomer-controls-bottom { left: 50%; margin: 0 0 0 -35px; } .zoomer .zoomer-controls-top { bottom: auto; top: 10px; } .zoomer .zoomer-controls-bottom { bottom: 10px; top: auto; } .zoomer.zoomer-gallery .zoomer-controls-top, .zoomer.zoomer-gallery .zoomer-controls-bottom { margin: 0 0 0 -65px; } .zoomer .zoomer-controls-top span, .zoomer .zoomer-controls-bottom span { float: left; } .zoomer .zoomer-controls-top span:first-child, .zoomer .zoomer-controls-bottom span:first-child { margin: 0 1px 0 0; } /* CONTROLS - LEFT, RIGHT, TOP LEFT, TOP RIGHT, BOTTOM LEFT, BOTTOM RIGHT */ .zoomer .zoomer-controls-left, .zoomer .zoomer-controls-top-left, .zoomer .zoomer-controls-bottom-left .zoomer .zoomer-controls-right, .zoomer .zoomer-controls-top-right, .zoomer .zoomer-controls-bottom-right { height: 71px; width: 40px; } .zoomer.zoomer-gallery .zoomer-controls-left, .zoomer.zoomer-gallery .zoomer-controls-top-left, .zoomer.zoomer-gallery .zoomer-controls-bottom-left .zoomer.zoomer-gallery .zoomer-controls-right, .zoomer.zoomer-gallery .zoomer-controls-top-right, .zoomer.zoomer-gallery .zoomer-controls-bottom-right { height: 131px; } .zoomer .zoomer-controls-left, .zoomer .zoomer-controls-right { margin: -35px 0 0 0; top: 50%; } .zoomer.zoomer-gallery .zoomer-controls-left, .zoomer.zoomer-gallery .zoomer-controls-right { margin: -65px 0 0 0; } .zoomer .zoomer-controls-left { left: 10px; } .zoomer .zoomer-controls-top-left { left: 10px; top: 10px; } .zoomer .zoomer-controls-bottom-left { bottom: 10px; left: 10px; } .zoomer .zoomer-controls-right { right: 10px; } .zoomer .zoomer-controls-top-right { right: 10px; top: 10px; } .zoomer .zoomer-controls-bottom-right { bottom: 10px; right: 10px; } @media screen and (min-width: 980px) { .zoomer .zoomer-controls span:hover { background: #000; } }