Enable IMG when li:target is true

Paul_Wilkins · January 13, 2020, 11:02pm

Because the page must work without JavaScript, and you don’t want to go to a new page to view the large image, that means that the large images must all be on the same page. That’s unavoidable, and means a slow loading page.

JavaScript can help to improve the user experience though. What it can do is to change the large images to thumbnail images, so that the page loads much faster. Then when someone wants to view an image, JavaScript can put the thumbnail image back to a fullsize image.

That is JavaScript doing its job, of improving the user experience.

coothead · January 13, 2020, 11:02pm

You would not have had that problem with the method
that I originally suggested.

Well, I would have to say that you should consider your
site’s visitors to be the actual customers and you to be
their supplier and what you want may not be what they
want. I would also hazard a guess that they would prefer
to have fast loading pages without perpetual audio to
slow loading pages with it.

coothead

UpstateLeafPeeper · January 13, 2020, 11:11pm

It would have worked, but it wasn’t as streamlined as I’d like. @PaulOB and @Paul_Wilkins, what do you think about @coothead s suggestion?

With his recommendation, I had my mast, then audio player, then my image gallery. If a user stayed in the gallery, then he/she could listen to looping music all day. In addition, there was a link (?) “Listen more…” or something like that to the side of the audio player, and the assumption what that the user would sense to click that link before clicking on a thumbnail and this navigating to another page.

Would that be the end of the world from a design standpoint?

It would work…

Of course people want fast loading pages. I just thought the music while browsing was the “cherry on the top”.

Spent a day researching songs and found some gems and along side the photos, it was a dream come true!

John_Betong · January 13, 2020, 11:18pm

From a user’s point of view I would not like to scroll through 2,500 images. Is it possible too reduce the number of photos into groups such as inside, outside, upstairs, downstairs, front room, reception, etc.

The AMP example played music, rendered all images in a single directory and supplied a link to a larger image. I am not sure what happens to the music when a thumbnail image is requested.

I believe LightBox can be incorporated into the web page which I think would eliminate having to open another page to view the enlargement.

It should be an easy task to include LiggtBix and hope to update the demo site later today.

UpstateLeafPeeper · January 13, 2020, 11:21pm

@PaulOB,

Attached are two screenshots of the mockup version of my website to give you a visual…

One is a normal view of the gallery when it loads.

And the other is the modal view when you click on a thumbnail.

HTH.

PaulOB · January 13, 2020, 11:23pm

If you are talking about the demo I posted then that is using your modal code so you are not jumping between pages. The jump to another page only happens when js is disabled and then you get only basic function but a still usable page.

UpstateLeafPeeper · January 13, 2020, 11:25pm

Well, I didn’t say they were all worthy of my site!

Yes, I ended up creating 12 “galleries” and each gallery had between 50 and 500 photos in them.

I still want to learn AMP, but fear that may take me longer than I have. That and I have been caught up chasing the javascript solution I asked for in this thread.

That is basically what @coothead’s solution does, except it does it with pure CSS…

coothead · January 13, 2020, 11:28pm

Nothing wrong with that.

But one would have to assume that if whilst listening to the
heavenly music that you had generously provided for their
enjoyment and edification they decided instead to click a
thumbnail link to see an enlargement of it, then they had
probably heard enough and were now ready to be delighted
by your magnificent full size rendering of the thumbnail in
silence.

coothead

UpstateLeafPeeper · January 13, 2020, 11:31pm

BAH!!!

(What can I say, I am a music nut and I like listening to (continuous) music while surfing or viewing photos, and I thought they might appreciate it too. Especially because I chose a special song for each gallery, so this was my poor-mans attempt to make music videos for them?!)

PaulOB · January 13, 2020, 11:32pm

No the light box script doesn’t load the image until it’s called for. It gets the image source from a data attribute (or href) and then only loads the large image when called for If I remember correctly. It’s much the same as we have been suggesting but in a ready made package.

coothead · January 13, 2020, 11:41pm

I deeply regret offering it to you.

