Infinite Scroller Image Gallery

[2020-05-23] :: #1

by Snj

HTML

<a href="javascript:void(0)" class="openbtn" onclick="openNavT()">⍽</a>
    <div id="mywrapper" class="mywrapper">
      <div id="myNavT" class="overlay">
        <header>
          <div id="header_info" class="header--page-info my-font">
            <p id="header_pagetitle" class="info__pagetitle"></p>
            <p id="header_pagenr" class="info__pagenr"></p>
            <p id="header_loadedimgs" class="info__loadedimgs"></p>
          </div>
          <nav>
            <div id="inputSlider_div" class="inputslider">
              <input type="range" class="myrange" id="myrange" min="100" max="500" value="260">
              <a href="javascript:void(0)" class="closebtn my-font" onclick="closeNavT()">&times;</a>
            </div>
            <button id="checkButton"  onclick="populate()" class="checkButton my-font">Run/Check</button>
            <input type="checkbox" class="mycheckbox my-font" id="scrollreverse" name="scrollreverse" value="reverse">
            <!-- <label for="scrollreverse" class="my-font">Reversed</label> -->
          </nav>
        </header>
        <div class="overlay-content">
          <div id="mycontainer" class="mycontainer">
          <!-- <section id='steezy'>
            <div class="imgbox" id="id_imgbox">
              <div class="box">
                <a href="https://unsplash.it/700/500/?random" target="_blank"><img class="img_div show_image" src="https://unsplash.it/218/225/?random"></a>
              </div>
              <div class="box">
                <a href="https://unsplash.it/700/500/?random" target="_blank"><img class="img_div show_image" src="https://unsplash.it/353/255/?random"></a>  
              </div>
              <div class="box">
                <a href="https://unsplash.it/700/500/?random" target="_blank"><img class="img_div show_image" src="https://unsplash.it/248/435/?random"></a>  
              </div>
              <div class="box">
                <a href="https://unsplash.it/670/490/?random"...

CSS

:root { --size: 260px; }
*, * ::before, * ::after { box-sizing: border-box; }

body {
  background-color: #ecf0f1;
  font-family: monospace;
  font-size: 16px;
  overflow: hide; }

.my-font {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 13px;
  color: rgb(189, 183, 171);
  text-shadow: rgba(51, 40, 39, 0.64) -4px 4px 11px, rgba(94, 47, 55, 0.71) -1px 3px 15px;
  letter-spacing: 0.4px;
  word-spacing: 5.2px;
  color: #888888;
  font-weight: 550;
  font-style: inherit;
  font-variant: normal;
  text-transform: capitalize;
  text-decoration: none;
  transition: 0.3s; }

.openbtn {
  color: rgba(0, 0, 0, 0.48);
  text-decoration: none;
  position: fixed;
  text-align: center;
  cursor: pointer;
  z-index: 6;
  top: 0;
  right: 25px;
  width: 1em;
  font-size: 45px;
  background-color: rgba(125, 125, 125, 0.53); }
  .openbtn a:hover,
  .openbtn a:focus {
    color: #ccc; }
    
.closebtn {
  font-size: 40px;
  line-height: 0;
  padding: 12px 25px 0px 25px; }

.closebtn a:hover,
.closebtn a:focus {
  color: #ccc; }


.inputslider {
  --size: 380px;
  transition: 0.5s filter linear;
  display: flex; }

.myrange {
  flex-grow: 2;
  /*filter: opacity(0) blur(20px) invert(0.9);*/
  transition: 0.5s filter linear; }

.mywrapper {
    position: fixed; 
    overflow: hide;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1;
    font-family: monospace;
    transition: padding-top .5s ease; }
.inputslider {
  display: flex; }
.myrange {
  flex-grow: 2;
  transition: padding-top .5s ease; }

.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    padding-top: 33px;
    height: 100%;
    overflow-y: scroll;
    transition: padding-top .3s ease;
    background-color: #383838 !important;
    transition: width 0.2s; }
header {
  width: calc(100% - 1.4rem);
  height: 150px;
  z-index: 5;
  position: relative;
  position: fixed;
  top: 0;
  background-color: rgb(33, 34, 35);
  box-shadow: rgba(80, 60, 59, 0.48) 0px 6px 20px...

JavaScript

$(".openbtn").hide();
$(document).keyup(function(e){ if(e.keyCode === 27) { closeNavT(); } });
$(function(){
  $("#myNavT").scroll(function(){
    var winTop = $("#myNavT").scrollTop();
    if(winTop >= 30){
      $(".overlay").addClass("sticky-header");
    }else{
      $(".overlay").removeClass("sticky-header");
    }
  });
});
function openNavT() {
    $(".openbtn").hide();
    $("body").css("overflow-y", "hidden");
    $("#mywrapper").show(); 
    $("#myNavT").css("width", "100%");
    //$("#myNavT").prependTo($("#myNavT").parent()); 
    $(".closebtn").show(); }

function closeNavT() {
    $("#myNavT").css("width", "0%");
    $("#mywrapper").hide(); 
    $("body").css("overflow-y", "auto");
    $(".openbtn").show();
    $(".closebtn").hide(); }

$(document).on('input', '#myrange', function() { document.body.style.setProperty("--size", this.value + "px"); });

function get_scrolled_amount() {
  return ($("#myNavT").scrollTop() / $("#mycontainer").height()) * 100;
}

function get_img_selectors(selector='.img_div') {
  img_elements =  [];
  document.querySelectorAll(selector).forEach(img => { img_elements.push(img); });
  return img_elements;
}


function populate() {
  var random;
  var nrofsec = $("#mycontainer").find("section").length;
  nrofsec++
  
  var temp_section = $(`<section id='sec_pgnr_${nrofsec}' class='notyetloaded'></section>`);
  temp_section.append($(`<p id="p_pgnr_${nrofsec}" class="my-font">Page #${nrofsec}</p>`));
  var temp_imgbox = $("<div class='imgbox'></div>");
  for (let step = 0; step < 100; step++) {
    random = Math.floor(Math.random() * (350 - 450) ) + 450;
    var temp_box = $("<div class='box'></div>");
    var temp_imglink = $(`<a href="https://unsplash.it/${random}/${random}/?random" target="_blank"><img class="img_div" src="https://unsplash.it/${random}/${random}/?random"></a>`)
    temp_box.append(temp_imglink);
    temp_imgbox.append(temp_box);
  }
  $(temp_section).append(temp_imgbox);
  
  if ($("#botten").length == 0)...