| /gallery.html |
|---|
| @@ -20,6 +20,8 @@ |
|---|
| <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> |
| <!-- blueimp gallery --> |
| <link rel="stylesheet" href="bower_components/blueimp-gallery/css/blueimp-gallery.min.css"> |
| <!-- Swiper --> |
| <link rel="stylesheet" href="bower_components/swiper/dist/css/swiper.min.css"> |
| |
| <!-- Site-wide style CCS --> |
| <link href="css/style.css" rel="stylesheet"> |
| @@ -69,8 +71,19 @@ |
|---|
| <a class="play-pause"></a> |
| <ol class="indicator"></ol> |
| </div> |
| |
| <div id="links"> |
| |
| <div class="swiper-container"> |
| <div id="links" class="swiper-wrapper"> |
| </div> |
| <!-- If we need pagination --> |
| <div class="swiper-pagination"></div> |
| |
| <!-- If we need navigation buttons --> |
| <div class="swiper-button-prev"></div> |
| <div class="swiper-button-next"></div> |
| |
| <!-- If we need scrollbar --> |
| <div class="swiper-scrollbar"></div> |
| </div> |
| </div> |
| </div> |
| @@ -95,6 +108,10 @@ |
|---|
| <script src="bower_components/clipboard/dist/clipboard.min.js"></script> |
| <!-- YAML --> |
| <script src="bower_components/yaml.js/dist/yaml.min.js"></script> |
| <!-- Swiper --> |
| <script src="bower_components/swiper/dist/js/swiper.min.js"></script> |
| <!-- Wizardry and Steamworks --> |
| <script src="bower_components/was/dist/was.min.js"></script> |
| <script> |
| $(document).ready(() => { |
| |
| @@ -103,8 +120,9 @@ |
|---|
| var $element = $('<div>') |
| .addClass('text-content') |
| .attr('title', obj.title); |
| $.get(obj.href) |
| .done(function (result) { |
| $.get(obj.href, { |
| timestamp: window.performance.now() |
| }).done(function (result) { |
| $element.html(result); |
| callback({ |
| type: 'load', |
| @@ -120,27 +138,39 @@ |
|---|
| return $element[0]; |
| }; |
| |
| $.getJSON('gallery.php').then((data) => { |
| $.getJSON('gallery.php', { |
| timestamp: window.performance.now() |
| }).then((data) => { |
| //alert(JSON.stringify(data, null, 4)); |
| |
| data.forEach((link) => { |
| // Generic icon for text / html items. |
| switch(link.type) { |
| case 'text/plain': |
| link.preview ='img/text.png'; |
| break; |
| } |
| // Create slides. |
| var index = 0; |
| data.chunk(50).forEach((page) => { |
| document.getElementById('links') |
| .insertAdjacentHTML( |
| 'beforeend', |
| '<a href="' + |
| link.url + |
| '" type="' + |
| link.type + |
| '"><img src="' + |
| link.preview + |
| '" width="60" height="40"></a>' |
| ); |
| 'beforeend', |
| '<div id="swiper-slide-' + index + '" class="swiper-slide"></div>' |
| ); |
| page.forEach((link) => { |
| // Generic icon for text / html items. |
| switch(link.type) { |
| case 'text/plain': |
| link.preview ='img/text.png'; |
| break; |
| } |
| document.getElementById('swiper-slide-' + index) |
| .insertAdjacentHTML( |
| 'beforeend', |
| '<a href="' + |
| link.url + |
| '" type="' + |
| link.type + |
| '"><img src="' + |
| link.preview + |
| '" width="60" height="40"></a>' |
| ); |
| }); |
| ++index; |
| }); |
| document.getElementById('links').onclick = function (event) { |
| event = event || window.event; |
| @@ -194,6 +224,22 @@ |
|---|
| blueimp.Gallery(links, options); |
| }; |
| |
| new Swiper ('.swiper-container', { |
| // Optional parameters |
| direction: 'horizontal', |
| loop: true, |
| |
| // If we need pagination |
| pagination: '.swiper-pagination', |
| |
| // Navigation arrows |
| nextButton: '.swiper-button-next', |
| prevButton: '.swiper-button-prev', |
| |
| // And if we need scrollbar |
| scrollbar: '.swiper-scrollbar', |
| }); |
| |
| // Enable the Clipboard button. |
| new Clipboard('#copy-url'); |
| }); |
