"Image Gallery using bootstrap 4"
Bootstrap 4.0.0 Snippet by dipendra

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <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> <!-- Page Content --> <div class="container page-top"> <div class="row"> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="https://images.pexels.com/photos/62307/air-bubbles-diving-underwater-blow-62307.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" class="fancybox" rel="ligthbox"> <img src="https://images.pexels.com/photos/62307/air-bubbles-diving-underwater-blow-62307.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" class="zoom img-fluid " alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="https://images.pexels.com/photos/38238/maldives-ile-beach-sun-38238.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" class="fancybox" rel="ligthbox"> <img src="https://images.pexels.com/photos/38238/maldives-ile-beach-sun-38238.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" class="zoom img-fluid" alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="https://images.pexels.com/photos/158827/field-corn-air-frisch-158827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="fancybox" rel="ligthbox"> <img src="https://images.pexels.com/photos/158827/field-corn-air-frisch-158827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="zoom img-fluid " alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="https://images.pexels.com/photos/302804/pexels-photo-302804.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="fancybox" rel="ligthbox"> <img src="https://images.pexels.com/photos/302804/pexels-photo-302804.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="zoom img-fluid " alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="https://images.pexels.com/photos/1038914/pexels-photo-1038914.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" class="fancybox" rel="ligthbox"> <img src="https://images.pexels.com/photos/1038914/pexels-photo-1038914.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" class="zoom img-fluid " alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="https://images.pexels.com/photos/414645/pexels-photo-414645.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" class="fancybox" rel="ligthbox"> <img src="https://images.pexels.com/photos/414645/pexels-photo-414645.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" class="zoom img-fluid " alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="https://images.pexels.com/photos/56005/fiji-beach-sand-palm-trees-56005.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="fancybox" rel="ligthbox"> <img src="https://images.pexels.com/photos/56005/fiji-beach-sand-palm-trees-56005.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="zoom img-fluid " alt=""> </a> </div> <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a href="https://images.pexels.com/photos/1038002/pexels-photo-1038002.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="fancybox" rel="ligthbox"> <img src="https://images.pexels.com/photos/1038002/pexels-photo-1038002.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="zoom img-fluid " alt=""> </a> </div> </div> </div>
body { background-color:#1d1d1d !important; font-family: "Asap", sans-serif; color:#989898; margin:10px; font-size:16px; } #demo { height:100%; position:relative; overflow:hidden; } .green{ background-color:#6fb936; } .thumb{ margin-bottom: 30px; } .page-top{ margin-top:85px; } img.zoom { width: 100%; height: 200px; border-radius:5px; object-fit:cover; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; } .transition { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .modal-header { border-bottom: none; } .modal-title { color:#000; } .modal-footer{ display:none; }
$(document).ready(function(){ $(".fancybox").fancybox({ openEffect: "none", closeEffect: "none" }); $(".zoom").hover(function(){ $(this).addClass('transition'); }, function(){ $(this).removeClass('transition'); }); });

Related: See More


Questions / Comments:

HI dipendra,

Can you get the same for bootstrap 3.3.7?

sbala285 (-1) - 5 years ago - Reply -1


The code here is correct and works perfect

quadcore () - 1 year ago - Reply 0


The code here is correct and works perfect :)

quadcore () - 1 year ago - Reply 0


What do you mean this does not work and has incorrect code? For those beginners just starting to program things it would appear you all really need to learn the simple basics before writing these comments because all the code in this example does work perfect if you simply put the 3 sections into a html document on a valid server you own. if you are trying to open it from a windows desktop file it wont work cause the plugins use Ajax which does not work when called from a local static file. The only thing that could be said is wrong with this code is simply put the jquery include file first before the bootstrap because like I said anyone who knows the basics knows jquery is needed before any modules like bootstrap.js which calls jquery functions...

quadcore () - 1 year ago - Reply 0


What do you mean this does not work and has incorrect code? For those beginners just starting to program things it would appear you all really need to learn the simple basics before writing these comments because all the code in this example does work perfect if you simply put the 3 sections into a html document on a valid server you own. if you are trying to open it from a windows desktop file it wont work cause the plugins use Ajax which does not work when called from a local static file. The only thing that could be said is wrong with this code is simply put the jquery.js include file first before the bootstrap.js because like I said anyone who knows the basics knows jquery.js is needed before any modules like bootstrap.js which calls jquery functions...

quadcore () - 1 year ago - Reply 0


What do you mean this does not work and has incorrect code? For those beginners just starting to program things it would appear you all really need to learn the simple basics before writing these comments because all the code in this example does work perfect if you simply put the 3 sections into a html document on a valid server you own. if you are trying to open it from a windows desktop file it wont work cause the plugins use Ajax which does not work when called from a local static file. The only thing that could be said is wrong with this code is simply put the jquery,js include file first before the bootstrap.js because like I said anyone who knows the basics knows jquery.js is needed before any modules like bootstrap.js which calls jquery functions...

quadcore () - 1 year ago - Reply 0


As nearly always, not enough info and incorrect code. If Bootsnipp don't check these for accuracy, I think i'll go elsewhere. otherwise, i waste an hour or two trying to fix them every time.

BronYrAur () - 2 years ago - Reply 0


As nearly always, not enough info and incorrect code. If Bootsnipp don't check these for accuracy, I think i'll go elsewhere. otherwise, i waste an hour or two trying to fix them every time. :-(

BronYrAur () - 2 years ago - Reply 0


BS 4 CODE ?

col-xs doesnt exist anymore

cotiga (-1) - 4 years ago - Reply 0


Works Nice here but I cant get it to work

Bootstrap throws me for a Loop , Wish old days were back LOL

I see Java code , css code , but what to name them and where to put them ???

Thanks

jondoe76 () - 5 years ago - Reply 0