POC Zoomed BS modal image

In this example below you will see how to do a POC Zoomed BS modal image with some HTML / CSS and Javascript

Lazyloaded images that can be zoomed on click with a Bootstrap 3 modal

Thumbnail
This awesome code was written by tibomahe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tibomahe ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>POC Zoomed BS modal image</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="foo js-lazyload" data-original="http://www.placecage.com/g/800/700" data-toggle="modal" href="#modal-zoom">
  <div class="icon"></div>
</div>

<div class="foo js-lazyload" data-original="http://www.placecage.com/g/700/700" data-toggle="modal" href="#modal-zoom">
  <div class="icon"></div>
</div>

<div class="foo js-lazyload" data-original="http://www.placecage.com/g/600/700" data-toggle="modal" href="#modal-zoom">
  <div class="icon"></div>
</div>

<div class="foo js-lazyload" data-original="http://www.placecage.com/g/500/700" data-toggle="modal" href="#modal-zoom">
  <div class="icon"></div>
</div>

<!-- Modal template -->
<div class="modal modal--zoom fade js-modal-zoom" id="modal-zoom">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
        <div class="modal-img"></div>
      </div>
    </div>
  </div>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/tibomahe/poc-zoomed-bs-modal-image-mEbONM */
.foo {
  height: 300px;
  width: 300px;
  position: relative;
  float: left;
}
.foo .icon {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity, 0.4s;
  z-index: 1;
}
.foo:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity, 0.4s;
}
.foo:hover {
  cursor: pointer;
}
.foo:hover:after,
.foo:hover .icon {
  opacity: 1;
}

.js-lazyload {
  background-size: cover;
  background-position: 50% 50%;
}

.modal--zoom .modal-content {
  border: none;
  background: transparent;
  box-shadow: none;
}
.modal--zoom .modal-content .modal-header {
  border: none;
  padding: 0 15px;
}
.modal--zoom .modal-content .modal-header .close {
  color: white;
  opacity: 1;
  font-weight: 400;
}
.modal--zoom .modal-img {
  width: 100%;
  height: 500px;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}


/*Downloaded from https://www.codeseek.co/tibomahe/poc-zoomed-bs-modal-image-mEbONM */
/*
Dependencies :
- jQuery
- jQuery lazyload
- Bootstrap.js (modal)
*/

//Lazyload
$('.js-lazyload').lazyload({
  effect: 'fadeIn',
  threshold: 50,
});

//Dynamically update content of modal
$('.js-modal-zoom').on('show.bs.modal', function (event) {
  var img = $(event.relatedTarget).attr('data-original');
  var modal = $(this)
  modal.find('.modal-img').css('background-image', 'url(' + img + ')');
});

Comments