<section class="section-gallery">
<div class="container">
<p>> Clique na imagem para maior detalhe, ou <a href="#" class="switch">clique aqui</a> para visualizar toda a galeria</p>
</div>
<div class="container-fluid">
<div class="img-grid-gallery">
<div class="img-grid-item bytwo">
<div>
<a href="https://dummyimage.com/1080x810/574357/fff&text=1"><img src="https://dummyimage.com/467x349/574357/fff&text=1" width="467" height="349" /></a>
</div><div>
<a href="https://dummyimage.com/1080x810/574357/fff&text=2"><img src="https://dummyimage.com/467x349/574357/fff&text=2" width="467" height="349" /></a></div>
</div>
<div class="img-grid-item byone">
<div>
<a href="https://dummyimage.com/1920x1080/574357/fff&text=3"><img src="https://dummyimage.com/612x731/574357/fff&text=3" width="612" height="731" /></a></div>
</div>
<div class="img-grid-item byfour">
<div class="img-grid-inner">
<div class="large">
<a href="https://dummyimage.com/1080x810/574357/fff&text=4"><img src="https://dummyimage.com/467x349/574357/fff&text=4" width="467" height="349" /></a>
</div>
<div class="small">
<a href="https://dummyimage.com/1920x1080/574357/fff&text=5"><img src="https://dummyimage.com/198x349/574357/fff&text=5" width="198" height="349" /></a>
</div>
</div>
<div class="img-grid-inner">
<div class="small">
<a href="https://dummyimage.com/1920x1080/574357/fff&text=6"><img src="https://dummyimage.com/198x349/574357/fff&text=6" width="198" height="349" /></a>
</div>
<div class="large">
<a href="https://dummyimage.com/1080x810/574357/fff&text=7"><img src="https://dummyimage.com/467x349/574357/fff&text=7" width="467" height="349" /></a>
</div>
</div>
</div>
</div>
<div class="fotorama-thumbs" data-auto="false" data-allow-full-screen="true" data-nav="thumbs">
<a href="https://dummyimage.com/1080x810/574357/fff&text=1"><img src="https://dummyimage.com/467x349/574357/fff&text=1" width="467" height="349" /></a>
<a href="https://dummyimage.com/1080x810/574357/fff&text=2"><img src="https://dummyimage.com/467x349/574357/fff&text=2" width="467" height="349" /></a>
<a href="https://dummyimage.com/1920x1080/574357/fff&text=3"><img src="https://dummyimage.com/612x731/574357/fff&text=3" width="612" height="731" /></a>
<a href="https://dummyimage.com/1080x810/574357/fff&text=4"><img src="https://dummyimage.com/467x349/574357/fff&text=4" width="467" height="349" /></a>
<a href="https://dummyimage.com/1920x1080/574357/fff&text=5"><img src="https://dummyimage.com/198x349/574357/fff&text=5" width="198" height="349" /></a>
<a href="https://dummyimage.com/1920x1080/574357/fff&text=6"><img src="https://dummyimage.com/198x349/574357/fff&text=6" width="198" height="349" /></a>
<a href="https://dummyimage.com/1080x810/574357/fff&text=7"><img src="https://dummyimage.com/467x349/574357/fff&text=7" width="467" height="349" /></a>
<a href="https://dummyimage.com/1080x810/574357/fff&text=8"><img src="https://dummyimage.com/198x349/574357/fff&text=8" width="198" height="349" /></a>
<a href="https://dummyimage.com/1080x810/574357/fff&text=9"><img src="https://dummyimage.com/198x349/574357/fff&text=9" width="198" height="349" /></a>
<a href="https://dummyimage.com/1080x810/574357/fff&text=10"><img src="https://dummyimage.com/467x349/574357/fff&text=10" width="467" height="349" /></a>
</div>
</div>
</section>
<section class="section-gallery">
<div class="container">
<p>> Clique na imagem para maior detalhe, ou <a href="#" class="switch">clique aqui</a> para visualizar toda a galeria</p>
</div>
<div class="container-fluid">
<div class="img-grid-gallery">
<div class="img-grid-item byfour">
<div class="img-grid-inner">
<div class="large">
<a href="https://dummyimage.com/1080x810/574357/fff&text=4"><img src="https://dummyimage.com/467x349/574357/fff&text=4" width="467" height="349" /></a>
</div>
<div class="small">
<a href="https://dummyimage.com/1920x1080/574357/fff&text=5"><img src="https://dummyimage.com/198x349/574357/fff&text=5" width="198" height="349" /></a>
</div>
</div>
<div class="img-grid-inner">
<div class="small">
<a href="https://dummyimage.com/1920x1080/574357/fff&text=6"><img src="https://dummyimage.com/198x349/574357/fff&text=6" width="198" height="349" /></a>
</div>
<div class="large">
<a href="https://dummyimage.com/1080x810/574357/fff&text=7"><img src="https://dummyimage.com/467x349/574357/fff&text=7" width="467" height="349" /></a>
</div>
</div>
</div>
<div class="img-grid-item byone">
<div>
<a href="https://dummyimage.com/1920x1080/574357/fff&text=3"><img src="https://dummyimage.com/612x731/574357/fff&text=3" width="612" height="731" /></a></div>
</div>
<div class="img-grid-item bytwo">
<div>
<a href="https://dummyimage.com/1080x810/574357/fff&text=1"><img src="https://dummyimage.com/467x349/574357/fff&text=1" width="467" height="349" /></a>
</div><div>
<a href="https://dummyimage.com/1080x810/574357/fff&text=2"><img src="https://dummyimage.com/467x349/574357/fff&text=2" width="467" height="349" /></a></div>
</div>
</div>
<div class="fotorama-thumbs" data-auto="false" data-allow-full-screen="true" data-nav="thumbs">
<a href="https://dummyimage.com/1080x810/574357/fff&text=1"><img src="https://dummyimage.com/467x349/574357/fff&text=1" width="467" height="349" /></a>
<a href="https://dummyimage.com/1080x810/574357/fff&text=2"><img src="https://dummyimage.com/467x349/574357/fff&text=2" width="467" height="349" /></a>
<a href="https://dummyimage.com/1920x1080/574357/fff&text=3"><img src="https://dummyimage.com/612x731/574357/fff&text=3" width="612" height="731" /></a>
<a href="https://dummyimage.com/1080x810/574357/fff&text=4"><img src="https://dummyimage.com/467x349/574357/fff&text=4" width="467" height="349" /></a>
<a href="https://dummyimage.com/1920x1080/574357/fff&text=5"><img src="https://dummyimage.com/198x349/574357/fff&text=5" width="198" height="349" /></a>
<a href="https://dummyimage.com/1920x1080/574357/fff&text=6"><img src="https://dummyimage.com/198x349/574357/fff&text=6" width="198" height="349" /></a>
<a href="https://dummyimage.com/1080x810/574357/fff&text=7"><img src="https://dummyimage.com/467x349/574357/fff&text=7" width="467" height="349" /></a>
<a href="https://dummyimage.com/1080x810/574357/fff&text=8"><img src="https://dummyimage.com/198x349/574357/fff&text=8" width="198" height="349" /></a>
<a href="https://dummyimage.com/1080x810/574357/fff&text=9"><img src="https://dummyimage.com/198x349/574357/fff&text=9" width="198" height="349" /></a>
<a href="https://dummyimage.com/1080x810/574357/fff&text=10"><img src="https://dummyimage.com/467x349/574357/fff&text=10" width="467" height="349" /></a>
</div>
</div>
</section>
.section-gallery{ padding-top:30px;}
.section-gallery .fotorama-thumbs {
display: none;
}
.img-grid-gallery {
max-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
max-width: 1840px;
margin: 0 auto;
}
.img-grid-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.img-grid-item.bytwo {
-webkit-box-flex: 0;
-ms-flex: 0 25.64457%;
flex: 0 25.64457%;
min-width: 0;
}
.img-grid-item.byone {
-webkit-box-flex: 0;
-ms-flex: 0 33.52500%;
flex: 0 33.52500%;
min-width: 0;
}
.img-grid-item.byfour {
-webkit-box-flex: 0;
-ms-flex: 0 37.35218%;
flex: 0 37.35218%;
min-width: 0;
}
.img-grid-inner {
max-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.img-grid-inner > .large {
width: 67.00143%;
}
.img-grid-inner > .small {
width: 28.40746%;
}
.img-grid-item img {
max-width: 100%;
height: auto;
}
.img-grid-item a {
display: inline-block;
position: relative;
font: normal normal normal 14px/1 FontAwesome;
font-size: 24px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none;
}
.img-grid-item a::before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(216, 216, 216, 0.65);
-webkit-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
content: " ";
display: block;
opacity: 0;
z-index: 1;
}
.img-grid-item a::after {
content: "\f00e";
color: #1d1d1b;
position: absolute;
top: 50%;
left: 50%;
display: block;
-webkit-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
}
.img-grid-item a:hover::after,
.img-grid-item a:hover::before {
opacity: 1;
}
@media only screen and (min-width: 768px) {
.img-grid-item a {
font-size: 48px;
}
}
.fotorama--fullscreen,
.fotorama-overlay {
background-color: rgba(29, 29, 27, 0.9);
}
.fullscreen,
.fotorama--fullscreen .fotorama__stage,
.fotorama--fullscreen .fotorama__nav{
background-color:transparent;
}
/* straight “close” icon instead of “cancel fullscreen” */
.fotorama--fullscreen .fotorama__fullscreen-icon {
background-position: -64px 0;
}
$(function () {
// overlay for smoother fullscreen enter
var $overlay = $('<div class="fotorama-overlay"></div>')
.css({position: 'fixed', top: 0, right: 0, bottom: 0, left: 0, zIndex: 10001})
.fadeTo(0, 0)
.hide()
.appendTo('body');
// take all .fotorama blocks
$('.section-gallery').each(function () {
var $gallery = $(this),
// clone it and make fotorama
$fotorama = $('.fotorama-thumbs', $gallery)
.clone()
//.show()
.css({position: 'absolute', left: -99999, top: -99999})
.appendTo('body')
.fadeTo(0, 0)
.fotorama(),
fotorama = $fotorama.data('fotorama');
for (var _i = 0, _l = fotorama.data.length; _i < _l; _i++) {
// prepare id to use in fotorama.show()
fotorama.data[_i].id = fotorama.data[_i].img;
}
// bind clicks
$gallery.on('click', 'a', function (e) {
e.preventDefault();
var $this = $(this);
$overlay
.show()
.stop()
.fadeTo(150, 1, function () {
$fotorama.stop().fadeTo(150, 1);
// API calls
fotorama
// show needed frame
.show({index: $this.attr('href'), time: 0})
// open fullscreen
.requestFullScreen();
});
});
$fotorama.on('fotorama:fullscreenexit', function () {
$fotorama.stop().fadeTo(0, 0);
$overlay.stop().fadeTo(300, 0, function () {
$overlay.hide();
});
});
});
});