React

by ayush88089

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<a class="fullscreen" href="#">Fullscreen</a>
<div id="root"></div>

CSS

html, body {
    min-height: 100%;
    height: 100%;
  }
  html {
    font-size: 16px;
  }
  body {
    position: relative;
    font-size: 100%;
  }
  .gallery-container {
    padding-top: 10px;
  }
  .gallery-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
  } 
  .gallery-thumbnail {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
  }
  .card-icon-open {
    display: block;
    position: relative;
    left: 50%;
    font-size: 30px;
    width: 30px;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transform: translate(0%, -400%);
    transition: all 0.25s ease-in-out;
  }
  .card-icon-open:focus, .card-icon-open:hover {
    color: #111;
  }
  .gallery-thumbnail:focus ~ .card-icon-open, .gallery-thumbnail:hover ~ .card-icon-open, .gallery-thumbnail ~ .card-icon-open:focus, .gallery-thumbnail ~ .card-icon-open:hover {
    opacity: 1;
  }
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: rgba(21, 21, 21, .75);
  }
.button {
  font-size: 50px;
  color:#eee;
  margin:5px;
}
  .modal-body {
    position: relative;
    top: 4%;
    left: 10%;
    z-index: 11;
    padding: 0;
    overflow: auto;
    max-width: 100%;
    max-height: 100%;
  }
  .modal-close {
    font-size: 44px;
    position: relative;
    z-index: 99;
    color: #eee;
    transition: all 0.25s ease-in-out;
  }

  .modal-close:focus, .modal-close:hover {
    color: red;
  }
 .fullscreen {
  position: relative;
  text-decoration: none;
  font-size: 25px;
  color:#eee;
  z-index: 999;
 }
.fullscreen:hover, .fullscreen:focus,.fullscreen:blur
{
  text-decoration: none;
  color:red;
}

React

// Cache gallery container
      const galleryContainer = document.querySelector("#root");

      // Create new array with URLs for images
      let imgUrls = [
        "https://source.unsplash.com/3Z70SDuYs5g/800x600",
        "https://source.unsplash.com/01vFmYAOqQ0/800x600",
        "https://source.unsplash.com/2Bjq3A7rGn4/800x600",
        "https://source.unsplash.com/t20pc32VbrU/800x600",
        "https://source.unsplash.com/pHANr-CpbYM/800x600",
        "https://source.unsplash.com/3PmwYw2uErY/800x600",
        "https://source.unsplash.com/uOi3lg8fGl4/800x600",
        "https://source.unsplash.com/CwkiN6_qpDI/800x600",
        "https://source.unsplash.com/9O1oQ9SzQZQ/800x600",
        "https://source.unsplash.com/E4944K_4SvI/800x600",
        "https://source.unsplash.com/-hI5dX2ObAs/800x600",
        "https://source.unsplash.com/vZlTg_McCDo/800x600"
      ];

      // Component for gallery image
      class GalleryImage extends React.Component {
        render() {
          return (
            <img
              className={this.props.className}
              style={this.props.rotate}
              src={this.props.src}
              alt={this.props.alt}
            />
          );
        }
      }

      // Component for gallery modal
      class GalleryModal extends React.Component {
        constructor(props) {
          super(props);

          this.state = {
            rotation: 0
          };
          this.rotate = this.rotate.bind(this);
        }

        render() {
          const { rotation } = this.state;
          if (this.props.isOpen === false) {
            return null;
          }

          return (
            <div className="modal-overlay" name={this.props.name}>
              <div className="modal-body">
                <a href="#" className="button" onClick={() => this.rotate()}>
                  <i className="fas fa-sync-alt" />
                </a>
                <a href="#" className="button" onClick={this.props.onPrev}>
        ...