Open different image in lightbox

Question

I have an image light-box in Bootstrap and what I want to achieve is that when the user clicks on the image, the image that pops up to be different.

So I will have thumb icons, and when the user clicks one of them the full image will be displayed. So the code to be like:

<a href="full_Image_url" ..> <img src="thumb_img_url" ...></a>

I tried to edit the <a href="#" ..> with the location of the other image but it didn't work..

var $lightbox = $('#lightbox');

$('[data-target="#lightbox"]').on('click', function(event) {
  var $img = $(this).find('img'),
    src = $img.attr('src'),
    alt = $img.attr('alt'),
    css = {
      'maxWidth': $(window).width() - 100,
      'maxHeight': $(window).height() - 100
    };

  $lightbox.find('.close').addClass('hidden');
  $lightbox.find('img').attr('src', src);
  $lightbox.find('img').attr('alt', alt);
  $lightbox.find('img').css(css);
});

$lightbox.on('shown.bs.modal', function(e) {
  var $img = $lightbox.find('img');

  $lightbox.find('.modal-dialog').css({
    'width': $img.width()
  });
  $lightbox.find('.close').removeClass('hidden');
});

body {
  padding: 30px 0px;
}

#lightbox .modal-content {
  display: inline-block;
  text-align: center;
}

#lightbox .close {
  opacity: 1;
  color: rgb(255, 255, 255);
  background-color: rgb(25, 25, 25);
  padding: 5px 8px;
  border-radius: 30px;
  border: 2px solid rgb(255, 255, 255);
  position: absolute;
  top: -15px;
  right: -55px;
  z-index: 1032;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="col-xs-6 col-sm-3">
    <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
      <img src="https://s3.amazonaws.com/ooomf-com-files/lqCNpAk3SCm0bdyd5aA0_IMG_4060_1%20copy.jpg" alt="...">
    </a>
  </div>

  <div class="col-xs-6 col-sm-3">
    <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
      <img src="https://s3.amazonaws.com/ooomf-com-files/Z3LXxzFMRe65FC3Dmhnp_woody_unsplash_DSC0129.jpg" alt="...">
    </a>
  </div>
</div>

<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
    <div class="modal-content">
      <div class="modal-body">
        <img src="" alt="" />
      </div>
    </div>
  </div>
</div>

Dij · Accepted Answer · 2017-07-26 08:08:19Z

3

you have attached event handler to click event of <a data-target="#lightbox'>. you can find its parent div and then the next sibling div and the image inside it. Incase of last div you can the first sibling. something like this:

var $lightbox = $('#lightbox');

$('[data-target="#lightbox"]').on('click', function(event) {
    var imageDiv = $(this).parent().is(':last-child') ? $(this).parent().siblings().first() : $(this).parent().next();
    var $img = $(imageDiv).find('img'),
    src = $img.attr('src'),
    alt = $img.attr('alt'),
    css = {
      'maxWidth': $(window).width() - 100 ,
      'maxHeight': $(window).height() - 100
    };

  $lightbox.find('.close').addClass('hidden');
  $lightbox.find('img').attr('src', src);
  $lightbox.find('img').attr('alt', alt);

});

$lightbox.on('shown.bs.modal', function(e) {
  var $img = $lightbox.find('img');

  $lightbox.find('.modal-dialog').css({
    'width': $img.width()
  });
  $lightbox.find('.close').removeClass('hidden');
});

body {
  padding: 30px 0px;
}

#lightbox .modal-content {
  display: inline-block;
  text-align: center;
}

#lightbox .close {
  opacity: 1;
  color: rgb(255, 255, 255);
  background-color: rgb(25, 25, 25);
  padding: 5px 8px;
  border-radius: 30px;
  border: 2px solid rgb(255, 255, 255);
  position: absolute;
  top: -15px;
  right: -55px;
  z-index: 1032;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="col-xs-6 col-sm-3">
    <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
      <img src="https://s3.amazonaws.com/ooomf-com-files/lqCNpAk3SCm0bdyd5aA0_IMG_4060_1%20copy.jpg" alt="...">
    </a>
  </div>

  <div class="col-xs-6 col-sm-3">
    <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
      <img src="https://s3.amazonaws.com/ooomf-com-files/Z3LXxzFMRe65FC3Dmhnp_woody_unsplash_DSC0129.jpg" alt="...">
    </a>
  </div>
</div>

<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
    <div class="modal-content">
      <div class="modal-body">
        <img src="" alt="" />
      </div>
    </div>
  </div>
</div>

edited Jul 26, 2017 at 8:08

answered Jul 26, 2017 at 7:09

Dij

9,8184 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

yaylitzis Over a year ago

Thanks for the answer. Actually, I want to show a bigger image of the image that was clicked... Sorry for the wrong question I edited..

yaylitzis Over a year ago

Thanks for editing your answer. But where do you set the url of the bigger image?

Dij Over a year ago

There's no need to set the url, select the next image using jquery event handler. you were setting css inside the handler, which was making it small so i removed that css.

yaylitzis Over a year ago

Ok, but I don't want this.. I have 2 images a thumb (small) and the regular one. I want to click the thumb and the bigger to pop up. I edited the qestion as well.. thanks a lot

Dij Over a year ago

which one is the small and which one is regular?

Collectives™ on Stack Overflow

Open different image in lightbox

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related