fancyBox thumbnail sidebar

by Louis Walch

HTML

<html>

  <head>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>

  </head>

  <body>


    <h2>fancyBox v3.3 - Thumbnails</h2>

    <hr class="my-5" />

    <p class="imglist">
      <a href="https://source.unsplash.com/juHayWuaaoQ/1500x1000" data-fancybox="images">
    <img src="https://source.unsplash.com/juHayWuaaoQ/240x160" />
  </a>

      <a href="https://source.unsplash.com/eWFdaPRFjwE/1500x1000" data-fancybox="images">
    <img src="https://source.unsplash.com/eWFdaPRFjwE/240x160" />
  </a>

      <a href="https://source.unsplash.com/i2KibvLYjqk/1500x1000" data-fancybox="images">
    <img src="https://source.unsplash.com/i2KibvLYjqk/240x160" />
  </a>

      <a href="https://source.unsplash.com/RFgO9B_OR4g/1500x1000" data-fancybox="images">
    <img src="https://source.unsplash.com/RFgO9B_OR4g/240x160" />
  </a>

      <a href="https://source.unsplash.com/7bwQXzbF6KE/1500x1000" data-fancybox="images">
    <img src="https://source.unsplash.com/7bwQXzbF6KE/240x160" />
  </a>

      <a href="https://source.unsplash.com/NhU0nUR7920/1500x1000" data-fancybox="images">
    <img src="https://source.unsplash.com/NhU0nUR7920/240x160" />
  </a>

      <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...

CSS

@media all and (min-width: 800px) {
  .fancybox-thumbs {
    top: auto;
    width: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: 95px;
    padding: 10px 10px 5px 10px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
  }
  .fancybox-show-thumbs .fancybox-inner {
    right: 0;
    bottom: 95px;
  }
}

JavaScript

$('[data-fancybox="images"]').fancybox({
  thumbs: {
    autoStart: true,
    axis: 'x'
  }
})