Enable IMG when li:target is true

I am sooo getting my butt kicked on this no-longer-so-simple photo website that I started creating in December for our Holiday party.

My website has a photo-gallery.php page that serves two purposes - thanks to @coothead - in that it not only serves up all thumbnails for the gallery, but when you click on a thumbnail, some nifty CSS hides the thumbnail and then create a popup modal window which display a detailed photo. (All of this allows the user to stay on the same page, and thus the music that they are hopefully playing in my audio control keeps playing as they browse!)

However, the problem that I discovered tonight, is that while CSS does a good job of hiding the detailed-photo, it is still getting downloaded. And this explains why a gallery of 70 thumbnails takes about FIVE MINUTES to load on my laptop!!

Not knowing any Javascript, I would appreciate help figuring out how to use Javascript to fix this issue.

Here is a snippet of my HTML…

<!-- Photo -->
<li id='$photoKey'>
	<!-- Gallery View (thumbnail) -->
    <a class='thumbnail' href='#$photoKey'>
		<img src='$thumbnailSrc/{$thumbnailPhotoValue}' alt=''>
    </a>
	
    <!-- Modal View (detailed-photo) -->
    <div>
		<!-- Menu Items -->
        <a class='downloadRaw' href='/pnc/galleries/$galleryID/$photoValue'
                                    download='$photoValue'>Download</a>
        <span>|</span>
        <a class='closeWindow' href='#containerMast_fixed'>Close</a>
			<!-- Image -->
            <img src='$detailedSrc/{$detailedPhotoValue}' title='{$detailedPhotoValue}' alt='Photo {$detailedPhotoValue} from $galleryTitle'>
    </div>
</li>

By default, the thumbnail loads, and the botton DIV is hidden.

Here is the related CSS…

/****************/
/* GALLERY view */
/****************/
.flexGallery li{
  margin: 1.25em;
}

.flexGallery li a{
  display: block;  
}

.flexGallery img{
  display: block;
  height: 180px;
  margin: auto;
  border: 1px solid #999;
}

.flexGallery li div{
  display: none;
}


/**************/
/* MODAL view */
/**************/
.flexGallery li:target{
  position: fixed;              /* Remove element from flow. */
  top: 0;                       /* Stretch element to cover viewport. */
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  max-height: 100vh;
  overflow-y: auto;
  background-color: #000;
  z-index: 3;                   /* 2020-01-04 */
}

.flexGallery li:target a.thumbnail{
  display: none;
}

.flexGallery li:target div{
  display: table;               /* Shrinkwrap for anchors to right align at top. */
  margin: 1em auto 0;
  text-align: right;
}

.flexGallery li:target img{
  display: block;
  width: 100%;
  height: auto;
}

[b]Here is what I would like to try and accomplish via Javascript…[b]

By default, the src in this code should be empty so these 500KB detailed-photos do not load automatically…

    <!-- Modal View (detailed-photo) -->
    <div>
 	<!-- Image -->
         <img src='' alt=''>  <!-- Prevent from downloading until user choices the corresponding thumbnail!! -->
    </div>
</li>

And when the user clicks on the thumbnail, and this becomes true flexGallery li:target then I need Javascript to dynamically insert the code below into the src attribute so that my PHP variable kick in and the detailed photo is downloaded and ultimately displayed to the user…

   <!-- Populate the src link after flexGallery li:target is targeted -->
   <img src='$detailedSrc/{$detailedPhotoValue}' alt=''>

Could someone please help me figure out how to do this??

Thanks in advance!!

Looks like my OP scared people away… :shifty:

I did some reading about Javascript in MDN and have some questions if anyone is around to help today…

Fwiw, I have a desire to learn but am trying to avoid taking 6 months to master Javascript 101 before I can deliver my website which was due over a week ago. :sob:

Where is everybody?

My first question is which element I should target?

I am trying to make it so when the user clicks on a thumbnail then my Javascript dynamically creates the < img src=’’>

Based on my CSS I’m not sure which way to go…

Ok, as I said JS is not my forte. So this could be really crap code, but I believe it works.

Your HTML should look like this for each image li:

        <!-- Item #1 -->
        <li id="li1">
          <!-- Gallery Image (thumbnail) -->
          <a class="thumbnail" href="#li1">
            <img src="images/poster.png" title="" alt="">
          </a>
          
          <!-- Video -->
          <div>
            <!-- Menu Items -->
            <a class="closeWindow" href="#containerMast_fixed">Close</a>
            
            <!-- This is the large version of the image -->
            <img class="bigImage" data-src="images/DM__6553.jpg">
          </div>
        </li>

Your JS should look like this:

function stopVideo(video) {
    video.pause();
    video.currentTime = 0;
}

function stopVideoHandler(evt) {
    var closeLink = evt.target;
    var video = closeLink.parentNode.querySelector("video");
    stopVideo(video);
}

