Author Topic: Responsive small screen template  (Read 17135 times)

0 Members and 1 Guest are viewing this topic.

Offline danny

  • Tireless poster
  • ****
  • Posts: 189
    • View Profile
    • Startfetch
Re: Responsive small screen template - audioplayer
« Reply #60 on: June 26, 2019, 05:33:01 PM »
added repeat to the editable vars (update @danny: set it to true)
While getting things done about the house, I noticed the shuffle playlist automatically repeat.  This works perfectly!

I had used it with my little amplifier https://www.ebay.com/itm/112323747087? with a spare 19v laptop power pack and a couple of old fashioned big size speakers (as tall as a desk, 12" woofer), which made good use of the 7 watts.  This is clear, so one works for many rooms.

Paradigm shift:  All other media players have an initial load-media step.  However, HFS+DJ's music player begins with the media already loaded, so it plays straightaway, with just one mouse-click.  That is elegant. 

Offline danny

  • Tireless poster
  • ****
  • Posts: 189
    • View Profile
    • Startfetch
lazyimages with picviewer_addon
« Reply #61 on: July 04, 2019, 08:50:21 PM »
DJ, your lazyimages with picviewer_addon works well on large folders.

One slight hitch--the slideshow. 
Browser "Popup was blocked" prevents slideshow function.  So, click = close (unintentionally).  To fix, it needs to use same window, not new window.  It may need a < in the corner to return to the file list. 
And perhaps the <img> tag needs height="100%" so images can be seen on high-res PC display.  In addition, I think that phones/tablets may require <meta name="viewport" content="height=device-height, initial-scale=1, user-scalable=yes"> for the slideshow-generated page.  Or  image.style.height = '100%';  for javascript.

Edit:  Works as intended on Firefox; however, chromium/opera popup blocker does close instead of next.  Goodly function either way. 
« Last Edit: July 07, 2019, 08:35:47 PM by danny »

Offline dj

  • Tireless poster
  • ****
  • Posts: 151
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - pictureviewer
« Reply #62 on: July 05, 2019, 03:54:04 AM »
you can try my other pictureviewer
It uses the same window. Click the X (in the right top corner) to return to filelist

Offline danny

  • Tireless poster
  • ****
  • Posts: 189
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #63 on: July 06, 2019, 06:33:33 AM »
I'd like to try your lazyimages with picviewer_addon in the throwback templates.
The lazyimages portion (loading what is visible), decreases bandwidth (important for mobile).  I wanted to add it to the midsummer version because it handles very gigantic folders.  Um, how is it done?  EDIT:  Second example was compatible https://imagekit.io/blog/lazy-loading-images-complete-guide/

P.S.  I love your Expand-O-Matic adaptive-scaling top menu in your newest template.  That is brilliant. 
« Last Edit: July 09, 2019, 04:12:13 AM by danny »

Offline dj

  • Tireless poster
  • ****
  • Posts: 151
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #64 on: July 06, 2019, 05:25:25 PM »
I'd like to try your lazyimages with picviewer_addon in Throwback-XM2.

I recommend to use native lazy loading
Simply add loading="lazy" to the image tag
It will work in future browser versions

P.S.
the pictureviewer.zip works,
if you add id="files" to the table tag (with %list%)

update: pictureviewer works also with mobil-light_4.6 (set compatible=1)

FAQ pictureviewer:
click on image icon, next pic click on pic, close click on X
previous pic click on left side of pic (fullscreen click on left side of first pic (exit=Esc))
« Last Edit: July 14, 2019, 04:14:49 PM by dj »

Follow members gave a thank to your post:


Offline danny

  • Tireless poster
  • ****
  • Posts: 189
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #65 on: July 08, 2019, 04:21:34 AM »
I ended up using this one for lazy-loading of images.  Problem is if user scrolls really fast, concurrent connection count gets high.  Even so, it is compatible with throwback layout (and yours) which displays few photos per page.  Unfortunately, it is incompatible with single thread server + auto-gallery layout which may display many photos per page.  Is it possible to regulate load saturation/concurrency, like load x-number of photos at a time or series order?
Code: [Select]
<script>
document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages;   
  if ("IntersectionObserver" in window) {
    lazyloadImages = document.querySelectorAll(".lazy");
    var imageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var image = entry.target;
          image.src = image.dataset.src;
          image.classList.remove("lazy");
          imageObserver.unobserve(image);
        }
      });
    });
    lazyloadImages.forEach(function(image) {
      imageObserver.observe(image);
    });
  } else { 
    var lazyloadThrottleTimeout;
    lazyloadImages = document.querySelectorAll(".lazy");
    function lazyload () {
      if(lazyloadThrottleTimeout) {
        clearTimeout(lazyloadThrottleTimeout);
      }   
      lazyloadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyloadImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
              img.src = img.dataset.src;
              img.classList.remove('lazy');
            }
        });
        if(lazyloadImages.length == 0) {
          document.removeEventListener("scroll", lazyload);
          window.removeEventListener("resize", lazyload);
          window.removeEventListener("orientationChange", lazyload);
        }
      }, 20);
    }
    document.addEventListener("scroll", lazyload);
    window.addEventListener("resize", lazyload);
    window.addEventListener("orientationChange", lazyload);
  }
})
</script>
Here's how I called it.  (this re-translated to a 1-liner) The redundant pair of height command somehow reduces load concurrency; but, it would be nice to do that on purpose. 
Code: [Select]
<a href="%item-url%"><img height="128" class="lazy" data-src="%item-name%" alt="" style="max-height:128px" onerror="this.style.display='none'">&nbsp;%item-name%</a>
« Last Edit: July 08, 2019, 04:00:54 PM by danny »

