Bootstrap Snippet gallery plugin using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(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"
        ]       
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"gallery plugin"
Bootstrap 3.3.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"gallery plugin" Bootstrap 3.3.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"gallery plugin"
Bootstrap 3.3.0 Snippet by jeevan123456