Create text links or image links that display media or content in a “pop up” layer (superimposed over the page content) using the [wp_colorbox_media] shortcode.
The content of the popup can be:
Popup an image
Text link
Marcus
Sample Syntax:
[wp_colorbox_media url="https://admission.kzoo.edu/wp-content/uploads/sites/132/2021/08/c-Mumma-0035-alt-1-e1628197414377.jpg" type="image" title="Marcus Johnson" hyperlink="Enlarge Marcus"]
Parameters:
url: the URL of the image file. To find this URL, click on the image in your media library and look for the “Copy URL to clipboard” button.
type: image
title: optional — this will add a caption under the image
hyperlink: the text for the link
Thumbnail link
Sample Syntax:
[wp_colorbox_media url="https://admission.kzoo.edu/wp-content/uploads/sites/132/2021/08/c-Mumma-0035-alt-1-e1628197414377.jpg" type="image" title="Marcus Johnson" type="image" hyperlink="https://admission.kzoo.edu/wp-content/uploads/sites/132/2021/08/c-Mumma-0035-alt-1-e1628197414377-150x150.jpg" alt="Enlarge Marcus"]
Parameters:
url: the URL of the image file. To find this URL, click on the image in your media library and look for the “Copy URL to clipboard” button.
type: image
title: optional — this will add a caption under the image
hyperlink: url of the thumbnail image. Hint: often the same as the full sized image, but ending with -150×150.jpg
Popup a page
Text link
Learn about Marcus
Sample Syntax:
[wp_colorbox_media url="https://wordpresshelp.kzoo.edu/howto/pop-ups/popup-demo/" type="iframe" hyperlink="Learn about Marcus"]
Parameters:
url: the URL of the page to display in the popup. It works best if the page does not have headers, navigation, footers, etc. To create a page like that on your site, choose the “No Chrome” template under Page Attributes on the Page tab.
type: iframe
hyperlink: the text for the link
Thumbnail link
Sample Syntax:
[wp_colorbox_media url="https://wordpresshelp.kzoo.edu/howto/pop-ups/popup-demo/" type="iframe" hyperlink="https://admission.kzoo.edu/wp-content/uploads/sites/132/2021/08/c-Mumma-0035-alt-1-e1628197414377-150x150.jpg" alt="Enlarge Marcus"]
Parameters:
url: the URL of the page to display in the popup. It works best if the page does not have headers, navigation, footers, etc. To create a page like that on your site, choose the “No Chrome” template under Page Attributes on the Page tab.
type: iframe
hyperlink: url of the thumbnail image.
Popup Inline HTML
This option is slightly more complicated but loads faster than popping up a page.
Text link
click here to open inline HTML
Sample Syntax:
[wp_colorbox_media url="#inline_content" type="inline" hyperlink="click here to open inline HTML"]
Parameters:
url: the id of the div you create to contain the popup content (see below)
type: inline
hyperlink: the text for the link
Thumbnail link
Sample Syntax:
[wp_colorbox_media url="#inline_content" type="inline" hyperlink="https://admission.kzoo.edu/wp-content/uploads/sites/132/2021/08/c-Mumma-0035-alt-1-e1628197414377-150x150.jpg" alt="learn about Marcus"]
Parameters:
url: the id of the div you create to contain the popup content (see below)
type: inline
hyperlink: the url of the thumbnail
Create the inline content as an HTML block containing two nested divs. The outer div should have style=”display:none” to hide it until the link is clicked. The inner div should have an id that matches the url parameter of the shortcode. It doesnt have to be #inline_content, it can be anything as long as they match.
<div style="display:none">
<div id="inline_content" style="background-color:#eee; padding:3em">
<h1>Marcus Johnson</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae lectus eget nisi feugiat feugiat eu non ipsum. Morbi suscipit, purus eu finibus fringilla, purus nunc facilisis sapien, sit amet pharetra lorem arcu in ipsum. Mauris tempus finibus dui, egestas pharetra nulla eleifend rutrum. Phasellus malesuada nisl eget iaculis placerat.</p>
</div>
</div>