I have different tabs on my webpage I want to be able to close the expander when I go to the another tab
how would I call the close function?

Can you add the ability to target a specific element within the gridder list as the trigger to open the gridder content/show area?

Allow each expanded container to have a specific id or class once opened..

Why not allow the expanded content to open at the same place each. (usefull when not many items)
Option could be :
start : Always opens on top of the list
after : Open as usual, just underneath the selected item.
end : Always opens on bottom of the list

When you close the expanded area, make it scroll back to original position.

Helo.

I need to use the event "onContent". I´m trying to identify de element: "data-griddercontent". But I can´t.

Te event has no argments, has it ?
Similar
function onContent (object) {
var id = object.id;
}

I appreciate any help that you can provide.

I haven't been able to make Owl Carousel work in the expanded area. Please check the first thumbnail: http://themes.iki-bir.com/gridder/demo/demo.html Could you help me figure out what is missing? (Owl Carousel works outside of gridder but not inside.)

How to get the current scope on gridder click

Hello,

I can't find the API reference to customize the plugin.

Where is it?

Thanks.

Hi

Using the callback function I have managed to integrate an accordion inside the gridder panel. Works very well. What I now want to be able do is use a jquery function that changes font attributes such as opentype features (kerning) etc. Inside gridder it isn't working but is if I place it outside.

Is there anything I need to be doing re. callback. Does it need to be inside a callback function within the accordion which is in itself inside the gridder callback. Apologies but I am not a programmer but am helping out a colleague and this is pushing my knowledge rather a bit. At least I am learning something.

Many thanks

Brian

Hey dude,

Thanks for this amazing plugin, I have used it within a few sites and has been a great bit of functionality to add in. I have added Gridder to a Woocommerce site but when I switch products, the page jumps up. After hours of trying, I can not seem to break it down and resolve the issue. Would you have any idea?

http://www.steve-edgeshop.com/shop/

Thanks,
Matt

I had a problem today when trying to implement the plugin with a unorderd list that had a width of 100%. For some strange reason there was always a white border on my divs and the floating element kept pushing away my divs.

One of the solutions is to give the parent element a font-size of 0px and apply a font-size on the list-items.

The images only get smaller and smaller.
I fixed this by changing the width of the images to 220px for big screens and 140px for small screens instead of a percentage. Furthermore I centerend everything.

This is the part of the css file I changed:
.gridder {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center
}
.gridder-list {
display: inline-block;
vertical-align: top;
width: 220px
}
@media screen and (max-width: 862px) {
.gridder-list {
width: 140px;
}
}
.gridder-show {
display: block;
text-align: left;
float: left;
width: 100%;
position: relative;
background: #EEE url("../images/loading-spin.svg") no-repeat center
}

Was wondering why you are using POST in the ajax call instead of GET.

Seems the post method doesn't work for me and get is working, so maybe make it a configurable thingie? :)

Allow ajax content to be loaded

I'm testing Gridder on a Wordpress theme I'm building for myself and it appears to block cmd R shortcut on Chrome. If I remove the script enqueue from my functions.php cmd R works again.

I can refresh via the menus and other keybaord shortcuts work. It's such a bizarre issue.

Any ideas?

Is it possible to show a certain block when opening the page? I have tried jQuery trigger, but this doesn't seem to do the trick.

Hello! Thank you for gridder.
There is one problem.
If I add items via ajax, expanding do not work for this items.
I think it's because gridder initialized only once and can not be changed.
/* CLICK EVENT */ _this.find(".gridder-list").on("click", function (e) { e.preventDefault(); var myself = $(this); openExpander(myself); });
This code is not called for added via ajax items.
Please help me.
Sorry for my English, I write through google translate.

Css is a mess at the moment. It works but they are no logic whatsoever.

What license is this code released under?

Hi,

Sometimes expander appears at the bottom of the list instead of current place.
This is happening with Chrome but not with Safari and Firefox.

Here's the page : http://preview.littleboxes.fr/index.php?page=films

2 ways to reproduce the bug :

• click the loadmore button on the bottom of the list, then interact with a pic in the 1st row
• reduce your window to get the mobile viewport then interact with the first pic (only after resizing, not if loading/refreshing when already at this size)

