Skip to content

Instantly share code, notes, and snippets.

@XIOLog

XIOLog/_fancybox.sass

Last active January 31, 2019 01:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save XIOLog/23441c995ce0789908c16c60eb8c09bb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save XIOLog/23441c995ce0789908c16c60eb8c09bb to your computer and use it in GitHub Desktop.
Download ZIP
Всплывающая галерея на базе Bootstrap 4. Не забыть подключить файлы fancybox (js, css)
Raw
_fancybox.sass
.fbox
a
img
filter: grayscale(80%)
transition: 0.5s ease-in-out
&:hover
img
filter: grayscale(0)
transition: 0.5s ease-in-out
Raw
fancybox.html
<div class="row mb-4">
<div class="col-md-3 fbox">
<a data-fancybox="gallery" href="img/prod_1.jpg">
<img class="img-fluid img-thumbnail w-100" src="img/mini/prod_mini_1.jpg" alt='Гипермаркет "Карусель"' />
</a>
</div>
<div class="col-md-3 fbox">
<a data-fancybox="gallery" href="img/prod_2.jpg">
<img class="img-fluid img-thumbnail w-100" src="img/mini/prod_mini_2.jpg" alt='Гипермаркет "Карусель"' />
</a>
</div>
<div class="col-md-3 fbox">
<a data-fancybox="gallery" href="img/prod_3.jpg">
<img class="img-fluid img-thumbnail w-100" src="img/mini/prod_mini_3.jpg" alt='Гипермаркет "Карусель"' />
</a>
</div>
<div class="col-md-3 fbox">
<a data-fancybox="gallery" href="img/prod_4.jpg">
<img class="img-fluid img-thumbnail w-100" src="img/mini/prod_mini_4.jpg" alt='Гипермаркет "Карусель"' />
</a>
</div>
</div>
Raw
fancybox.js
$(function() {
$(".fancybox").fancybox();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment