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!!
