Introduction
The gallery shortcode is feature rich with many different options for lightboxes, layouts, and hover effects. It can show photos from several different photo sources including:
- WordPress
- Flickr – show photos from a user, set, or group
- Facebook – show photos from a user, album, page, page album, or group
- Instagram – show photos from a user or tag
- 500px – show photos from a user
- SmugMug – show photos from a user or album
- deviantART – show photos from a user
- Zenfolio – show photos from a set
The gallery images can be set to animate as they become visible. You will see several different animation in the examples below. The animations are optional.
Columns
Show images in 1-10 columns or let the images automatically layout into as many columns as will fit.
Automatic
The image size for this example is a 150px square image.
5 Columns
These images also have a 1% margin separating them with some white space.
2 Columns
Predefined Layouts
Square
Small Square
Circle
Masonry
Galleria
Galleria is a gallery slideshow with a built-in lightbox. Included are thumbnails along the bottom for easy navigation. It also can go full-screen to show off your photos.
Lightboxes
Click on the images to see an example of each lightbox type. Each one provides unique characteristics. Several are more geared toward mobile devices though most work perfectly on mobile and desktop.
Colorbox
Magnific Popup
PhotoSwipe
PrettyPhoto
Swipebox
Thickbox
TouchTouch
Hover Effects
There are three different options for what to do when the mouse is hovered over the image: tooltip, adipoli, effeckt.
Tooltip
The tooltip is the default option. It can be turned off. Move the mouse over any of the images below and wait for the tooltip to show.
Effeckt
Effeckt contains 15 different hover effects. When hovered over, the title and caption for the image will be shown. You can control the color and opacity of the effect.
Adipoli
Adipoli has several different start and hover effects. The start effects change the way the image looks before the image is hovered and include:
The hover effects change what happens when the mouse is over the image and include:
Subtle
Subtle contains 15 different hover effects. When hovered over, the title and caption for the image will be shown. You can control the color and opacity of the effect.
Supersized
The supersized gallery shows a slideshow gallery of photos that fill the entire browser window. There are options to show navigation controls at the bottom left, top left, or not at all. Supersized galleries can also be used as backgrounds for pages.
Supersized Gallery Demo Page
Explore More Shortcodes
- Alert
- Animated Popular
- Animated Image
- Animated Scroll New
- Audio
- Badge
- Blockquote
- Blog
- Blur New
- Books
- Button
- Chart
- Clients
- Code
- Collapsibles
- Content Box
- Content Section Popular
- Counter
- Coupons
- Custom Post Type
- Definitions
- Device Mockups
- Divider Popular
- Dropcap
- Emphasis
- Events
- FAQ
- Filler
- Flip Box Popular
- Fullscreen Video
- Gallery Popular
- Google Docs Viewer
- Guests
- Heading
- Highlight
- Hover Box
- Horizontal Ruler
- Icon Popular
- Icon List
- If New
- Image
- Image Compare
- Jobs
- Label
- Lead
- Lightbox
- Locations
- Map
- Masonry
- Members
- Menu
- Post Meta Data
- Movies
- Music
- News
- Overlay Popular
- Panel New
- Parallax Scene Popular
- Permalink
- Person
- Popover
- Portfolio
- Post Fields
- Post Media
- Pricing Table
- Progress
- Project
- Promotional Box
- QR Code
- Quotes
- Recent Books
- Recent Clients
- Recent Coupons
- Recent Events
- Recent Jobs
- Recent Locations
- Recent Movies
- Recent Music
- Recent News
- Recent Portfolios
- Recent Posts
- Recent Projects
- Recent Quotes
- Recent Recipes
[intense_content_section]
<h2>Introduction</h2>
The gallery shortcode is feature rich with many different options for lightboxes, layouts, and hover effects. It can show photos from several different photo sources including:
<ul>
<li><strong>WordPress</strong></li>
<li><strong>Flickr</strong> - show photos from a user, set, or group</li>
<li><strong>Facebook</strong> - show photos from a user, album, page, page album, or group</li>
<li><strong>Instagram</strong> - show photos from a user or tag</li>
<li><strong>500px</strong> - show photos from a user</li>
<li><strong>SmugMug</strong> - show photos from a user or album</li>
<li><strong>deviantART</strong> - show photos from a user</li>
<li><strong>Zenfolio</strong> - show photos from a set</li>
</ul>
The gallery images can be set to animate as they become visible. You will see several different animation in the examples below. The animations are optional.
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Columns</h2>
Show images in 1-10 columns or let the images automatically layout into as many columns as will fit.
<h3>Automatic</h3>
The image size for this example is a 150px square image.
[intense_gallery show_animation="flipInDownForward" size="square150" include="771,770,769,768,767,766,762,761,760,759,758,757,756,755"]
<h3>5 Columns</h3>
These images also have a 1% margin separating them with some white space.
[intense_gallery show_animation="flipInY" size="square75" columns="5" marginpercent="1%" include="771,770,769,768,767,766,762,761,760,759"]
<h3>2 Columns</h3>
[intense_gallery show_animation="flipInX" size="postWide" columns="2" include="771,770,769,768"]
[/intense_content_section]
[intense_content_section]
<h2>Predefined Layouts</h2>
<h3>Square</h3>
[intense_gallery layout="square" marginpercent=".5%" include="771,770,769,768,767,766,762,761,760,759,758,757,756,755, 2184, 2185"]
<h3>Small Square</h3>
[intense_gallery layout="smallsquare" include="771,770,769,768,767,766,762,761,760,759,758,757,756,755, 2184, 2185"]
<h3>Circle</h3>
[intense_gallery layout="circle" show_animation="rotateIn" include="771,770,769,768,767,766,762,761,760,759,758,757,756,755, 2184, 2185"]
<h3>Masonry</h3>
[intense_gallery layout="masonry" size="small320" alternate_size="medium640" masonry_alternate_count="4" id="2244" include="771,770,769,768,767,766,762,761,760,759,758,757,756,755, 2184, 2185"]
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Galleria</h2>
Galleria is a gallery slideshow with a built-in lightbox. Included are thumbnails along the bottom for easy navigation. It also can go full-screen to show off your photos.
[intense_gallery type="galleria" show_animation="fadeInDown" size="postFull" include="771,770,769,768,767"]
[/intense_content_section]
[intense_content_section]
[intense_snippet snippet_id="2475" snippet_title="Lightbox List"]
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Hover Effects</h2>
There are three different options for what to do when the mouse is hovered over the image: tooltip, adipoli, effeckt.
<h3>Tooltip</h3>
The tooltip is the default option. It can be turned off. Move the mouse over any of the images below and wait for the tooltip to show.
[intense_gallery show_animation="fadeIn" size="square150" include="759,760"]
[intense_snippet snippet_id="2526" snippet_title="Common Hover Effects"]
[/intense_content_section]
[intense_content_section border_bottom="1px solid #ededed"]
<h2>Supersized</h2>
The supersized gallery shows a slideshow gallery of photos that fill the entire browser window. There are options to show navigation controls at the bottom left, top left, or not at all. Supersized galleries can also be used as backgrounds for pages.
[intense_permalink id="2332"]Supersized Gallery Demo Page[/intense_permalink]
<center>
[intense_image image="3102" size="large" title="Supersized Gallery"]
</center>
[/intense_content_section]
[intense_snippet snippet_id="Child Theme | Shortcodes/footer" snippet_title="Shortcode Page Footer"]