fancyBox v3.5 - Customized layout

fancybox-v3-5-customized-layout.markdown

fancyBox v3.5 - Customized layout

A Pen by Janis Skarnelis on CodePen.

License.

index.html

<h2>fancyBox v3.5 - Customized layout</h2>

<hr class="my-5" />

<p class="imglist">
  <a href="https://source.unsplash.com/ndjyaOp0fOc/1600x900" data-fancybox="images" data-type="image">
      <img src="https://source.unsplash.com/ndjyaOp0fOc/240x160" />
  </a>
  
  <a href="https://source.unsplash.com/A-fubu9QJxE/1600x900" data-fancybox="images" data-type="image">
      <img src="https://source.unsplash.com/A-fubu9QJxE/240x160" />
  </a>
  
  <a href="https://source.unsplash.com/rkkr6-2I4sg/1600x900" data-fancybox="images" data-type="image">
      <img src="https://source.unsplash.com/rkkr6-2I4sg/240x160" />
  </a>
  
  <a href="https://source.unsplash.com/mr_Tg4SI66A/1600x900" data-fancybox="images" data-type="image">
      <img src="https://source.unsplash.com/mr_Tg4SI66A/240x160" />
  </a>
  
  <a href="https://source.unsplash.com/YEsedBccUEA/1600x900" data-fancybox="images" data-type="image">
      <img src="https://source.unsplash.com/YEsedBccUEA/240x160" />
  </a>
  
  <a href="https://source.unsplash.com/Hw62tzAkXXE/1600x900" data-fancybox="images" data-type="image">
      <img src="https://source.unsplash.com/Hw62tzAkXXE/240x160" />
  </a>
</p>

script.js

  $('[data-fancybox="images"]').fancybox({
    baseClass: "fancybox-custom-layout",
    infobar: false,
    touch: {
      vertical: false
    },
    buttons: ["close", "thumbs", "share"],
    animationEffect: "fade",
    transitionEffect: "fade",
    preventCaptionOverlap: false,
    idleTime: false,
    gutter: 0,
    // Customize caption area
    caption: function(instance) {
      return '<h3>home</h3><p>interiors, exteriors, and the humans that inhabit them.</p><p><a href="https://unsplash.com/collections/curated/162" target="_blank">unsplash.com</a></p>';
    }
  });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>

style.css

@media all and (min-width: 600px) {
  /* Change color for backdrop */
  .fancybox-custom-layout .fancybox-bg {
    background: #fcfaf9;
  }

  .fancybox-custom-layout.fancybox-is-open .fancybox-bg {
    opacity: 1;
  }

  /* Move caption area to the right side */
  .fancybox-custom-layout .fancybox-caption {
    background: #f1ecec;
    bottom: 0;
    color: #6c6f73;
    left: auto;
    padding: 30px 20px;
    right: 44px;
    top: 0;
    width: 256px;
  }

  .fancybox-custom-layout .fancybox-caption__body {
    max-height: 100%;
  }

  .fancybox-custom-layout .fancybox-caption h3 {
    color: #444;
    font-size: 21px;
    line-height: 1.3;
    margin-bottom: 24px;
  }

  .fancybox-custom-layout .fancybox-caption a {
    color: #444;
  }

  /* Remove gradient from caption*/
  .fancybox-custom-layout .fancybox-caption::before {
    display: none;
  }

  /* Adjust content area position */
  .fancybox-custom-layout .fancybox-stage {
    right: 300px;
  }

  /* Align buttons at the right side  */
  .fancybox-custom-layout .fancybox-toolbar {
    background: #3b3b45;
    bottom: 0;
    left: auto;
    right: 0;
    top: 0;
    width: 44px;
  }

  /* Remove background from all buttons */
  .fancybox-custom-layout .fancybox-button {
    background: transparent;
  }

  /* Navigation arrows */
  .fancybox-custom-layout .fancybox-navigation .fancybox-button div {
    padding: 2px;
  }

  .fancybox-custom-layout .fancybox-navigation .fancybox-button[disabled] {
    color: #ddd;
  }

  .fancybox-custom-layout .fancybox-navigation .fancybox-button:not([disabled]) {
    color: #333;
  }

  /* Reposition right arrow */
  .fancybox-custom-layout .fancybox-button--arrow_right {
    right: 308px;
  }
}

styles

<link href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.css" rel="stylesheet" />
<link href="https://codepen.io/fancyapps/pen/Kxdwjj" rel="stylesheet" />