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

0 Members and 1 Guest are viewing this topic.

Offline danny

  • Occasional poster
  • *
  • Posts: 95
    • View Profile
    • Startfetch
lazyimages with picviewer_addon
« Reply #60 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 »
Production/stable template located at: First post in the Throwback thread.

Offline dj

  • Tireless poster
  • ****
  • Posts: 122
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - pictureviewer
« Reply #61 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

  • Occasional poster
  • *
  • Posts: 95
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #62 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 »
Production/stable template located at: First post in the Throwback thread.

Offline dj

  • Tireless poster
  • ****
  • Posts: 122
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #63 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

  • Occasional poster
  • *
  • Posts: 95
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #64 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 »
Production/stable template located at: First post in the Throwback thread.

Offline dj

  • Tireless poster
  • ****
  • Posts: 122
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - pictureviewer
« Reply #65 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

  • Occasional poster
  • *
  • Posts: 95
    • View Profile
    • Startfetch
Re: Responsive small screen template - pictureviewer
« Reply #66 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 »
Production/stable template located at: First post in the Throwback thread.

Offline dj

  • Tireless poster
  • ****
  • Posts: 122
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - pictureviewer
« Reply #67 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

  • Occasional poster
  • *
  • Posts: 95
    • View Profile
    • Startfetch
Re: Responsive small screen template - pictureviewer
« Reply #68 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?   
Production/stable template located at: First post in the Throwback thread.

Offline bmartino1

  • Tireless poster
  • ****
  • Posts: 848
  • 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 #69 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

  • Occasional poster
  • *
  • Posts: 95
    • View Profile
    • Startfetch
Re: Responsive small screen template - pictureviewer
« Reply #70 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';Attached sample.  Although, note that I turned off the borderless fullscreen mode because there were no on-screen controls to exit from that mode (the _ typo is from me, and on purpose).  The attached sample is working quite nicely.  Not fundamentally different--just styled. 
« Last Edit: July 14, 2019, 12:20:03 PM by danny »
Production/stable template located at: First post in the Throwback thread.

Offline dj

  • Tireless poster
  • ****
  • Posts: 122
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template - pictureviewer
« Reply #71 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

  • Occasional poster
  • *
  • Posts: 95
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #72 on: July 15, 2019, 05:26:13 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 preloading even though the play button hadn't been clicked.

Even with a two day effort, I couldn't seem to knacker the preloading--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 nothing unless the play button is clicked; as well as not increase the connection count, unless the play button is clicked. 
« Last Edit: July 15, 2019, 12:21:19 PM by danny »
Production/stable template located at: First post in the Throwback thread.

Offline dj

  • Tireless poster
  • ****
  • Posts: 122
  • 👣 🐾
    • View Profile
    • PWAs
Re: Responsive small screen template
« Reply #73 on: July 15, 2019, 05:43:28 AM »
@danny set the last audio.preload to 'none' (untested at the moment)

« Last Edit: July 15, 2019, 07:49:48 PM by dj »

Follow members gave a thank to your post:


Offline danny

  • Occasional poster
  • *
  • Posts: 95
    • View Profile
    • Startfetch
Re: Responsive small screen template
« Reply #74 on: July 15, 2019, 01:48:10 PM »
That solved the problem of doing stuff before play clicked.  New problem:  downloading songs twice while playing.  The double-download is intermittent and only with firefox (doesn't happen with chrome).  Also the number of get requests varies.  With firefox, there can be a get request After the mp3 has fully download.

The file is actually 1075kB; however, there may be a logging error, due to firefox odd streaming behavior.  According to the browser console, firefox received only 1075kB. 
« Last Edit: July 16, 2019, 08:00:59 PM by danny »
Production/stable template located at: First post in the Throwback thread.