Need a lightbox that will hold video & content WordPress

Kyle answers:

Just use popup maker, it is a modal plugin that has well made scripts

---

---

---

---

---

Rempty answers:

you have 2 options
use a plugin like popup maker.
or use a jquery lightbox and code the html.

In the example you sent they are using Lity
https://sorgalla.com/lity/

You will need to queue the script, if is your theme or child theme like:


function add_theme_scripts() {
wp_enqueue_script( 'lity', get_template_directory_uri() . '/js/lity.js', array ( 'jquery' ), 1.1, true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

the lity.js must be in your theme folder/js/lity.js

then generate the HTML of your lightbox like

<div id="inline" style="background:#fff" class="lity-hide">
<h2>Title</h2>
Hello 123
Here VIdeo<br/>
Here desc<br/>
</div>


Also to load the ligthbox you need a link like
<a href="#inline" data-lity>Inline</a>

the parameter data-lity make the lightbox to be loaded, and the #inline is the ID of the lightbox you want to load.

Hugo Gonçalves answers:

Hi Kyler!

The one being used in the example you showed is Lity.
I've used this one a few times.
https://github.com/jsor/lity

You don't need much fiddling with code, just to call the scripts and build the HTML.

Is this one going to be placed in a custom theme, or a bought one that is being customized?
If it is a custom theme being built by you, place the script calls in the functions.php file.
If it's one you bought and are customizing then you need to use this in the functions.php file in the child theme.

1. So you grab the code, and place the js and css files in the folders you have for such files. In my example i'm using a includes folder that contains a js and a css folder.
This lightbox uses jQuery, but Wordpress takes care of that for you.


2. To call the scripts you place this in your functions.php file. (search before, to see if don't have already a wp_enqueue_scripts action in there, if so, use just the wp_enqueue__... lines below inside of that function)
function call_those_scripts() {
wp_enqueue_style( 'lity-css', THEME_DIR_URI . '/includes/css/lity.min.css' );
wp_enqueue_script( 'lity-js', THEME_DIR_URI . '/includes/js/lity.min.js', array( 'jquery' ), NULL, true );
}
add_action('wp_enqueue_scripts', 'call_those_scripts');


3. in the wp template(s) you want the lightbox to show, add the HTML, using the declarative method.

For the specifics of what you're after, the best bet is an inline lightbox, where you can use the structure you want inside.
With the declarative method you only have to worry about having a data-lity attribute in the link, and the id of the target element you want to show inside the lightbox. This target needs also to have a lity-hide class in it, so it doesn't show itself.


<a href="#inline" data-lity>Click Here</a>

<div id="inline" style="background:#fff" class="lity-hide">
<div class="modal-entry-header">
<h2>Video Overview</h2>
<h3>A quick look at using Colors</h3>
</div>
<div class="videoWrapper"><iframe src="https://player.vimeo.com/video/185351618?title=0&amp;byline=0&amp;portrait=0" width="800" height="450" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe><script src="https://player.vimeo.com/api/player.js"></script></div>

<div class="modal-description">
<p>Take control of your site colors using over <strong>60 color options</strong>. Change your text, links and background colors (including transparency control) to match your brand.</p>
</div>
</div>


Hope i wasn't too confusing, if you have any doubts about what i just wrote, ask away.
Cheers
Hugo

---

---

---

---

---

---