Skip to content

Instantly share code, notes, and snippets.

@antic183

antic183/example.html

Last active April 5, 2019 11:30
Show Gist options
  • Save antic183/37af8490ddd43857174a6b53db531240 to your computer and use it in GitHub Desktop.
Save antic183/37af8490ddd43857174a6b53db531240 to your computer and use it in GitHub Desktop.
Download ZIP
fancybox gallery groups
Raw
example.html
<!DOCTYPE html>
<html>
<head>
<title>fancybox</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
</head>
<body>
<div>
<!-- GALLERY GROUP 1 -->
<a href="http://farm6.staticflickr.com/5444/17679973232_568353a624_b.jpg" data-fancybox="gallery-group-1"
data-caption="Caption #1">
<img src="http://farm6.staticflickr.com/5444/17679973232_568353a624_m.jpg" alt="" />
</a>
<div style="display:none;">
<!-- HIDDEN IMAGES FOR GALLERY GROUP 1 -->
<a href="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_b.jpg" data-fancybox="gallery-group-1"
data-caption="Caption #2">
<img src="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_m.jpg" alt="" />
</a>
<a href="http://farm6.staticflickr.com/5612/15344856989_449794889d_b.jpg" data-fancybox="gallery-group-1"
data-caption="Caption #3">
<img src="http://farm6.staticflickr.com/5612/15344856989_449794889d_m.jpg" alt="" />
</a>
</div>
<!-- GALLERY GROUP 1 -->
<!-- GALLERY GROUP 2 -->
<a href="http://farm8.staticflickr.com/7489/15241066224_8864806ffd_b.jpg" data-fancybox="gallery-group-2"
data-caption="Caption #1">
<img src="http://farm8.staticflickr.com/7489/15241066224_8864806ffd_m.jpg" alt="" />
</a>
<div style="display:none;">
<!-- HIDDEN IMAGES FOR GALLERY GROUP 2 -->
<a href="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_b.jpg" data-fancybox="gallery-group-2"
data-caption="Caption #2">
<img src=http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_m.jpg" alt="" />
</a>
<a href="http://farm6.staticflickr.com/5614/15602332537_bae1aaccd8_b.jpg" data-fancybox="gallery-group-2"
data-caption="Caption #3">
<img src="http://farm6.staticflickr.com/5614/15602332537_bae1aaccd8_m.jpg" alt="" />
</a>
</div>
<!-- GALLERY GROUP 2 -->
</div>
<script>
$(document).ready(function () {
// OPTIONS SEE: https://fancyapps.com/fancybox/3/docs/#options
$('[data-fancybox="gallery-group-1"]').fancybox({
transitionEffect: "tube",
transitionDuration: 366,
buttons: [
//"zoom",
//"share",
//"slideShow",
//"fullScreen",
//"download",
"thumbs",
"close"
]
});
$('[data-fancybox="gallery-group-2"]').fancybox({
transitionEffect: "rotate",
transitionDuration: 156,
buttons: [
"download",
"thumbs",
"close"
]
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment