Forking elastic grid plugin to be able to close preview by clicking anywhere on the screen

Question

I'm using the elastic grid plugin for a grid display system on a site, but I want to be able to simply click off the expanded view and it automatically close without having to click on the thumbnail or 'x' button as the plugin suggests.

I've had a bit of a look through the code and think this is where I need to edit

function initEvents() {
    //when clicking an item, show the preview with the items info and larg image;
    //close the item if already expanded.
    //also close if clicking on the item's cross
    $items.on( 'click', function(e) {
        hidePreview();
        return false;
    } ).children( 'a' ).on( 'click', function(e) {
        
        var $item = $( this ).parent();
        //check if item already opened
        current === $item.index() ? hidePreview() : showPreview( $item );
        return false;
    });

However, I'm not sure exactly how to do this. I was trying to implement this method mentioned here but am having no luck. Any guidance in this would be appreciated.

The plugin for reference: http://demo.phapsu.com/jquery.elastic_grid/

Answer 1

if you haven't found an answer yet, add this your js page, it will close the expanded view if you click any where in the page except the expanded view it self.

$('body').click(function(evt){    
       if(evt.target.class== "og-expander")
          return;
       // For descendants of menu_content being clicked, remove this
       // check if you do not want to put constraint on descendants.
       if($(evt.target).closest('.og-expander').length)
          return;             
        $(".og-close").trigger("click");  
});