Thumb Grid is a versatile stack that will display a simple grid of images. The images should all have the same proportions, but if you have a portfolio of landscape images or websites, or a bunch of icons, this will usually be the case.
Thumb Grid can display either local, or warehoused images (the default setting is warehoused) at just about any size you please and has a plethora of settings to make sure that your images are presented just as you want them.
If we take a look at the Thumb Grid settings panel, the first settings are for the Image Width and the Image Height. Below these values, you'll find the Item Margin and the Item Padding, the Border Width and the Border Colours for the Static and Hovered states.
Item Radius will add rounded corners to your Thumb Grid grid items and Thumbnail Radius will round off the corners of the thumbnail content.
The Shadow may also be set for both Static and Hovered states, the settings are given as CSS values, e.g. box-shadow: 0 5px 5px 0 rgba(0,0,0,.25); – this might look unusual for the novice, but it's easy enough to set up. The 'box shadow:' is the name of the container and should remain unaltered. The first value (the default is '0') is the offset and if you wish to alter it, you can add a + or - value in px, where + offsets the shadow to the right and - to the left. The second and third values are the shadow spread and the fourth value is the shadow size. This should ideally be left at 0. The next four values are for CSS RGBa colour values. A dark teal with 60% opacity, for instance, would like like this: rgba(37,94,92,.60);
Thumb Grid's next two settings target the image opacity for the hovered and static states. 1.00 is the maximum. In the screenshot below, the static images are set to 0.50, whilst the hovered value remains at 1.00.
As you can see in the second screenshot, you can also add tooltips to the images. When you drop an image into the image well, you have an option to add a link to the image. If you add a Title to the URL panel too, the title will appear when the next setting, Tooltips, is activated. The Tooltips can be displayed with, or without the Tooltip Arrow. Max Width sets the maximum width of the tip. The next three settings are identical to the RWE Super Tooltip stack – Tooltip Animation; Tooltip Side and Tooltip Theme.
Thumb Grid will, as already stated, allow you to link its contents to external pages, or popups such as Pop Drop or Expose. It is therefore ideal for building your very own lightbox.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Subscribe to Ninja News
or ask a question
Yes, I would like to receive your monthly newsletter.
No thanks, I’m good for now. I have a different issue.
[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.
[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.
Thanks again for contacting us. Your request was successfully submitted.
Looking for Inspiration?
Looking for Inspiration for a new site, or need a CTA
The Latest & Greatest
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—17
Powered by rjh-design
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.