|
|
| Line 145: |
Line 145: |
| | </div> <!-- end of container--> | | </div> <!-- end of container--> |
| | | | |
| - | <section class="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>
| + | |
| | | | |
| | <!--==================== footer ===========================--> | | <!--==================== footer ===========================--> |
| Line 172: |
Line 163: |
| | </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);
| |
| - | };
| |
| | | | |
| - | // 5th row
| |
| - | 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> |
"