Offline danny

  • Tireless poster
  • ****
  • Posts: 189
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #66 on: July 08, 2019, 06:21:29 PM »
the pictureviewer.zip works, if you add id="files" to the table tag (with %list%) update: pictureviewer works also with mobil-light_4.6 (set compatible=1)
FAQ pictureviewer: click on image icon, next pic click on pic, close click on X
Can't find the X.  How do I close the slideshow?
Need image Centered on PC screen (not far left)
How to adjust advance time in seconds?
Need 50%transparent gray (or black) background for slideshow
Need to add  min-height:62%  so the small image tap-target can be found

Perhaps click bottom edge of photo to begin 7 seconds automated advance slideshow; or click top edge of photo to close slideshow?  Would be nice, but I can't find the controls.
« Last Edit: July 09, 2019, 04:27:10 PM by danny »

Offline dj

  • Tireless poster
  • ****
  • Posts: 151
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - pictureviewer
« Reply #67 on: July 09, 2019, 05:58:21 AM »
Can't find the X.  How do I close the slideshow?
fixed need to scroll to find X, added background shadow for better visibility

Need image Centered on PC screen (not far left)
Need 50%transparent gray (or black) background for slideshow
Code: [Select]
top:50%; left:50%; transform:translate(-50%,-50%)
Perhaps click bottom edge of photo to begin 7 seconds automated advance slideshow? Would be nice, but I can't find the controls.
longtouch (rightclick) on image to start slideshow
« Last Edit: July 11, 2019, 11:02:57 AM by dj »

Offline danny

  • Tireless poster
  • ****
  • Posts: 189
    • View Profile
    • Startfetch
Re: Responsive small screen template - pictureviewer
« Reply #68 on: July 09, 2019, 04:20:16 PM »
fixed need to scroll to find X, added background for better visibility
Instead of background for the X, it needs this (text shadow):   color:green;font-size:24px;font-weight:bold;text-shadow:1px 0px 1px #FFFEEE, -1px 0px 1px gray

For the photo,  object-fit  can work if the photo is in a div.
longtouch on image to start slideshow
Longtouch method isn't really PC compatible. It seems like a secret. Perhaps another control is needed, such as > (play) so it will work easily on the PC? 
In that case, there would be two controls, like this: 
x
« Last Edit: July 12, 2019, 03:12:12 PM by danny »

Offline dj

  • Tireless poster
  • ****
  • Posts: 151
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - pictureviewer
« Reply #69 on: July 11, 2019, 03:47:26 AM »
Longtouch method isn't really PC compatible
longtouch=rightclick
but feel free to put the mod.oncontextmenu function to a another control like ▶
« Last Edit: July 12, 2019, 04:05:37 AM by dj »

Follow members gave a thank to your post:


Offline danny

  • Tireless poster
  • ****
  • Posts: 189
    • View Profile
    • Startfetch
Re: Responsive small screen template - pictureviewer
« Reply #70 on: July 11, 2019, 11:21:46 AM »
...
but feel free to put the mod.oncontextmenu function to a another control like ▶
That might take a while--Can you recommend a website that seems effective at teaching me how to read javascript?   

Offline bmartino1

  • Tireless poster
  • ****
  • Posts: 870
  • I'm only trying to help i mean no offense.
    • View Profile
    • My HFS Google Drive Shared Link
Re: Responsive small screen template - pictureviewer
« Reply #71 on: July 11, 2019, 12:41:08 PM »
That might take a while--Can you recommend a website that seems effective at teaching me how to read javascript?

w3 schools???

https://www.w3schools.com/jsref/event_oncontextmenu.asp

https://www.w3schools.com/js/
« Last Edit: July 11, 2019, 02:02:54 PM by bmartino1 »
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1

Follow members gave a thank to your post:


Offline danny

  • Tireless poster
  • ****
  • Posts: 189
    • View Profile
    • Startfetch
Re: Responsive small screen template - pictureviewer
« Reply #72 on: July 12, 2019, 07:09:28 PM »
Code: [Select]
top:50%; left:50%; transform:translate(-50%,-50%)
Or this, with object-fit:
Code: [Select]
mod.style = 'position:fixed;top:0px;max-height:100%;height:100vh;width:100vw;image-orientation:from-image;z-index:2;background:rgba(0,0,0,0.85);object-fit:contain';
« Last Edit: September 02, 2019, 03:18:54 PM by danny »

Offline dj

  • Tireless poster
  • ****
  • Posts: 151
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - pictureviewer
« Reply #73 on: July 15, 2019, 03:53:14 AM »
center on screen with with object-fit zooms small images
Exit from fullscreen with Esc Button (or back button on android ◁ )

P.S. to dim the background add
Code: [Select]
outline: 9999px solid rgba(0,0,0,0.5)
update: v2 centers images
« Last Edit: July 15, 2019, 06:19:12 AM by dj »

Follow members gave a thank to your post:


Offline danny

  • Tireless poster
  • ****
  • Posts: 189
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #74 on: July 15, 2019, 05:16:10 AM »
The slideshow is working ever so nicely. 

However, I'm having a problem with the MP3 folder player.  There seems to be 1 or 2 megabytes waste-loading even though the play button hadn't been clicked. 

Even with a two day effort, I couldn't seem to knacker the waste loading--all attempts at edit were met with either not play or full file downloading.  So, I need so help to make sure that the music player downloads precisely nothing unless the play button is clicked; as well as not increase the connection count, unless the play button is clicked.