WM Gridfolio jQuery Portfolio Style Content Gallery Plugin that creates a responsive grid gallery of your portfolio website to display your images.

responsive portfolio gallery, responsive filter gallery jquery, jquery portfolio gallery plugin

Mouseover Image Gallery Plugin for Vue.js | VueRollr

How to make use of it:

1. Include the jQuery library with the jQuery WM Gridfolio script and CSS in the document.

<link rel="stylesheet" href="jquery.wm-gridfolio-1.0.min.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.wm-gridfolio-1.0.min.js"></script>

2. Structure of tags to create a photo gallery in a grid layout.

<div class="wmg-container demo">
  <div class="wmg-item">
    <div class="wmg-thumbnail">
      <div class="wmg-thumbnail-content"> 
        
        <!-- Thumbnail --> 
        <img src="img-1.jpg" alt="image"> 
        
      </div>
      <div class="wmg-arrow"></div>
    </div>
    <div class="wmg-details"> <span class="wmg-close"></span>
      <div class="wmg-details-content"> 
        
        <!-- Image details -->
        <div class="container exemplo">
          <div class="row">
            <div class="col-md-6"> <img src="large-1.jpg" alt="image"> </div>
            <div class="col-md-6">
              <h2>Title 1</h2>
              <hr>
              <p> Description 1 </p>
              <a href="#" class="btn btn-primary btn-lg" title="Read more">Read more</a> </div>
          </div>
        </div>
        
      </div>
    </div>
  </div>
  
  <div class="wmg-item">
    <div class="wmg-thumbnail">
      <div class="wmg-thumbnail-content"> 
        
        <!-- exemplo de conteudo para thumbnail --> 
        <img src="img-2.jpg" alt="image"> 
        <!-- fim do exemplo --> 
        
      </div>
      <div class="wmg-arrow"></div>
    </div>
    <div class="wmg-details"> <span class="wmg-close"></span>
      <div class="wmg-details-content"> 
        
        <!-- exemplo de coteúdo para detail -->
        <div class="container exemplo">
          <div class="row">
            <div class="col-md-6"> <img src="large-2.jpg" alt="image"> </div>
            <div class="col-md-6">
              <h2>Title 2</h2>
              <hr>
              <p> Description 2 </p>
              <a href="#" class="btn btn-primary btn-lg" title="Read more">Read more</a> </div>
          </div>
        </div>
        
      </div>
    </div>
  </div>
  
  <div class="wmg-item">
    <div class="wmg-thumbnail">
      <div class="wmg-thumbnail-content"> 
        
        <img src="img-3.jpg" alt="image"> 
        
      </div>
      <div class="wmg-arrow"></div>
    </div>
    <div class="wmg-details"> <span class="wmg-close"></span>
      <div class="wmg-details-content"> 
        
        <div class="container exemplo">
          <div class="row">
            <div class="col-md-6"> <img src="large-3.jpg" alt="image"> </div>
            <div class="col-md-6">
              <h2>Title 3</h2>
              <hr>
              <p> Description 3 </p>
              <a href="#" class="btn btn-primary btn-lg" title="Read more">Read more</a> </div>
          </div>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

3. Configure the photo gallery with one JS call.

$(document).ready(function(){
  $('.demo').WMGridfolio();
});

4. The default options.

$fn.WMGridfolio({
selectors : {
  item            : 'wmg-item',
  thumbnail       : 'wmg-thumbnail',
  details         : 'wmg-details',
  close           : 'wmg-close',
  arrow           : 'wmg-arrow'
},
thumbnail : {
  columns : 6,
  minSize : 100,
  margin   : 5
},
details : {
  minHeight : 400,
  speed  : 350,
  full_w : false
},
config : {
  open          : 'open',
  openToTop     : true,
  hasImg        : true,
  keepOpen      : false,
  onlyThumb     : false
},
callbacks : {
  CB_LoadGrid     : false,
  CB_ResizeGrid   : false,
  CB_OpenDetail   : false,
  CB_CloseDetail  : false,
  CB_CloseAll     : false
}
});

jQuery For Responsive Portfolio Gallery, wm-gridfolio Plugin/Github

See Demo And Download

Official Website(welisonmenezes): Click Here

This superior jQuery/javascript plugin is developed by welisonmenezes. For extra advanced usage, please go to the official website.