https://abg.gg/tags/demos/ Recent content in Demos on ABG.GG Hugo en-us <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC 4.0</a> Mon, 23 Sep 2024 15:10:27 +0000 https://abg.gg/game-collecting/demos/ Mon, 23 Sep 2024 15:10:27 +0000 https://abg.gg/game-collecting/demos/ <script src="https://abg.gg/shortcode-gallery/jquery-3.7.1.min.js"></script> <script src="https://abg.gg/shortcode-gallery/swipebox/js/jquery.swipebox.min.js"></script> <link rel="stylesheet" href="https://abg.gg/shortcode-gallery/swipebox/css/swipebox.min.css"> <script src="https://abg.gg/shortcode-gallery/justified_gallery/jquery.justifiedGallery.min.js"></script> <link rel="stylesheet" href="https://abg.gg/shortcode-gallery/justified_gallery/justifiedGallery.min.css"> <script> if (!("HSCGjQuery" in window)) { if (!window.jQuery) { throw new Error("jQuery not loaded"); } window.HSCGjQuery = window.jQuery.noConflict(true); } (function($) { $(document).ready(function() { $(document).on('click', '#swipebox-slider .slide', function(e) { if ($(e.target).hasClass('slide')) { $('#swipebox-close').trigger('click'); } }); var initialised = {}; document.querySelectorAll('.game-images[data-gallery]').forEach(function(el) { el.addEventListener('toggle', function() { var id = this.getAttribute('data-gallery'); if (this.open && !initialised[id]) { initialised[id] = true; document.querySelectorAll('#' + id + ' img[data-src]').forEach(function(img) { img.src = img.getAttribute('data-src'); }); $('#' + id).justifiedGallery({ rowHeight: 150, margins: 5, border: 0, waitThumbnailsLoad: true, lastRow: 'justify' }).on('jg.complete', function() { $(this).find('a').swipebox(); $(this).find('.jg-entry a[data-orig-url]').each(function() { var origUrl = $(this).data('orig-url'); var origName = $(this).data('orig-name'); var btn = $('<a>') .attr('href', origUrl) .attr('download', origName) .attr('title', 'Download full-resolution original') .addClass('img-dl-btn') .html('&#8595;') .on('click', function(e) { e.stopPropagation(); }); $(this).parent().append(btn); }); }); } }); }); }); })(window.HSCGjQuery); </script> <style> .game-entry { margin-bottom: 1.5rem; } .game-entry h3 { margin-bottom: 0.2rem; } .game-notes { font-size: 0.875em; opacity: 0.7; margin: 0.1rem 0 0.4rem; font-style: italic; } .game-meta { display: flex; flex-wrap: wrap; gap: 0.15rem 1.5rem; margin: 0.2rem 0 0.5rem; font-size: 0.875em; opacity: 0.7; } .game-images > summary { cursor: pointer; user-select: none; font-size: 0.875em; opacity: 0.8; padding: 0.2rem 0; } .game-images > summary:hover { opacity: 1; } .game-images .justified-gallery { margin-top: 0.5rem; } .img-dl-btn { position: absolute; bottom: 6px; right: 6px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); color: #fff; border-radius: 4px; font-size: 14px; text-decoration: none; opacity: 0; transition: opacity 0.15s; z-index: 10; } .jg-entry:hover .img-dl-btn { opacity: 1; } .game-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin-top: 0.6rem; font-size: 0.8em; } .game-downloads .dl-label { opacity: 0.6; } .game-downloads a { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.5rem; border: 1px solid currentColor; border-radius: 3px; text-decoration: none; opacity: 0.7; } .game-downloads a:hover { opacity: 1; } .game-list-subtitle { font-size: 0.875em; opacity: 0.7; margin-top: 0; margin-bottom: 1.5rem; } </style> <p class="game-list-subtitle">To download a full resolution version of any image, hover over it and click the download button in the bottom right of the image. <br /><br />If anything is broken, or you need additional/better images from anything, please email <a href="mailto:images@abg.gg">images@abg.gg</a>.</p>