"Image Gallery with Fancybox"
Bootstrap 3.0.3 Snippet by coskuntekin

Post to Facebook Tweet this

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--####
### How to add in your boostrap project
1) Add jQuery "<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>"
2) Download fancybox (https://github.com/fancyapps/fancyBox)
3) Or use CDN (http://cdnjs.com/libraries/fancybox)
####--!>
<!-- References: https://github.com/fancyapps/fancyBox -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<div class="container">
<div class="row">
<div class='list-group gallery'>
<div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
<a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png">
<img class="img-responsive" alt="" src="http://placehold.it/320x320" />
<div class='text-right'>
<small class='text-muted'>Image Title</small>
</div> <!-- text-right / end -->
</a>
</div> <!-- col-6 / end -->
<div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
<a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png">
<img class="img-responsive" alt="" src="http://placehold.it/320x320" />
<div class='text-right'>
<small class='text-muted'>Image Title</small>
</div> <!-- text-right / end -->
</a>
</div> <!-- col-6 / end -->
<div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
<a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/300x320.png">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
.gallery
{
display: inline-block;
margin-top: 20px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
//FANCYBOX
//https://github.com/fancyapps/fancyBox
$(".fancybox").fancybox({
openEffect: "none",
closeEffect: "none"
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Argon Dashboard
arrow key navigation thumbnail gallery modal view
Image Crop jQuery
masonry Image Gallery

Questions / Comments:

Is it possible to make this work with Bootstrap 4? the grid is not showing right in version 4

G33K1E () - 8 years ago - Reply 0

I can't get this to work, i can't believe this guy would share this wonderful solution and not give a complete project to download. This is what frustrates me about people.

Nasdaq7777 () - 8 years ago - Reply 0

Thank you so much
Nice gallery

Bang Andre () - 8 years ago - Reply 0

Hi,

I created this open source script that helps create a gallery based on this design easily.

feel free to customize it and use it.

https://github.com/makerGee...

makerGeek () - 8 years ago - Reply 0

Also I have the problem when I \click on a thumbnail, it just opens the image in the browser, but not in modal. I am using these:

<link href="https://cdnjs.cloudflare.co..." media="screen" rel="stylesheet" type="text/css">

<script src="https://cdnjs.cloudflare.co..."></script>

<script src="https://cdnjs.cloudflare.co..."></script>

<script src="https://cdnjs.cloudflare.co..."></script>

<script src="https://ajax.googleapis.com..."></script>

Mark with a question () - 8 years ago - Reply 0

Plz tell me reason why is that some file is work only online server but not work local server like this http://bootsnipp.com/snippe...

Vishal Chand () - 9 years ago - Reply 0

is this funcybox free to use where ever i want or need to buy license?

Osmanbey () - 10 years ago - Reply 0

Hi osman;

You can check here about license document (http://fancyapps.com/fancyb...

coskuntekin () - 10 years ago - Reply 0

Hi guys;

I updated comment line also you can see step by step how to add image gallery.

coskuntekin () - 10 years ago - Reply 0

When I click on a thumbnail, it just opens the image in the browser, not in modal. What am I doing wrong?

Nebojša Smrzlić () - 10 years ago - Reply 0

fancybox 1.x does not work with jquery 2.x, i had the same problem.

Bradly () - 10 years ago - Reply 0

so you just used old jquery?

Nebojša Smrzlić () - 10 years ago - Reply 0

make sure jquery is loaded as first, had same problem, or conflict

pizza () - 10 years ago - Reply 0

It could be that jQuery is not loaded and that's why the modal doesn't work properly.

maxsurguy () - 10 years ago - Reply 0

I think Bootsnipp is the best so far, saving myself so many stress, also this Gallery markup is dope.

dojovader () - 10 years ago - Reply 0

Thank you so much, See you next bootsnipp.

coskuntekin () - 10 years ago - Reply 0

Thank you for the nice feedback! Enjoy using Bootsnipp :) Also consider getting a Bootsnipp sticker (check the home page for that).

maxsurguy () - 10 years ago - Reply 0

Can someone Please go through the step.. how can i get this to work!

Hasith () - 11 years ago - Reply 0

not working

Dacf94 () - 11 years ago - Reply 0

Please read this comment line "References: https://github.com/fancyapp..."

coskuntekin () - 11 years ago - Reply 0

I'm getting an error: "[an error occurred while processing this directive]".

I did everything according to the steps you wrote in the comment I'm replying to. What could be the problem?

Udid () - 10 years ago - Reply 0

would you tell me your jQuery version.

coskuntekin () - 10 years ago - Reply 0

That is because you need to download and install the Fancybox files: https://github.com/fancyapp...

NM () - 11 years ago - Reply 0