Force jQuery elastic-grid plugin to display 3 items per row & center filter selectors

Question

Either the documentation for this plugin is non-existent, or I'm blind, but I'm looking for a way to:

Force the elastic-grid jQuery plugin to display 3 items per row
Force the filter selectors (elastic-grid navbar above the grid) to align to the center of the page

Here is my function (all values replaced with placeholders for simplicity):

<script type="text/javascript">
$(function(){
  $("#elastic_grid").elastic_grid({
    'showAllText' : 'All',
    'filterEffect' : 'popup',
    'hoverDirection' : true,
    'hoverDelay' : 0,
    'hoverInverse' : false,
    'expandingSpeed' : 500,
    'expandingHeight' : 364,
    'items' : [
      {
        'title' : 'Item',
        'description' : 'Desc',
        'thumbnail' : ['/path/to/image.jpg'],
        'large' : ['/path/to/image.jpg'],
        'button_list': [
          { 
            'title' : 'Visit Website',
            'url' : '<url>',
            'new_window' : true
          },
        ],
        'tags' : ['tag1']
      },
      {
        'title' : 'Item',
        'description' : 'Desc',
        'thumbnail' : ['/path/to/image.jpg'],
        'large' : ['/path/to/image.jpg'],
        'button_list' : [
          { 
            'title' : 'Visit Website', 
            'url' : '<url>',
            'new_window' : true 
          },
        ],
        'tags' : ['tag2']
      },
      {
        'title' : 'Item',
        'description' : 'Desc',
        'thumbnail' : ['/path/to/image.jpg'],
        'large' : ['/path/to/image.jpg'],
        'button_list' : [
          { 
            'title' : 'Visit Website', 
            'url' : '<url>',
            'new_window' : true
          },
        ],
        'tags' : ['tag3']
      },
      {
        'title' : 'Item',
        'description' : 'Desc',
        'thumbnail' : ['/path/to/image.jpg'],
        'large' : ['/path/to/image.jpg'],
        'button_list' : [
          { 
            'title' : 'Visit Website', 
            'url' : '<url>',
            'new_window' : true
          },
        ],
        'tags' : ['tag4']
      },
      {
        'title' : 'Item',
        'description' : 'Desc',
        'thumbnail' : ['/path/to/image.jpg'],
        'large' : ['/path/to/image.jpg'],
        'button_list' : [
          { 
            'title' : 'Visit Website', 
            'url' : '<url>',
            'new_window' : true
          },
        ],
        'tags' : ['tag5']
      },
      {
        'title' : 'Item',
        'description' : 'Desc',
        'thumbnail' : ['/path/to/image.jpg'],
        'large' : ['/path/to/image.jpg'],
        'button_list' : [
          { 
            'title' : 'Visit Website', 
            'url' : '<url>',
            'new_window':true
          },
        ],
        'tags' : ['tag6']
      },
    ]
  });
});
</script>

If it's possible, where can I define:

The number of items per row
The alignment of the filter selectors (i.e. 'All' | 'Tag1' | 'Tag2' | etc)

score 1 · Accepted Answer · answered Sep 23 '17 at 04:21

Keep in mind this is private project from someone that's not really maintained last thing committed was 3y ago with very poor documentation that was actually updated 8 months ago. There's nothing in documentation about setting up number of images in row, they are responsive however, and from what I can see they are 250x250px, you could use that for your advantage and wrap them in container that will be >750px and there should be only 3 of them (i.e. 800px to give some padding), if you need 2 of them, give it value more then 500px but less then 750px.

As for navbar this CSS will reset floats on top navigation and set nav to center:

body nav#porfolio-nav {
  text-align: center;
}

body .wagwep-container ul#portfolio-filter li {
  float: none;
}

body nav#porfolio-nav li{
  float: none;
}

Force jQuery elastic-grid plugin to display 3 items per row & center filter selectors

1 Answers1