Member Avatar for stockton

I have a web page at which I am unhappy with and would like to alter.
I don't like it for the following reasons:-
1) All images are loaded at inception making it quite slow.
2) It is definitely not user friendly.
What I thought of doing was to load a page of thumbnails initially and as and when any thumbnail is clicked use Ajax to retrieve the bigger image.
Now this is all well and good and quite easy to do but in addition I want the original thumbnails page to remain in place in the background and have the "bigger image" in the foreground. When the "bigger image" is in turn clicked it should disappear leaving the background "thumbnails" page ready for user interaction.

Comments please, especially on how to do this overlay thing.

I know that using other peoples software such as, Joomla / Wordpress / Drupal / RVSiteBuilder, is the easy way to go about it but it teaches me very little, other than how other peoples code works.

When I code the solution myself I have at least added a bit to my programming skills and I find programming fun and my web site is not a commercial venture but an exercise in finding out how things are done.

  • 4 Contributors
  • 6 Replies
  • 197 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

A practical, low-risk pattern is to keep a single, fixed overlay element in the DOM and lazy-load the high‑resolution image into it on demand. The thumbnail grid remains interactive in the background; when a thumb is clicked the overlay becomes visible, the large src is assigned, a small spinner or low‑res placeholder is shown while the file downloads, and a click (or Escape key) closes the overlay and restores focus to the thumbnail. This avoids preloading every large image and keeps page load fast.

A simple workflow:

  1. Mark each thumbnail with the full-image URL in a data-large attribute.
  2. Create one overlay (hidden by default) that contains the large img, a close control, and ARIA attributes for a modal/dialog.
  3. Use event delegation on the thumbnail container to handle clicks, set overlayImg.src = thumb.dataset.large, show the overlay, and listen for onload / onerror to update UI.
  4. Close on overlay background click, on the close button, or on Escape; clear src when closing to free memory.
    This follows @almostbob’s intent but uses modern event handling and avoids preloading. Also heed @MidiMagic: do not expand images on mouse move; use explicit clicks.

Performance and UX tips: serve appropriately sized images with srcset/sizes, prefer modern formats (WebP/AVIF) and compressed files, and add loading="lazy" for thumbnails. Consider a tiny blurred placeholder (blur-up) or a spinner so users know the large image is loading. For accessibility, add role="dialog", trap focus while open, and restore focus to the originating thumbnail when closed. ’s CSS ideas are useful for visuals, but combine them with JS lazy-loading for best performance.

Example (minimal pattern):

// minimal pattern: event delegation + single overlay
const overlay = document.querySelector('#overlay');
const overlayImg = overlay.querySelector('img');
let lastThumb;

document.querySelector('#thumbs').addEventListener('click', e => {
  const t = e.target.closest('img[data-large]');
  if (!t) return;
  lastThumb = t;
  overlay.classList.add('open');
  overlayImg.src = t.dataset.large;
});

overlay.addEventListener('click', () => {
  overlay.classList.remove('open');
  overlayImg.src = '';
  if (lastThumb) lastThumb.focus();
});

document.addEventListener('keydown', e => { if (e.key === 'Escape') overlay.click(); });

Recommended Answers

All 6 Replies

Member Avatar for almostbob

loading the image onclick may not be as fast as you need for hi res images, but will speed page load because most people do not click images, so only the thumbs will be required

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<script language="javascript" type="text/javascript">
<!--
(document.getElementById) ? dom = true : dom = false; //select ie mozilla
function hideIt() {
 if (dom) {document.getElementById("layer1").style.visibility='hidden';} //ie
 if (document.layers) {document.layers["layer1"].visibility='hide';} } //mozilla
function showIt(image) {
 if (dom) {document.getElementById("layer1").style.visibility='visible';document.getElementByID('bigimage').src=image;}
 if (document.layers) {document.layers["layer1"].visibility='show';document.getElementByID('bigimage').src=image;} }
onResize="window.location.href = window.location.href"
//--></script>
</head>
<body>
<img src='thumb1.jpg' onClick="showIt('/largeimage1.jpg');">
<img src='thumb2.jpg' onClick="showIt('/largeimage2.jpg');">
<img src='thumb3.jpg' onClick="showIt('/largeimage3.jpg');">
<img src='thumb4.jpg' onClick="showIt('/largeimage4.jpg');">
<div id="layer1" style="position:fixed; left:20px; width:65%; top:20px; visibility:hidden;">
<img id='bigimage' src='blank.jpg' onClick="hideIt();" alt='Click to close this image'>
</div>
</body></html>

Code not guaranteed, but may be a jumping point

Member Avatar for MJ Pieterse

i would suggest that you rather try all with css. there is some great tutorials out there with css galaries

Member Avatar for stockton

I do not think that the css methods are going to do what I want as they all seem to require preloading everything which is exactly what I do not want to do, so I am going to start working with almostbob's suggestion and see where that gets me.

Member Avatar for stockton

I have coded prince1.shtml based on almostbob's suggestion but am having a problem getting the bigimage to display. Suggestions please.

Member Avatar for almostbob

I have coded prince1.shtml based on almostbob's suggestion but am having a problem getting the bigimage to display. Suggestions please.

I wasnt happy with this document.getElementByID('bigimage').src=image;} but I couldnt see an error either my javascript is **expletive deleted**
there could be quotes in my javascripts, that I cant think of.
anyone who is good at javascript,
please help

I found at a similar thread with answers
DosVdanye

Member Avatar for MidiMagic

Do NOT make images expand when the mouse moves. Nothing makes me hit the BACK button faster than a page that changes when you move your mouse. It's annoying.

The user should click to get as larger image.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.