"gallery plugin"
Bootstrap 3.3.0 Snippet by jeevan123456

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="gallery clear"> <div class="bg" style="background-image: url(https://images.pexels.com/photos/1125273/pexels-photo-1125273.jpeg?cs=srgb&dl=abstract-art-blur-1125273.jpg&fm=jpg);"></div> <div class="bg" style="background-image: url(https://images.pexels.com/photos/834894/pexels-photo-834894.jpeg?cs=srgb&dl=background-blur-bokeh-834894.jpg&fm=jpg);"></div> <div class="bg" style="background-image: url(https://images.pexels.com/photos/599459/pexels-photo-599459.jpeg?cs=srgb&dl=architecture-buildings-city-599459.jpg&fm=jpg);"></div> <div class="bg" style="background-image: url(https://images.pexels.com/photos/940380/pexels-photo-940380.jpeg?cs=srgb&dl=dawn-dusk-evening-940380.jpg&fm=jpg);"></div> <div class="bg" style="background-image: url(https://images.pexels.com/photos/1275393/pexels-photo-1275393.jpeg?cs=srgb&dl=float-floating-globe-1275393.jpg&fm=jpg);"></div> <div class="bg" style="background-image: url(https://images.pexels.com/photos/1287145/pexels-photo-1287145.jpeg?cs=srgb&dl=cold-daylight-desktop-backgrounds-1287145.jpg&fm=jpg);"></div> <div class="bg" style="background-image: url(https://images.pexels.com/photos/1242764/pexels-photo-1242764.jpeg?cs=srgb&dl=alone-dawn-grass-1242764.jpg&fm=jpg);"></div> <div class="bg" style="background-image: url(https://images.pexels.com/photos/546913/pexels-photo-546913.jpeg?cs=srgb&dl=bridge-hanging-outdoors-546913.jpg&fm=jpg);"></div> </div>
@import url('https://fonts.googleapis.com/css?family=Anton'); *. :after, :before { box-sizing: border-box; } .clear:after, .clear:before { content: ''; display: table; clear: both; } .gallery { display: flex; flex-wrap: wrap; border: 10px solid #fff; width: calc(100% - 50px); margin: 60px auto 0; } .gallery a { display: block; text-decoration: none; width: 25%; overflow: hidden; outline: none; } .gallery a img { height: 100%; transform: scale(1,1); transition: all 300ms ease; } .gallery a img:hover { transform: scale(1.1,1.1); } h1 { text-align: center; font-size: 40px; font-family: 'Anton', sans-serif; letter-spacing: 10px; color: #fff; text-transform: uppercase; } .bg { width: 100%; height: 200px; background-size: cover; transform: scale(1,1); transition: all 300ms ease; } .bg:hover { transform: scale(1.1,1.1); } @media(max-width: 991px) { .gallery a { width: 50%; } } @media(max-width: 767px) { .gallery a { width: 100%; } .bg { height: 300px; } } h1 a { color: #000; }
$(document).ready(function(){ $('.gallery > div.bg').each(function(){ $(this).wrapAll('<a href="" data-fancybox="gallery"></a>'); }); $('.gallery a').each(function(){ var link = $(this).children('.bg').css('background-image'); console.log(link); link = link.replace(/(url\(|\)|")/g,''); $(this).attr('href', link); }); $("[data-fancybox]").fancybox({ loop: true, buttons: [ "zoom", "share", "slideShow", "fullScreen", "download", "thumbs", "close" ] }); });

Related: See More


Questions / Comments: