1. Introduction
bootstrap-portfolio-image-gallery is a photo gallery plugin that extends the Bootstrap framework with new features specially designed for portfolio presentations. The plugin is the best solution for a team introduction, products or work gallery.
2. Plugin Overview
Demo
3. How to install and use bootstrap-portfolio-image-gallery jQuery plugin
Follow the below steps to install bootstrap-portfolio-image-gallery jQuery plugin on your website.
1. Include jQuery , Popper , Bootstrap and bootstrap-portfolio-image-gallery JavaScript files:
Copy
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!--Popper.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!--Bootstrap JS-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--Portfolio Gallery JS-->
<script src="gallery-plugin.js"></script>
2. And CSS files:
Copy
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!--Fontawesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<!--Portfolio Gallery CSS-->
<link rel="stylesheet" type="text/css" media="screen" href="gallery.css">
3. Create sample HTML structure for image gallery:
Copy
<!-- GALLERY CODE -->
<!--- THIS CODE GOES INTO YOUR HTML FILE -->
<div class="[ container-fluid ]">
<div id="employee-gallery" class="[ row ]">
<!--employee nr 1-->
<div id="henrik-henriksen" class="[ col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 ][ employee ]"><!--CHANGE ID HERE-->
<i class="[ fas fa-info ][ employee__info-button ]"></i>
<div class="[ employee__info ]">
<p class="[ employee__info--text ]">
<span class="[ employee__info--title ]">Henrik Henriksen</span><br><!--CHANGE NAME HERE-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<!--CHANGE TEXT ABOUT PERSON HERE-->
</p>
</div>
<p class="[ employee__name ]">Henrik Henriksen</p><!--CHANGE NAME HERE-->
</div>
<!--employee nr 2-->
<div id="yvonne-skogstad" class="[ col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 ][ employee ]"><!--CHANGE ID HERE-->
<i class="[ fas fa-info ][ employee__info-button ]"></i>
<div class="[ employee__info ]">
<p class="[ employee__info--text ]">
<span class="[ employee__info--title ]">Yvonne Skogstad</span><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<!--CHANGE TEXT ABOUT PERSON HERE-->
</p>
</div>
<p class="[ employee__name ]">Yvonne Skogstad</p><!--CHANGE NAME HERE-->
</div>
<!--employee nr 3-->
<div id="dog-dogster" class="[ col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 ][ employee ]"><!--CHANGE ID HERE-->
<i class="[ fas fa-info ][ employee__info-button ]"></i>
<div class="[ employee__info ]">
<p class="[ employee__info--text ]">
<span class="[ employee__info--title ]">Dog Dogster</span><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<!--CHANGE TEXT ABOUT PERSON HERE-->
</p>
</div>
<p class="[ employee__name ]">Dog Dogster</p><!--CHANGE NAME HERE-->
</div>
<!--employee nr 4-->
<div id="john-johnsen" class="[ col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 ][ employee ]"><!--CHANGE ID HERE-->
<i class="[ fas fa-info ][ employee__info-button ]"></i>
<div class="[ employee__info ]">
<p class="[ employee__info--text ]">
<span class="[ employee__info--title ]">John Johnsen</span><br><!--CHANGE NAME HERE-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<!--CHANGE TEXT ABOUT PERSON HERE-->
</p>
</div>
<p class="[ employee__name ]">John Johnsen</p><!--CHANGE NAME HERE-->
</div>
<!--employee nr 5-->
<div id="tiny-dog" class="[ col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 ][ employee ]"><!--CHANGE ID HERE-->
<i class="[ fas fa-info ][ employee__info-button ]"></i>
<div class="[ employee__info ]">
<p class="[ employee__info--text ]">
<span class="[ employee__info--title ]">Tiny Dog</span><br><!--CHANGE NAME HERE-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<!--CHANGE TEXT ABOUT PERSON HERE-->
</p>
</div>
<p class="[ employee__name ]">Tiny Dog</p><!--CHANGE NAME HERE-->
</div>
<!--employee nr 6-->
<div id="frida-fransen" class="[ col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 ][ employee ]"><!--CHANGE ID HERE-->
<i class="[ fas fa-info ][ employee__info-button ]"></i>
<div class="[ employee__info ]">
<p class="[ employee__info--text ]">
<span class="[ employee__info--title ]">Frida Fransen</span><br><!--CHANGE NAME HERE-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<!--CHANGE TEXT ABOUT PERSON HERE-->
</p>
</div>
<p class="[ employee__name ]">Frida Fransen</p><!--CHANGE NAME HERE-->
</div>
</div>
</div>
You don't have to initialize bootstrap-portfolio-image-gallery plugin it will be automatically attached to galleries on your website after adding CSS and JS files.
4. Conclusion
In this article, we presented bootstrap-portfolio-image-gallery jQuery plugin for photo galleries that should be useful for everyone who wants to present their work awesomely. The plugin uses nice animations. When a user changes screen size it will automatically adjust photos to the new available size.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}