"Image Gallery with Fancybox"
Bootstrap 3.0.3 Snippet by coskuntekin

Post to Facebook Tweet this

<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

Argon Design System
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 () - 7 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 () - 7 years ago - Reply 0

Thank you so much
Nice gallery

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

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

Osmanbey () - 9 years ago - Reply 0

Hi osman;

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

coskuntekin () - 9 years ago - Reply 0

Hi guys;

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

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

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

Bradly () - 9 years ago - Reply 0

so you just used old jquery?

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

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

pizza () - 9 years ago - Reply 0

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

maxsurguy () - 9 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 () - 9 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 () - 10 years ago - Reply 0

not working

Dacf94 () - 10 years ago - Reply 0

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

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

would you tell me your jQuery version.

coskuntekin () - 9 years ago - Reply 0

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

NM () - 10 years ago - Reply 0