jQuery Plugin For Portfolio Style Content Gallery | WM Gridfolio

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.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Nepali-Date-Picker-jQuery-Plugin

Nepali Date Picker jQuery Plugin | nepaliDatePicker

Nepali Date Picker is a customizable, easy-to-use, and input-based date picker plugin mostly based on the Nepali calendar. Users can choose a Nepali date in the navigable…