"Image Gallery with Fancybox"
Bootstrap 3.0.3 Snippet by coskuntekin

<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"> <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"> <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> <!-- list-group / end --> </div> <!-- row / end --> </div> <!-- container / end -->
.gallery { display: inline-block; margin-top: 20px; }
$(document).ready(function(){ //FANCYBOX //https://github.com/fancyapps/fancyBox $(".fancybox").fancybox({ openEffect: "none", closeEffect: "none" }); });

Related: See More


Questions / Comments:

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

G33K1E () - 2 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 () - 2 years ago - Reply 0


Thank you so much
Nice gallery

Bang Andre () - 3 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 () - 3 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 () - 3 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 () - 4 years ago - Reply 0


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

Osmanbey () - 5 years ago - Reply 0


Hi osman;

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

coskuntekin () - 5 years ago - Reply 0


Hi guys;

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

coskuntekin () - 5 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ć () - 5 years ago - Reply 0


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

Bradly () - 5 years ago - Reply 0


so you just used old jquery?

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


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

pizza () - 5 years ago - Reply 0


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

maxsurguy () - 5 years ago - Reply 0


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

dojovader () - 5 years ago - Reply 0


Thank you so much, See you next bootsnipp.

coskuntekin () - 5 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 () - 5 years ago - Reply 0


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

Hasith () - 5 years ago - Reply 0


not working

Dacf94 () - 5 years ago - Reply 0


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

coskuntekin () - 5 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 () - 5 years ago - Reply 0


would you tell me your jQuery version.

coskuntekin () - 5 years ago - Reply 0


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

NM () - 5 years ago - Reply 0