CODEWITHSUNDEEP
javascriptjqueryhtmllightbox
yaylitzis
yaylitzis

Reputation: 5534

Open different image in lightbox

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>

Upvotes: 1

Views: 2753

Answers (1)

Dij
Dij

Reputation: 9808

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>

Upvotes: 3

Related Questions