jQuery Portfolio Image Gallery Plugin

September 08, 2019 No comments jQuery Plugin Portfolio Gallery Bootstrap

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.

Portfolio image gallery plugin

2. Plugin Overview

Library bootstrap-portfolio-image-gallery
Author Adahab
Licence MIT Licence
Repository GitHub
Dependencies jQuery 1.3.1 or Latest version, Bootstrap 4.1.3

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.

<!--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:

<!-- 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">
<!--        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.

{{ message }}

{{ 'Comments are closed.' | trans }}