GridTab is a lightweight jQuery plugin to create grid based responsive tabs.
In this tutorial, we shall display a grid of featured images of posts which when clicked will slide reveal details panel showing a larger image, title and read more button linking to their respective single post. When the panel is open, users can navigate to previous and next posts using the left and right controls or close it with the x icon. Additionally, we'll enable automatic scrolling to the current tab.
Screenshots:
When clicked,
Screencast:
Summary of steps:
- Register a custom GridTab widget area
- Enqueue GridTab's CSS and JS (incl. the initialization file)
- Create a custom template for Flexible Posts Widget to output posts (can be Pages or CPT entries) in HTML markup needed by GridTab
- Display a Flexible Posts Widget's widget to which the above template is applied in the widget area below the header
on front page in Genesis.
While the tutorial has been written for Genesis Sample child theme, it should work with minor adjustments in any Genesis child theme.
Step 1
a) Upload gridtab.min.css to child theme's css directory (create, if not existing).
b) Upload gridtab.min.js to child theme's js directory.
Create a file named say, gridtab-init.js in the same location having the following:
Fantastic Sridhar, can’t wait to implement this!
I’ve been really wanting to do this.
Heh Sridhar, I’ve implemented it for my client’s Team screen. So far I have all the images in place but it is not calling the post action, no link, only a rollover state. Any ideas?
http://www.lamfers.com/2016-test/why-la/team/
gridtab-init.jsis not present in child theme’sjsdirectory.http://www.lamfers.com/2016-test/wp-content/themes/executive-pro/js/gridtab-init.js shows error 404.
Thanks for writing back Sridhar.
In your tutorial you said in Step 1 to call that file ‘grid-init.js’.
Create a file named say, grid-init.js in the same location having the following:
Once I changed the file name to ‘gridtab-init.js’ it works fine.
Thank you so much. Perhaps you can edit the instruction above…
-Elisa.
oops! Fixed it. Thanks.
Hi Sridhar,
I have this working on a private site works as expected and very cool.
My question is how can I get the following to display on all the grid thumbnails?
Post Info [post_date]
Entry Title
Post Meta [post_tags]
I tried editing the gridtab.php but just cannot get it right.
Thank you!
Now that it came up in my feed I’m thinking I’d really like to use this on a home screen design. Thank you so much!