Overlay
Overlay is the colored layer that appears on the thumbnails. Usually what darkens the image on mouse over. However, it can appear with any transparency or color, it's up to you. The mouse interaction can control the behavior. It means that the overlay under the mouse may get hidden to reveal the picture. Or the opposite, only apply the overlay when the mouse is over a thumbnail. Of course they can be completely turned off or applied regardless of the mouse.
Another part of the overlay is the little icon. Out of the box it's a Retina ready magnifier glass. You can replace this with your custom transparent PNG. For example: video icon, your company's logo, transparent glass effect or anything else you have in mind.
The above example uses the following, generated shortcode (how to use):[$justified_image_grid caption=off overlay=others overlay_color=purple overlay_icon=on overlay_opacity=0.4 lightbox=links-off mobile_lightbox=links-off limit=4 max_rows=1 ng_gallery=19]
Control the overlay with these settings
- Overlay behavior on desktop and mobile devices differently.
- Opacity and color.
- Icon in the middle, built-in magnifier glass or your custom image.
- Overlay icon's opacity.
Captions (just a teaser)
Captions are highly customizable to ensure they don't differ from your existing design. Colorize the text or the background behind it. Discover all the possibilities by the different transparency options. This includes a fading gradient background. Captions too strong? Lower the opacity of the entire caption. Or just make the background slightly transparent while the text on it fully opaque. Don't like the background at all? Turn it off. Wish the background matched the width of the title? No problem! Small text, big text? Shadow? Yeah!
The above example uses the following, generated shortcode (how to use):[$justified_image_grid caption=mixed caption_opacity=1 caption_bg_color=rgba(186,0,255,0.4) caption_text_color=#ffce38 caption_text_shadow="1px 1px 0px black" overlay=off specialfx=captions mobile_specialfx=off specialfx_type=blur lightbox=links-off mobile_lightbox=links-off limit=4 max_rows=1 ng_gallery=24]
We are just getting started, I haven't mentioned any animation and positioning styles, have I?
Check out the Thumbnail captions page for more examples and information!
Borders and shadows
Very powerful styling is achieved by three borders and two shadows. When tastefully combined, of course. Polaroid look, subtle edge, frame, colored spacing, tinted shadow... just to get your imagination going. This is a 5-way customization. Each accepts color and size values.
The above example uses the following, generated shortcode (how to use):[$justified_image_grid thumbs_spacing=15 caption=off overlay=hovered overlay_opacity=0 outer_shadow="0 0 5px #a0ce4e" inner_shadow="0 0 20px white" outer_border_width=1 outer_border_color=#a0ce4e middle_border_width=15 middle_border_color=white inner_border_width=5 inner_border_color=rgba(0,0,0,0.2) inner_border=others inner_border_animate=width lightbox=links-off mobile_lightbox=links-off limit=3 max_rows=1 ng_tags_gallery=green]
Anatomy of the thumbnail's border-shadow structure from inside out
- Inner shadow
- Inner border (on the image)
- Middle border (usually a white frame)
- Outer border (e.g. a thin black border)
- Outer shadow
- Animate the inner border (width or opacity)
CSS settings are available for:
- General purpose Custom CSS
- Load more button
- Filter button and tag (for tag cloud)
- Caption title / description
- CSS Gradient for caption background
- Facebook / Flickr / NextGEN breadcrumb
Other advanced styling capabilities
- Background behind the thumbnails, visible while they are loading (e.g. gray rectangles or preloader).
- Each image has an automatic unique class based on its ID. Media Library images gain a custom class field. This allows targeting individual thumbnails to be styled with CSS.
- Each grid has a unique class that is derived from shortcode attributes, to target specific galleries with Custom CSS.
- The preset's ID is added to the class of the gallery to allow targeting specific presets with Custom CSS.
How do the settings look like?
