|
|
| Line 7: |
Line 7: |
| | | | |
| | <head> | | <head> |
| - | <link rel='stylesheet prefetch' href='http://genert.laal.ee/snippets/reset.css'>
| + | |
| | <style> | | <style> |
| | h1 { | | h1 { |
| Line 122: |
Line 122: |
| | </style> | | </style> |
| | | | |
| - | <style> <!--=========== lightbox css =====-->
| |
| - | .container ul {
| |
| - | list-style: none;
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | }
| |
| - | .container ul li {
| |
| - | display: inline-block;
| |
| - | margin: 0.7em;
| |
| - | }
| |
| - | .container ul li img {
| |
| - | width: 200px;
| |
| - | height: auto;
| |
| - | -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
| |
| - | -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
| |
| - | box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
| |
| - | }
| |
| - | .container ul .social li {
| |
| - | margin: 0;
| |
| - | margin-top: 1em;
| |
| - | }
| |
| | | | |
| - | #simplbox-loading {
| |
| - | position: fixed;
| |
| - | z-index: 10003;
| |
| - | top: 50%;
| |
| - | left: 50%;
| |
| - | }
| |
| - | #simplbox-loading:before {
| |
| - | display: block;
| |
| - | width: 8px;
| |
| - | height: 8px;
| |
| - | background-color: #ccc;
| |
| - | content: "";
| |
| - | -moz-border-radius: 50%;
| |
| - | -webkit-border-radius: 50%;
| |
| - | border-radius: 50%;
| |
| - | -moz-animation: loader 1s linear infinite;
| |
| - | -webkit-animation: loader 1s linear infinite;
| |
| - | animation: loader 1s linear infinite;
| |
| - | -moz-transform-origin: 8px 8px;
| |
| - | -ms-transform-origin: 8px 8px;
| |
| - | -webkit-transform-origin: 8px 8px;
| |
| - | transform-origin: 8px 8px;
| |
| - | }
| |
| - |
| |
| - | @-moz-keyframes loader {
| |
| - | 0% {
| |
| - | opacity: 1;
| |
| - | -moz-transform: rotate(360deg) scale(1.5);
| |
| - | transform: rotate(360deg) scale(1.5);
| |
| - | }
| |
| - | 50% {
| |
| - | opacity: 0.5;
| |
| - | -moz-transform: rotate(180deg) scale(1);
| |
| - | transform: rotate(180deg) scale(1);
| |
| - | }
| |
| - | 100% {
| |
| - | opacity: 1;
| |
| - | -moz-transform: rotate(0deg) scale(1.5);
| |
| - | transform: rotate(0deg) scale(1.5);
| |
| - | }
| |
| - | }
| |
| - | @-webkit-keyframes loader {
| |
| - | 0% {
| |
| - | opacity: 1;
| |
| - | -webkit-transform: rotate(360deg) scale(1.5);
| |
| - | transform: rotate(360deg) scale(1.5);
| |
| - | }
| |
| - | 50% {
| |
| - | opacity: 0.5;
| |
| - | -webkit-transform: rotate(180deg) scale(1);
| |
| - | transform: rotate(180deg) scale(1);
| |
| - | }
| |
| - | 100% {
| |
| - | opacity: 1;
| |
| - | -webkit-transform: rotate(0deg) scale(1.5);
| |
| - | transform: rotate(0deg) scale(1.5);
| |
| - | }
| |
| - | }
| |
| - | @keyframes loader {
| |
| - | 0% {
| |
| - | opacity: 1;
| |
| - | -moz-transform: rotate(360deg) scale(1.5);
| |
| - | -ms-transform: rotate(360deg) scale(1.5);
| |
| - | -webkit-transform: rotate(360deg) scale(1.5);
| |
| - | transform: rotate(360deg) scale(1.5);
| |
| - | }
| |
| - | 50% {
| |
| - | opacity: 0.5;
| |
| - | -moz-transform: rotate(180deg) scale(1);
| |
| - | -ms-transform: rotate(180deg) scale(1);
| |
| - | -webkit-transform: rotate(180deg) scale(1);
| |
| - | transform: rotate(180deg) scale(1);
| |
| - | }
| |
| - | 100% {
| |
| - | opacity: 1;
| |
| - | -moz-transform: rotate(0deg) scale(1.5);
| |
| - | -ms-transform: rotate(0deg) scale(1.5);
| |
| - | -webkit-transform: rotate(0deg) scale(1.5);
| |
| - | transform: rotate(0deg) scale(1.5);
| |
| - | }
| |
| - | }
| |
| - | #simplbox-close {
| |
| - | width: 2.3em;
| |
| - | height: 2.3em;
| |
| - | text-align: center;
| |
| - | background-color: #F4F4F4;
| |
| - | border-radius: 50%;
| |
| - | position: fixed;
| |
| - | z-index: 10002;
| |
| - | top: 2em;
| |
| - | right: 2em;
| |
| - | cursor: pointer;
| |
| - | }
| |
| - | #simplbox-close:before, #simplbox-close:after {
| |
| - | width: 2px;
| |
| - | background-color: #404040;
| |
| - | content: "";
| |
| - | position: absolute;
| |
| - | top: 20%;
| |
| - | bottom: 20%;
| |
| - | left: 50%;
| |
| - | margin-left: -1px;
| |
| - | }
| |
| - | #simplbox-close:after {
| |
| - | -moz-transform: rotate(45deg);
| |
| - | -ms-transform: rotate(45deg);
| |
| - | -webkit-transform: rotate(45deg);
| |
| - | transform: rotate(45deg);
| |
| - | }
| |
| - | #simplbox-close:before {
| |
| - | -moz-transform: rotate(-45deg);
| |
| - | -ms-transform: rotate(-45deg);
| |
| - | -webkit-transform: rotate(-45deg);
| |
| - | transform: rotate(-45deg);
| |
| - | }
| |
| - |
| |
| - | #simplbox-overlay {
| |
| - | background-color: #F4F4F4;
| |
| - | background-color: rgba(0, 0, 0, 0.9);
| |
| - | position: fixed;
| |
| - | z-index: 9998;
| |
| - | top: 0;
| |
| - | right: 0;
| |
| - | bottom: 0;
| |
| - | left: 0;
| |
| - | }
| |
| - |
| |
| - | #simplbox-caption {
| |
| - | text-align: center;
| |
| - | color: #404040;
| |
| - | font-size: 18px;
| |
| - | background-color: #F4F4F4;
| |
| - | position: fixed;
| |
| - | z-index: 10001;
| |
| - | left: 0;
| |
| - | right: 0;
| |
| - | bottom: 0;
| |
| - | padding: 13px;
| |
| - | }
| |
| - | </style>
| |
| | </head> | | </head> |
| | | | |
| Line 306: |
Line 145: |
| | </div> <!-- end of container--> | | </div> <!-- end of container--> |
| | | | |
| - | <ul>
| |
| - | <li>
| |
| - | <a href="http://genert.laal.ee/demo/simplbox/gfx/image_09.jpg" data-simplbox="demo5"><img src="http://genert.laal.ee/demo/simplbox/gfx/image_09_thumb.jpg" alt="Image 09" /></a>
| |
| - | </li>
| |
| - | <li>
| |
| - | <a href="http://genert.laal.ee/demo/simplbox/gfx/image_10.jpg" data-simplbox="demo5"><img src="http://genert.laal.ee/demo/simplbox/gfx/image_10_thumb.jpg" alt="Image 10" /></a>
| |
| - | </li>
| |
| - | </ul>
| |
| - | </section>
| |
| - | <div class="github-fork-ribbon-wrapper right">
| |
| - | <div class="github-fork-ribbon">
| |
| - | <a href="https://github.com/Dendrochronologyy/SimplBox">Fork me on GitHub</a>
| |
| - | </div>
| |
| - | </div>
| |
| | | | |
| | <!--==================== footer ===========================--> | | <!--==================== footer ===========================--> |
| Line 337: |
Line 162: |
| | </div> <!-- end of #footer --> | | </div> <!-- end of #footer --> |
| | | | |
| - | <script src='http://genert.laal.ee/demo/simplbox/js/simplbox.js'></script>
| |
| - |
| |
| - | <script>
| |
| - | // Demo example functions.
| |
| - | var preLoadIconOn = function () {
| |
| - | var newE = document.createElement("div"),
| |
| - | newB = document.createElement("div");
| |
| - | newE.setAttribute("id", "simplbox-loading");
| |
| - | newE.appendChild(newB);
| |
| - | document.body.appendChild(newE);
| |
| - | },
| |
| - | preLoadIconOff = function () {
| |
| - | var elE = document.getElementById("simplbox-loading");
| |
| - | elE.parentNode.removeChild(elE);
| |
| - | },
| |
| - | overlayOn = function () {
| |
| - | var newA = document.createElement("div");
| |
| - | newA.setAttribute("id", "simplbox-overlay");
| |
| - | document.body.appendChild(newA);
| |
| - | },
| |
| - | overlayOff = function () {
| |
| - | var elA = document.getElementById("simplbox-overlay");
| |
| - | elA.parentNode.removeChild(elA);
| |
| - | },
| |
| - | closeButtonOn = function (base) {
| |
| - | var newE = document.createElement("div");
| |
| - | newE.setAttribute("id", "simplbox-close");
| |
| - | document.body.appendChild(newE);
| |
| - | newE = document.getElementById("simplbox-close");
| |
| - | base.API_AddEvent(newE, "click touchend", function () {
| |
| - | base.API_RemoveImageElement();
| |
| - | return false;
| |
| - | });
| |
| - | },
| |
| - | closeButtonOff = function () {
| |
| - | var elA = document.getElementById("simplbox-close");
| |
| - | elA.parentNode.removeChild(elA);
| |
| - | },
| |
| - | captionOn = function (base) {
| |
| - | var element = document.getElementById("simplbox-caption"),
| |
| - | documentFragment = document.createDocumentFragment(),
| |
| - | newElement = document.createElement("div"),
| |
| - | newText = document.createTextNode(base.m_Alt);
| |
| - |
| |
| - | if (element) {
| |
| - | element.parentNode.removeChild(element);
| |
| - | }
| |
| - |
| |
| - | newElement.setAttribute("id", "simplbox-caption");
| |
| - | newElement.appendChild(newText);
| |
| - | documentFragment.appendChild(newElement);
| |
| - | document.getElementsByTagName("body")[0].appendChild(documentFragment);
| |
| - | },
| |
| - | captionOff = function () {
| |
| - | var element = document.getElementById("simplbox-caption");
| |
| - | element.parentNode.removeChild(element);
| |
| - | };
| |
| - |
| |
| - |
| |
| - |
| |
| - | var E = new SimplBox(document.querySelectorAll("[data-simplbox='demo5']"), {
| |
| - | quitOnDocumentClick: false,
| |
| - | onStart: function () {
| |
| - | overlayOn();
| |
| - | closeButtonOn(E);
| |
| - | },
| |
| - | onEnd: function () {
| |
| - | overlayOff();
| |
| - | closeButtonOff();
| |
| - | captionOff();
| |
| - | },
| |
| - | onImageLoadStart: function () {
| |
| - | preLoadIconOn();
| |
| - | captionOn(E);
| |
| - | },
| |
| - | onImageLoadEnd: function () {
| |
| - | preLoadIconOff();
| |
| - | }
| |
| - | });
| |
| - | E.init();
| |
| - | </script>
| |
| | | | |
| | </body> | | </body> |
| | </html> | | </html> |
"