Multiple “Modal WIndows” on one page seem to
create more problems than they solve.

coothead

UpstateLeafPeeper · January 13, 2020, 11:42pm

So thanks for everyone’s 2-cents, but all of this is becoming a bit overwhelming.

One thing that I need to remind myself, and others, is that this was supposed to be a fun website to re-live some good times at work - and maybe score me some “brownie” points - but it doesn’t pay the bills. I should have spent my Christmas Break working on my e-commerce site, but having been away from all of this for so long, I figured this might be a good way to get back into the swing of things. But alas, I have wasted more time than i should, especially for someone who wants to start his own business?!

First question is, what should my next step be?

Is my website “good enough” as is?

(I have slow Wi-Fi at my place, so a page download takes up to 5 minutes, but the speed websites I tried clocked me coming in at around 2 seconds for the photo-gallery. I may have to recheck the download times…)

If I need to fix things, then @PaulOB and @Paul_Wilkins and team, what is a reasonable compromise?

Learning Javascript will take me months to do some of the things I thing are being proposed here. (All useful stuff for later on, but I gotta get back to my real website…)

Are there changes that i could make to my current website - with some help from you all - in the next few days that would be worth the effort?

If so, I am game.

But come this Friday at 5:00pm, I am 110% invested in my businss and e-commerce site and if i have to throw away the last 5 weeks of effort on this photosite, then that’s life!

Guru suggestions welcome!!

John_Betong · January 13, 2020, 11:42pm

Do not be afraid of AMP

AMP just requires a strict header, couple of included JavaScript files and virtually all HTML tags can be used in the body.

The example uses PHP glob(…) function to find all the image names and their dimensions then uses the image results to generate the HTML script to be used on the page.

Paul_Wilkins · January 14, 2020, 12:36am

I’ve just created a simple example of JavaScript being used to improve the image loading of a page.

The HTML page starts with a series of large images.

The JavaScript changes the src of each image to a thumbnail version of the image.
Clicking on a thumbnail causes JavaScript to change the thumbnail src to the original fullsize src image, and adds a full class to the HTML image tag so that CSS shows the image fullscreen.

As it was only imgur images that I’m using, converting them to thumbnails was as easy as adding a lowercase b to the end of the filename. So that “abcde.jpg” became “abcdeb.jpg”.

You might need other ways to supply thumbnail images, such as generating 150x150px versions of the images called thumbs/imagename-thumb.jpg instead.

Anyway, the simple example is up on jsfiddle at https://jsfiddle.net/pmw57/a30g5hbw/6/

John_Betong · January 14, 2020, 5:26am

I took the liberty to upload the jsfiddle to my site what have I done wrong

Paul_Wilkins · January 14, 2020, 5:35am

What does the browser console say?

Uncaught TypeError: Cannot read property 'querySelectorAll' of null

That’s from the following scripting line:

  const images = photosContainer.querySelectorAll("img");

photosContainer is null. Why is it null?

It’s obtained from the #photos selector. We now have a simpler question of why does the following code fail?

  const photosContainer = document.querySelector(photosSelector);

The photosSelector variable correctly contains a value of "#photos"
And, checking the source code for the photos section we can confirm that the element exists.

<section id="photos">
    ...
</section>

So why can’t the script find that HTML element?
It’s because the scripting code is being run before the HTML element even exists.

Solution: Move the scripting code to the end of the body.

John_Betong · January 14, 2020, 5:42am

I have update my site and it now has music and responsive thumbnails that use LightBox to popup a larger image without stopping the music

If you are loathe to download the source file then instead:

browse to this web page
right-click, highlight source then save “index-test.php” to your localhost
open index.php and delete everything between the body tags
insert or include the following PHP script and remmber to change the image path
make sure PHP glob(‘path-to-your-images is OK’) by print_r($aImgs);

file: ./incs/get-body-001.php

<?php
// declare(strict_types=1);

