Member Avatar for w33n

Hello everyone,

I'm trying to creat an online graphic design portfolio. I want it to have thumbnails that pop up to windows that are the same size as the images. I've see some codes online of how to do this, but it seems very complicated. I'm trying to find a much simpler way. Anybody have good code that is a bit simpler? thx.

  • 3 Contributors
  • 2 Replies
  • 101 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by jb1ker

Dani AI

Generated

For : if you want thumbnails to "pop up" at the image's size without a heavy library, use a single in-page overlay (modal) and swap in the full image on click. It is simpler and more reliable than opening new browser windows (those get blocked, are awkward on mobile, and hurt accessibility). 's demo is a good Lightbox-style example; below is a compact, library-free pattern you can drop into a page and adapt.

<!-- thumbnail -->
<a href="#" class="thumb" data-full="images/photo-large.jpg">
  <img src="images/photo-thumb.jpg" alt="Design sample">
</a>

<!-- overlay -->
<div id="overlay" aria-hidden="true" style="display:none;">
  <button id="close">Close</button>
  <img id="overlay-img" src="" alt="">
</div>

<style>
#overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); display:flex; align-items:center; justify-content:center; z-index:1000; }
#overlay img { max-width:95vw; max-height:95vh; }
#close { position:absolute; top:10px; right:10px; }
</style>

<script>
document.addEventListener('click', function(e){
  var t = e.target;
  while (t && !t.classList.contains('thumb')) { t = t.parentNode; }
  if (t && t.classList && t.classList.contains('thumb')) {
    e.preventDefault();
    document.getElementById('overlay-img').src = t.getAttribute('data-full');
    var ov = document.getElementById('overlay');
    ov.style.display = 'flex'; ov.setAttribute('aria-hidden','false');
    return;
  }
  if (e.target.id === 'overlay' || e.target.id === 'close') {
    var ov = document.getElementById('overlay');
    ov.style.display = 'none'; ov.setAttribute('aria-hidden','true');
    document.getElementById('overlay-img').src = '';
  }
});
document.addEventListener('keydown', function(e){ if (e.key === 'Escape') { var ov = document.getElementById('overlay'); if (ov.style.display === 'flex') { ov.style.display = 'none'; ov.setAttribute('aria-hidden','true'); } } });
</script>

Notes and tips: keep large originals off the page (load on demand), use max-width/max-height so images scale to the viewport, include meaningful alt text and a visible close control for accessibility, and trap focus if you need full keyboard support. If you truly must open a separate browser window, preload the image and use its naturalWidth/naturalHeight to set window.open features — but expect popup blockers and poor mobile behavior. For recording demos like 's, common tools are OBS (free), QuickTime (macOS), Camtasia or ScreenFlow depending on your platform. — those are good places to start when making your walkthrough.

Recommended Answers

All 2 Replies

Member Avatar for tefflox

Please look at (where you will see a video where I showcase a process involving the use of Lightbox JS effects.) Let me know if this code is something you're looking for, and I can help, if you're willing to learn to manage the smaller details of it.

Member Avatar for jb1ker

Tefflox

Great demo. What software did you use to capture the demo?

Not camtasia I presume?

Thx J

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.