31
General / Re: Modal Window
« Last post by datahell on April 11, 2024, 20:10:28 »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.
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.