$aImgs = [];
$aDivs = [
  # '/var/www/amphtmldemo.tk/public_html/assets/imgs/',
  # '/var/www/amphtmldemo.tk/public_html/assets/imgs/jokes/',
  # '/var/www/amphtmldemo.tk/public_html/assets/linux-17/',
  # '/var/www/amphtmldemo.tk/public_html/assets/linux-bg/'
  getcwd() .'/imgs/'
];
foreach($aDivs as $div) :
  $tmp    = glob($div .'*.*');
  $aImgs  = array_merge($aImgs, $tmp);
endforeach;  

// DEBUG: TOGGLE TO SEE IMAGE LIST
   if(FALSE):
      echo '<pre>'; 
        print_r($aImgs); 
     echo '<pre>';
     exit; 
   enidf;

// OPTIONAL LAYOUTS
  $layout = '';
  $layout = 'container';
  $layout = 'flex-item';
  $layout = 'fixed-width';
  $layout = 'responsive';

$images = '';
$iCnt   = 0;
$iSize  = 0;
foreach($aImgs as $img) :
  try {
    $dims = getimagesize($img);
    $par  = str_replace('var/www/', '', $img);
    if(LOCALHOST):
      //
    else:
      $par = str_replace('public_html/', '', $par);
      // $par = 'https:/' .$par;
      $par = '/' .$par;
    endif;  

    if( 'array'===gettype($dims) ) :
      $iCnt++;
      $fs    = filesize($img);
      $iSize += $fs;
      $fs   = number_format( (float) $fs);
      $tmp = <<< ____EOT
        <div clas="fss" style="width:210px;">
          <p class="tal bd2"> <br> 
            Filesize:  $fs bytes
              <br>
            {$dims[3]}

            <amp-img 
              {$dims[3]} 
              src="{$par}" 
              layout="$layout" 
              alt="an image"></amp-img>
          </p>  
____EOT;
      $images .= $tmp; //  = ' XXX ';;       
    endif ;

 } catch (Exception $e) {
    echo 'Caught exception: ',  $e->getMessage(), "\n";
 }
endforeach;
$sSize = number_format( (float) $iSize);

$tmp = <<< ____EOT
  <div class="mga" style="width: 240px;">
    <dl class="tal">
      <dt> Totals:  </dt>
      <dd> Images: $iCnt  </dd>
      <dd> Files &nbsp;&nbsp; : $sSize bytes</dd>
      <dd> &nbsp; </dd>
    </dl>  
    $images
  </div>  
____EOT;

echo '<hr><hr><hr>';
  echo '<h2> ./incs/get-body-001.php </h2>';
echo '<hr><hr><hr>';
echo $tmp;

John_Betong · January 14, 2020, 5:47am

Many thanks for the detailed explanation, JavaScript moved to just before the closing </body> tag and it works a treat

James_Hibbard · January 14, 2020, 6:56am

Relax.

You’re obsessing about this site being perfect, but that’s a pipe dream. Perfect is the enemy of good, as the saying goes.

Your next step should be to launch the site. It is 95% done. That is good enough.

PaulOB · January 14, 2020, 9:24pm

Being a CSS guy I would probably go for a background image version although I guess that makes the php more complex in that you need to update a style tag with the image paths as you get data from your database (I know nothing about PHP either).

However just for interests sake here is a version of a CSS gallery using :target (built mostly on your original html) that uses a background image for the gallery image which means that it will not get downloaded until required (at least in the browsers I tested on).

http://www.pmob.co.uk/temp2/CSS-gallery2.html

There is no JS required for this.

The caveats are:

The image sources need to be specified in the CSS style tag as some browsers will download background images that are inlined in the html style attribute. I placed the background image as a background to a placeholder image in order that title and alt attributes can be added to the img tag to aid semantics.

We also need to keep the images within the viewport so very large images will be contained within the viewport.

It’s not possible to add borders around the image because its a background image that doesn’t fill its container exactly because it is contained within the container.

There is probably something obvious I am missing but the page seems to work in modern browsers.

At the very least the demo may serve as a point of discussion on its usefulness or not. I am undecided