function addCloseHandler(closeLink) {
    closeLink.addEventListener("click", stopVideoHandler);
}

function enableLargeImage(evt) {
	var lg = evt.target.parentNode.parentNode;
	var largeImage = lg.querySelector('.bigImage');
	src = largeImage.getAttribute("data-src");
	largeImage.setAttribute("src",src);
}

function addImageHandler(li) {
    li.addEventListener("click", enableLargeImage);
}

var closeLinks = document.querySelectorAll(".closeWindow");
closeLinks.forEach(addCloseHandler);

var enableImg = document.querySelectorAll(".flexGallery li");
enableImg.forEach(addImageHandler);

It is all rather fragile, depending on the specific html tags and what-not, and certainly not something I’d use for a production solution. But it may get you over a hurdle.

@tracknut,

Sorry got into an hour-long fight with customer service. Hope you are still around.

My first question to you - and aanyone else trying to help - is "Do you follow how my HTML and CSS works?

@coothead gets credit for that very innovative styling!

Not to give away the answer, but the way it works is that just the thumbnail is initially displayed and the < div > below is hidden.

When you click on the thumbnail, the anchor targets the < li > and then CSS creates the modal from the < div >.

What I am ultimately trying to do is leave the IMG SRC empty so the LARGE picture doesn’t load, and then when the user clicks on the thumbnail I use Javascript to populate a SRC. But, alas, I don’t know Javascript and so I need some help!

I think this thread title is maybe misleading since it really only pertains to CSS.

On second thought, I think I need Javascript to “listen” for a click on the anchor and then at that point insert a path in the SRC.

Hope that re-explanation helps?

Am looking at your solution now…

@tracknut,

Looking at your code now…

Is there a way in Javascript - similar to CSS - where you can chain together HTML elements?

When the user clicks on < li id=“1001” > > a, then < li id=“1001” > becomes the target and its child < div > is displays and then at that point I want insert a src link into < li id=“1001” > > div> > < img >

Is there a way to add that specificity to your code above? (Assuming that is necessary?!)

Please try the code and let me know what’s wrong, before you decide that it needs to be changed…

3 Likes

I’m trying to figure it out but it’s not working yet…

Could you post your html of the li section?

I just created a bunch of unique thumbnails and medium pictures with labels on/in the picture to make this easier for both of us! :slight_smile:

Yep, give me a few minutes…

@tracknut,

Attached is a ZIP with labeled thumbnails and detailed photos, updated links in code, and a bunch of notes for the 1st < LI > to help you understand the flow that needs to happen. :slight_smile:

You can only upload a 4MB file???

That is lame…

All I need to see is your updated html code for one LI, and maybe your JS code, to see why what I wrote above “isn’t working yet”. I don’e need 4 MB of images and stuff to help me understand. We’ve been talking about it for 2 days now, I think I understand.

I went to a lot of trouble to create the images and they may be instructional to others so I’ll try and attach them in separate posts.

Here is the code part…

sp_create-src-link 2.zip (6.9 KB)

Here are the thumbnails…

images_1.zip (1.0 MB)

Here are the detailed-photos (part 1)…

images_2.zip (3.7 MB)

Here are the detailed-photos (part 2)…

images_3.zip (3.7 MB)

And here is the large photo for anyone who cares…

images_4.zip (454.1 KB)

Not knowing anything about Javascript, here are my thoughts…

1.) See in my 1st < li > where id=“1001” and in the child < a > href="#1001" ?

Well in my actual photo-gallery.php script, those values come from the PHP variable $photoKey which is the KEY for each photo in my array.

Javascript needs to grab $photoKey for each LI > A object (?) it creates.

2.) I think your Javescript variable “enableImg” needs to point to: .flexGaller li a.thumbnail

3.) On click, Javascript needs to assign each different $photoKey value from my array and use that to build the link to the detailed-photo like this…

<img src='$detailedSrc/{$detailedPhotoValue}' alt='' >

OOPS! It looks like I need to post some sample code that shows you at least part of my PHP…

@tracknut,

Here is a snippet from my DEV version of “photo-gallery.php”. (I guess I should have included it sooner, but I didn’t thnk about having to tie my PHP with this new Javascript?!)

sp_photo-gallery-snippet.php (5.2 KB)

It is the same as what I uploaded earlier, however instead of hard-coded photo filenames, it shows you how I use a PHP array and variables to dynamically build my gallery based on the folder the script points to.

Basically I have a directory for each gallery (e.g. “2019-holiday-party”) and my PHP goes out to that directory, reads in all of the filenames, builds and array, and then iterates through the array and builds the HTML for the gallery.

Now I need Javascript to help build the IMG SRC for the thumbnails that is clicked.

Whew! Thanks for the help so far!!