Modal Window

[seadhna]

Hi, I just want to check. If I add this class to a hyperlink, it opens in a modal window: elx_litebox
Is this the correct way to open a modal window? <a class="elx_litebox" href=.....

[datahell]

A modal window is something else in Elxis.

Modal window (not what you want)
You create the HTML with the help of Elxis HTML helper and then you open the modal window on click with elx5ModalOpen(sfx);
Elxis modal windows can be from very simple to very-very-very complex. Actually you can do great things with modal windows.
Tell me if you need more instructions on that.


Light box / Media box (this is what you need)
In Elxis 5 we use mediabox instead of lightbox (elxis 4). To use media box you must first make sure the javascript library is loaded in page head:
eFactory::getDocument()->loadMediabox();

You can put the above PHP code in your template's index.php file to make sure mediabox is always available.

Although there are several way to make links be opened in media box window the default one, and the easiest, is by adding the data-mediabox attribute into a link. Links having the same value for the data-mediabox attribute are been displayed automatically as a gallery/group. Sample HTML:

<a href="https://example.com/pics/football.jpg" data-mediabox="sports" title="Football">Football</a>

You can also provide the optional  attribute data-title which will display a description bellow the image in modal window. Example:
<a href="https://example.com/pics/football.jpg" data-mediabox="sports" title="Football" data-title="Football">Football</a>

Making an image gallery (notice the same data-mediabox in all links) :
<a href="https://example.com/pics/football.jpg" data-mediabox="sports" title="Football" data-title="Football">Football</a>
<a href="https://example.com/pics/basketball.jpg" data-mediabox="sports" title="Basketball" data-title="Basketball">Basketball</a>
<a href="https://example.com/pics/tennis.jpg" data-mediabox="sports" title="Tennis" data-title="Tennis">Tennis</a>
<a href="https://example.com/pics/golf.jpg" data-mediabox="sports" title="Golf" data-title="Golf">Golf</a>


You can also open web pages in iframe like that:
<a href="https://example.com/pages/test.html" data-mediabox="anything" data-iframe="true" data-width="800" data-height="500" title="'Anything">A web page</a>

If you want to open an Elxis page in a frame use the inner.php file in order to have just the web page without modules etc. Example:
<a href="https://example.com/inner.php/category/article.html" data-mediabox="anything" data-iframe="true" data-width="800" data-height="500" title="'Anything">A web page</a>


You can also open portions of HTML, like a DIV element.

[seadhna]

Hi datahell,
thanks very much for this detailed reply. This is great to know.
I can get the iframe method working, but not the MediaBox. I have tried in three different Elxis websites but in each one, I just see a spinning blue circle (preload icon) when the mediabox opens.
I have added media box to the template index.php
Any guess what I'm doing wrong?
I tried removing JS and CSS compression, and clearing cache and allowing X-frame but these ideas didn't work.

[datahell]

If the modal does not appear and it is always loading it is because the link to the image is wrong. And I am talking about this one in bold:

<a href="https://example.com/pics/football.jpg" data-mediabox="sports" title="Football" data-title="Football">Football</a>

Make sure the link is correct and the image exists. In Elxis images usually located inside media/images/ folder. So, it should be something like this:

<a href="https://example.com/media/images/myfolder/football.jpg" data-mediabox="sports" title="Football" data-title="Football">Football</a>

Final note: Make sure you name your images the proper way, no spaces, no strange symbols, no local characters. Use a-z A-Z 0-9 _ and - for the naming, nothing else. Else you might need to url encode the name (don't mess with that).

[seadhna]

Ok, I think I've figured it out: mediabox can only open images, correct?
I was trying to use it to open an "inner.php" page.
I am able to do that with litebox, but it seems, not with mediabox.
I can do it with iframe.

[datahell]

Media box can open anything: images, vimeo videos, youtube videos, i-frames, HTML portions, etc. Here is an online demo

WA MediaBox is a JavaScript library that displays html content (images, iframes, videos) in a responsive, fullscreen, navigatable, lightbox-style gallery popup.