The DIV is placed at the good place in the HTML code but Chrome choose to draw it after all the LI elements.
That technique of using a DIV between 2 LI of a UL feels like an undocumented feature. Am I wrong ?

I kept getting the error message id is not defined. This stopped the plugin from working.

My organization uses IE9. Gridder does not start on page load. If you go into the developer tools and refresh it loads without issue.

Would it be possible to use the keyboard arrows to navigate through the expanded sections?

Is there a destroy method available?

Great software! After about 7 pots of coffee, I have not been able to get thumbnails (http://codepen.io/srkimir/pen/mGbrf), popover/tooltips (http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm), or zoom (http://www.jacklmoore.com/zoom/) to work at the gridder-content (carousel level). I did get them all to work at the gridder-list level. Any words of wisdom?

Thanks for great plugin!
I would like to fadein .gridder-expanded-content content after click. How can i achieve this?

Thanks!

I can set this up as html but wondering why your demo page needs to be written in php yet your setup etc. illustrates html? Is there a reason you don't have a simple html demo instead of having php? Just a suggestion.....

I'm trying to use the malsup cycle plugin dynamically inside each grid list entry. On clicking the pager items, there's a jump to the top of the page. Any ideas on how to overcome this? Is the preventDefault a conflict with the cycle plugin? Thank you for any help. Here's the test page:

http://minnowproject.com/beta/

Adding SCSS files.
Separating theme css to vital css

If we are at the start disable prev button, if we are at the end disable next button

I've copied min.js file, initialized plugin:

  <script>
  $(function() {

      // Call Gridder
      $('#gridder').gridderExpander({
          scroll: true,
          scrollOffset: 30,
          scrollTo: "panel",                  // panel or listitem
          animationSpeed: 400,
          animationEasing: "easeInOutExpo",
          showNav: true,                      // Show Navigation
          nextText: "Next",                   // Next button text
          prevText: "Previous",               // Previous button text
          closeText: "Close",                 // Close button text
          onStart: function(){
              //Gridder Inititialized
          },
          onContent: function(){
              //Gridder Content Loaded
          },
          onClosed: function(){
              //Gridder Closed
          }
      });

  });
  </script>

and this is my markup

        <ul class="grd-6-noGutter-noBottom-equalHeight-center" id="gridder">
            <li class="cl" data-griddercontent="#content1">
              <img src="{% static 'img/articles/2.jpg' %}" alt="img01"/>
            </li>
            <li class="cl" data-griddercontent="#content2">
              <img src="{% static 'img/articles/1.jpg' %}" alt="img02"/>
            </li>
            <li class="cl" data-griddercontent="#content3">
              <img src="{% static 'img/articles/art_email.png' %}" alt="img03"/>
            </li>
        </ul>
        <div id="content1" class="gridder-content">
          <div class="row">
              <div class="col-sm-6">
                  <img src="http://placehold.it/600x600" class="img-responsive" />
              </div>
              <div class="col-sm-6">
                  <h2>Item 1</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>
              </div>
          </div>
        </div>
        <div id="content2" class="gridder-content">
          <div class="row">
              <div class="col-sm-6">
                  <img src="http://placehold.it/600x600" class="img-responsive" />
              </div>
              <div class="col-sm-6">
                  <h2>Item 1</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>
              </div>
          </div>
        </div>
        <div id="content3" class="gridder-content">
          <div class="row">
              <div class="col-sm-6">
                  <img src="http://placehold.it/600x600" class="img-responsive" />
              </div>
              <div class="col-sm-6">
                  <h2>Item 1</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex augue, hendrerit sed gravida ut, mattis vel tortor. Duis hendrerit sagittis bibendum. Fusce massa risus, hendrerit et est vitae, convallis accumsan ipsum. Integer vitae erat mattis, ornare tortor nec, luctus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse finibus fermentum consectetur. Nulla vestibulum, diam ut finibus dictum, justo felis blandit mi, sed rhoncus tortor augue vitae orci. Fusce semper eu ante ut faucibus.</p>
              </div>
          </div>
        </div>

Whenever i click any item it doesn't reveal hidden divs, there's no errors as well.

I noticed hot linking as a To-Do list item, and this is a feature I'd love. I tried tinkering myself but have run into a brick wall.

I've got it so it'll auto-pop the gridder panel open by doing the following:

$(window).load(function() {
  index_position = document.URL.indexOf("#");
  if(index_position != -1) {
    anchor_name = document.URL.substring(index_position);
    $(anchor_name).trigger("click");
  }
});

Basically, I pass in the div ID of the item to be expanded as an anchor name in the URL and simulate a click of that panel after the Window has fully loaded. $(window).load occurs after all document ready jQuery functions complete. This works great, however, when I try to mix in a scroll-to, it can't navigate to the proper location on the page, as it is being "painted" in the browser dynamically.

Am I barking up the wrong tree? Did you have an ideas on how to get this working? I've tried a bunch of things and am now beating my head against the wall instead of issuing a useful P.R. :) Thanks for your work on a great plugin!

For example bootstrap carousel controls dont work in the expanded area

Hi !
First of all, thanks for this GREAT plugin. I've been trying to do this in jQuery, and couldn't seem to do it...

Secondly, I know my issue has been solved (#43) , but the solution doesn't seem to work on my end...

The expander is at the right place in the code but it breaks the grid...
I tried some "float" hack here and there but can't get it to work...
Here is the website : dev.antoinesarrazin.com
(Go down to the portfolio and click on one of the first two items)

I'm using Pure CSS as a framework, but even stripping it down to CSS Media queries I can't get it to work.

If you have a solution, that would be awesome !

Sorry to ask but iv been trying to get rid of the auto scroll effect in the js file.
But I'm not great at js (more hit and miss) i could see all the bits about scrollOffset b c j etc and was able to disable the scroll on clicking and opening but could not disable the closing scroll effect?
thanks I'm using Gridder - v1.4.2
Any advice would be greatly greatly appreciated.

I'm quite new to JS. I am in school for it right now so I'm still learning. I am trying to use the gridder for my portfolio site which is mostly HTML and CSS with just a few JS features. I'm trying to use it in my Portfolio section. It's set up in a 3 element wide grid. Each element in the list is 33.3333% wide and looks just how I want it.

I have two main issues I cannot solve. First, when I click on the either of the left two list items in each row they cause the rest in the row to bump down to the next row. I cant figure out why.

And the next problem is after the sixth list item there is a gap created as if there is a invisible 7th list item even though the 7th is in the place where the 8th should go.

If any of this rambling makes sense and you can help that would be awesome.

I know this is a jquery only plugin. I am using gridder with angular. The 'expand template' (The expanding preview) of gridder includes buttons. However, these buttons do not propogate ng-click (similar to onclick, but calls a function in the controller instead - think mvc, view calling the controller) events at all. Seems to be a weird issue. $compile service provided by angular doesn't seem to work either

This will allow to launch other plugins after expanded content is open

Adding showNav, nextText, prevText, closeText options

Hi, in all the browsers the first time you access to the page it looks like that, with no spaces.
And if you reload again its ok again.
Can you help me? please

This is a nice viewer I'd like to use, however, it doesn't work for me in IE. Is this a known issue, and is there a fix?

A good option would be to animate the closing of the open panel before opening the new one. Is this possible to add myself or does it need an update? I am not a programmer. Also could the open panel be closed by clicking on the body of the page? Apart from these points, excellent code.

Thanks

Why I cannot put Lists, Anchor Tags or similar is my expanding preview .gridder-show . content?

Hi,
I have a page, where li-elements are loaded in a gridder-ul and after that I initialize the gridder with $('.gridder').gridderExpander(....) for these elements -> is working correct.

If I now want to load more li-elements and append them to the gridder-ul it is not working anymore. If I re-initialize the gridder the new elements are working and the old ones not.

Any idea how this could be fixed?

I initialize it like following:

$('.gridder').gridderExpander({
    scroll: true,
    scrollOffset: 30,
    scrollTo: "listitem",                  // panel or listitem
    animationSpeed: 400,
    animationEasing: "easeInOutExpo",
    showNav: false,                      // Show Navigation
    nextText: "Next",                   // Next button text
    prevText: "Previous",               // Previous button text
    closeText: "Close",                 // Close button text
    onStart: function(){
        //Gridder Inititialized
    },
    onContent: function(){
        //Gridder Content Loaded
      var element = jQuery(".gridder-show");
      initializeFullFlexslider(element); // custom function to initialize a flexslider within the gridder
    },
});