Member Avatar for milkman93

Hey Fellas,

I'm working on a project where I would like, once the picture is clicked, to be displayed in a dynamic "popup" manner. Example: http://www.freshlysqueezed.ca/index.php?r=web/content&id=3 . If you click the items, the pictures pop up in a smooth and good looking way.

Where I need your help is to point me in the right direction. I don't know where to begin and what kinds of topics to search.

I would look at the websites source code, but I can't access the javascrpit files.

Thanks

  • 2 Contributors
  • 1 Reply
  • 197 Views
  • 49 Minutes Discussion Span
  • Latest Post Latest Post by TonyG_cyprus

Dani AI

Generated

— that effect is the classic "lightbox" or image modal. 's "jQuery lightbox" suggestion is a fine starting point, but there are two practical paths: use a ready-made plugin for speed, or build a tiny vanilla solution for full control and no dependency. Useful search terms: lightbox, image modal, responsive lightbox, photo gallery javascript, and accessible lightbox.

Quick plugin options (what to look for): Lightbox2 for simplicity, Fancybox for features, Magnific Popup for small size, PhotoSwipe for touch/zoom. If you prefer no-jQuery plugins look at GLightbox or Lity. Pick a solution that provides responsive images, keyboard navigation (Esc/arrows), swipe gestures, lazy loading, and ARIA support. If the page already includes jQuery, a jQuery plugin will usually be the fastest to wire up.

Minimal vanilla pattern — intercept thumbnail clicks, create a full-screen overlay, animate opacity/scale via CSS, and remove on click or Escape. Example minimal HTML/CSS/JS to illustrate the pattern:

<!-- thumbnail -->
<a href="images/photo-large.jpg" class="js-lightbox">
  <img src="images/photo-thumb.jpg" alt="Caption">
</a>

<style>
.lw-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.85);cursor:zoom-out;opacity:0;transition:opacity .2s}
.lw-overlay.show{opacity:1}
.lw-overlay img{max-width:90%;max-height:90%;transform:scale(.98);transition:transform .2s}
.lw-overlay.show img{transform:scale(1)}
</style>

<script>
document.addEventListener('click', function(e){
  var a = e.target.closest && e.target.closest('a.js-lightbox'); if(!a) return;
  e.preventDefault();
  var overlay = document.createElement('div'); overlay.className='lw-overlay';
  overlay.innerHTML = '<img src="'+a.href+'" alt="">';
  document.body.appendChild(overlay);
  requestAnimationFrame(function(){ overlay.classList.add('show'); });
  overlay.addEventListener('click', function(){ overlay.remove(); });
  function onKey(ev){ if(ev.key==='Escape'){ overlay.remove(); document.removeEventListener('keydown', onKey); }}
  document.addEventListener('keydown', onKey);
});
</script>

Performance and accessibility tips: use thumbnails + full-size images on demand, serve responsive images with srcset/sizes, lazy-load large files, animate transform/opacity (not top/left), provide keyboard and screen-reader support (role attributes, toggle aria-hidden on background, trap focus if presenting interactive controls), and test on mobile and slow connections.

Member Avatar for TonyG_cyprus

Google jQuery lightbox, pages of 'em!

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.