fancybox v3.4 - Embedded gallery

fancybox-v3-4-embedded-gallery.markdown

fancybox v3.4 - Embedded gallery

A Pen by Janis Skarnelis on CodePen.

License.

index.html

<h2>fancybox v3.4 - Embedded gallery</h2>

<p>Responsive embedded gallery; aspect ratio is 3/2</p>

<hr class="my-5" />

<div class="page-generator__output js-generator-output" id="output"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tristique nulla aliquet enim tortor at auctor urna nunc id. Mattis enim ut tellus elementum sagittis vitae et. Dui nunc mattis enim ut tellus elementum. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut. Vestibulum sed arcu non odio. Lorem sed risus ultricies tristique nulla aliquet enim tortor at. Sit amet luctus venenatis lectus magna fringilla. Rutrum tellus pellentesque eu tincidunt. Ac felis donec et odio pellentesque diam. Scelerisque in dictum non consectetur a erat nam at lectus. Tortor dignissim convallis aenean et tortor at. Quam vulputate dignissim suspendisse in. Donec massa sapien faucibus et molestie ac feugiat. Lectus urna duis convallis convallis tellus id interdum velit. Eget mi proin sed libero enim sed faucibus turpis. Dictum sit amet justo donec enim diam vulputate ut.</p>
  
  <div id="fancybox-placeholder"></div>
<p class="imglist" style="max-width: 1000px;display:none;">
  <a href="https://source.unsplash.com/juHayWuaaoQ/1500x1000" data-fancybox="S">
    <img src="https://source.unsplash.com/juHayWuaaoQ/240x160" />
  </a>

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

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

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

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

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

<p>Non arcu risus quis varius quam. Purus semper eget duis at. Auctor augue mauris augue neque gravida in. Vel pretium lectus quam id leo in vitae turpis. Aliquet nec ullamcorper sit amet risus nullam. Facilisis leo vel fringilla est ullamcorper eget nulla facilisi. Eget felis eget nunc lobortis mattis aliquam faucibus. Egestas diam in arcu cursus euismod quis viverra. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Adipiscing at in tellus integer feugiat scelerisque varius morbi enim. Adipiscing diam donec adipiscing tristique risus. Blandit cursus risus at ultrices mi tempus imperdiet. Auctor elit sed vulputate mi sit amet. Venenatis cras sed felis eget velit. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin. Sem fringilla ut morbi tincidunt augue interdum. Elit eget gravida cum sociis natoque penatibus et magnis dis.</p>
<p>Nibh sit amet commodo nulla facilisi nullam vehicula ipsum a. Leo a diam sollicitudin tempor id eu nisl nunc. Tempor nec feugiat nisl pretium fusce id velit ut tortor. Dolor sed viverra ipsum nunc aliquet bibendum. Lacus vel facilisis volutpat est velit egestas dui id ornare. A cras semper auctor neque vitae tempus quam. Platea dictumst quisque sagittis purus sit. Senectus et netus et malesuada fames ac turpis egestas maecenas. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Integer vitae justo eget magna fermentum iaculis eu non. Interdum velit laoreet id donec ultrices tincidunt. Rhoncus mattis rhoncus urna neque. Purus in mollis nunc sed id semper. Nibh nisl condimentum id venenatis. Tellus pellentesque eu tincidunt tortor aliquam. Aliquam purus sit amet luctus venenatis. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut placerat. Ipsum consequat nisl vel pretium lectus quam id. Eu facilisis sed odio morbi. At consectetur lorem donec massa sapien faucibus et molestie ac.</p>
<p>Et leo duis ut diam quam. Felis bibendum ut tristique et egestas quis. Tortor condimentum lacinia quis vel eros. A diam maecenas sed enim ut. Amet consectetur adipiscing elit duis tristique. Lectus proin nibh nisl condimentum id venenatis a. Diam maecenas ultricies mi eget mauris pharetra et. Euismod in pellentesque massa placerat duis ultricies. Posuere ac ut consequat semper viverra nam libero. Blandit massa enim nec dui nunc mattis enim ut tellus. Gravida dictum fusce ut placerat orci nulla. Nam at lectus urna duis convallis convallis tellus id. Ut ornare lectus sit amet est placerat. Lectus arcu bibendum at varius vel pharetra vel. In iaculis nunc sed augue lacus viverra vitae congue. Posuere ac ut consequat semper viverra nam libero. Fusce id velit ut tortor pretium viverra suspendisse. Velit laoreet id donec ultrices tincidunt arcu non sodales neque. Fusce ut placerat orci nulla pellentesque dignissim enim sit.</p>
<p>Justo laoreet sit amet cursus sit amet. Cursus mattis molestie a iaculis. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Duis convallis convallis tellus id interdum velit laoreet id. Lorem dolor sed viverra ipsum nunc aliquet bibendum. Cursus risus at ultrices mi tempus imperdiet nulla. Quisque non tellus orci ac auctor augue mauris augue neque. Mauris nunc congue nisi vitae suscipit tellus. Risus feugiat in ante metus dictum at tempor commodo ullamcorper. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Mattis enim ut tellus elementum sagittis vitae et leo duis. Tempor nec feugiat nisl pretium fusce id velit ut tortor. Leo urna molestie at elementum eu facilisis. Sit amet nisl suscipit adipiscing bibendum.</p></div>

script.js

$.fancybox.open(
  $('.imglist a'), 
  {
    parentEl : '#fancybox-placeholder',
    hideScrollbar : false,
    autoFocus: false,
    trapFocus : false,
    idleTime : false,
    keyboard: false,
    loop : true,
    gutter : 0,
    slideShow : {
      autoStart : true,
      speed : 3000
    },
    touch : {
      vertical : false
    },
    animationEffect : "fade",
    transitionEffect: "slide",
    transitionDuration : 800,
    buttons : [
      'zoom',
      'slideShow',
      'thumbs'
    ]
  }
); 

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://codepen.io/fancyapps/pen/jpgVba"></script>

style.css

#fancybox-placeholder {
  float: left;
  margin-right: 1em;
  min-width: 300px;
  min-height: 200px;
  overflow: hidden;
  padding-top: 33.33%;
  position: relative;
  width: 50%;
}

#fancybox-placeholder .fancybox-container {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* Remove space around image */
.fancybox-slide--image {
  padding: 0;
}

.fancybox-slide--image .fancybox-content {
  margin: 0;
}

styles

<link href="https://codepen.io/fancyapps/pen/jpgVba" rel="stylesheet" />
<link href="https://codepen.io/fancyapps/pen/Kxdwjj" rel="stylesheet" />