Member Avatar for serph09

So I have this code here: http://jsfiddle.net/4Cqkh/1/

What I'm trying to do is when I click on a thumbnail, the below larger image of it should display according to which thumbnail is clicked. I tried switching the larger image's src to that of the thumbnail src's value when clicked but it's not working correctly.

(I had to exectuce the js's function by calling itself instead of using onclick since the onclick doesn't seem to work when I tried wrapping it into the img tag).

Any help would be appreciated.

  • 1 Contributor
  • 1 Reply
  • 259 Views
  • 9 Minutes Discussion Span
  • Latest Post Latest Post by serph09

Dani AI

Generated

Following ’s follow-up, here is a compact, practical pattern to open a modal that shows all thumbnails plus a larger preview. Store the full-size URL in a data attribute on each thumbnail (so the modal uses the correct high-res image), clone or render a thumbnail strip inside the modal, and use delegated event handlers (no inline onclick). This keeps handlers working even if thumbnails are added dynamically and avoids scaling low-res thumbs into the main view.

Example markup (minimal):

<!-- page thumbnails -->
<img class="thumb" src="thumb1.jpg" data-large="large1.jpg" alt="...">

<!-- modal (hidden by default) -->
<div id="galleryModal" class="modal" aria-hidden="true" role="dialog" tabindex="-1">
  <div class="modal-overlay"></div>
  <div class="modal-content">
    <button class="modal-close" aria-label="Close">x</button>
    <div class="modal-main"><img src="" alt=""></div>
    <div class="modal-thumbs"></div>
  </div>
</div>

Core jQuery pattern:

$(document).on('click', '.thumb', function(){
  var large = $(this).data('large') || $(this).attr('src');
  // populate modal thumbs once (or clone each click)
  if ($('#galleryModal .modal-thumbs').is(':empty')) {
    $('.thumb').each(function(){ $('#galleryModal .modal-thumbs').append($(this).clone()); });
  }
  $('#galleryModal .modal-main img').attr('src', large);
  $('#galleryModal').attr('aria-hidden','false').fadeIn();
  $('body').addClass('modal-open');
});

$('#galleryModal').on('click', '.modal-thumbs img', function(){
  $('#galleryModal .modal-main img').attr('src', $(this).data('large') || $(this).attr('src'));
});

$('#galleryModal').on('click', '.modal-overlay, .modal-close', closeModal);
$(document).on('keydown', function(e){ if (e.key === 'Escape') closeModal(); });

Practical tips: preload large images for smoother switching (new Image().src = url), keep data-large pointing to full-size files (not the thumb), trap focus in the modal and restore it when closed for accessibility, and disable body scroll while open. If a polished, quick solution is needed, consider a battle‑tested lightbox/fancybox plugin instead of building from scratch.

Member Avatar for serph09

Oh wow, I just found a solution 5 minutes after posting:p
Here's the updated code: http://jsfiddle.net/4Cqkh/3/

My question now is, let's say I only have the thumbnails displayed on the page, when I click on a thumbnail a modal window should pop up showing all the thumbnails and the enlarged version of each thumbnail when clicked. How should I do this?

Edited by serph09
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.