Elxis CMS Forum

Support => General => Topic started by: nikos on January 19, 2014, 00:19:20

Title: Popup window features with lightbox
Post by: nikos on January 19, 2014, 00:19:20
In Elxis 4.x as known you can create a menu item link in a popup window where in parameters you can select Popup window -> Lightbox window and in Elxis interface -> Only component and shows the article in a popup window in lightbox style (effect).

In this case the url is: http://www.mysite.com/inner.php/article.html

Trying to display the same url in the same effect popup from a link into an article's word, is not possible and it can be shown only as a typical popup window.

So i would like to suggest, if it is possible to a next update, to include into popup window features and the option of lightbox apart the typical one.
Title: Re: Popup window features with lightbox
Post by: webgift on January 19, 2014, 11:06:13
Lightbox requires a javascript and css file be included at the head tag of the html document. Instead of that it requires the jQuery library. So it would be a very bad idea to include such a feature to a next update (each time we are on an article page). The best way is to create a content plugin for that purpose.
Title: Re: Popup window features with lightbox
Post by: nikos on January 19, 2014, 16:27:28
Webgift this very bad looks to me as very absolute from your part and i was expecting a more gentle answer in case that you have a different opinion. The solution of plugin i know.
Title: Re: Popup window features with lightbox
Post by: webgift on January 19, 2014, 16:36:15
e? Which type of answer do you consider as 'gentle'? I am really sorry that i answered you. It won't happen again anyway.
Title: Re: Popup window features with lightbox
Post by: datahell on January 19, 2014, 19:26:56
Calm down!

Nikos Elxis 4.x does support lightbox windows from menu for any type of menu. It is easy to add one. You don't have to load jQuery or lightbox, Elxis does everything automatically.

Instructions
1. Select your preferred menu collection from the top menu (eg Menu > Mainmenu)
2. Click New and select your preferred type (eg. Link)
3. On the next page type a title and provide your Elxis link (eg. content:something.html)
4. On Other options select these:
Elxis interface : Only component
Popup window: Lightbox
Width: 600 (or anything else you want)
Height: 450 (or anything else you want)

Save it and you are ready.
Title: Re: Popup window features with lightbox
Post by: datahell on January 19, 2014, 19:33:55
Ooops, I just noticed that you want to load the lightbox from the article. So my above answer is wrong, sorry.

You can bind any html element to a lightbox with many methods, you can for example use data-url attribute or a special css class. Off course you will need to have lightbox loaded before as Stavros previously said.

Final answer to your question.
1. Make sure lightbox is loaded. You can put this in your template, or in your extension (if any)
$eDoc = eFactory::getDocument();
$eDoc->loadLightbox();

2.Now bind all A elements with class "something" (you can change it to anything you want) to lightbox:
$eDoc->addDocReady('$(".something").colorbox({iframe:true, width:600, height:450});');

We are ready!
Now any link you add having a CSS class "something" will open as iframe in a lightbox window.

Note: You don't have to load jQuery. When you load lightbox, Elxis also loads jQuery.

Example for WYSIWYG editor (using eLink plugin for portable links)
<a href="#elink:content:article.html" class="something">Open article in lightbox window</a>

Example for WYSIWYG editor (for inner.php links - not portable)
Note that eLink does not support inner.php links, so if you want to open the link only in component view you should use the full article's url:
<a href="http://www.example.com/inner.php/article.html" class="something">Open article in lightbox window</a>

Example for extensions (standard portable links)
$elxis = eFactory::getElxis();
$link = $elxis->makeURL('content:article.html');
echo '<a href="'.$link.'" class="something">Open article in lightbox window</a>';

Example for extensions (component view - inner.php- portable links)
$elxis = eFactory::getElxis();
$link = $elxis->makeURL('content:article.html', 'inner.php');
echo '<a href="'.$link.'" class="something">Open article in lightbox window</a>';
Title: Re: Popup window features with lightbox
Post by: nikos on January 19, 2014, 20:25:48
Thank you very much datahell for the fully documented answer to my topic.

Much appreciated!!!
Title: Re: Popup window features with lightbox
Post by: michalis1984 on January 20, 2014, 02:28:40
Ooops, I just noticed that you want to load the lightbox from the article. So my above answer is wrong, sorry.

You can bind any html element to a lightbox with many methods, you can for example use data-url attribute or a special css class. Off course you will need to have lightbox loaded before as Stavros previously said.

Final answer to your question.
1. Make sure lightbox is loaded. You can put this in your template, or in your extension (if any)
$eDoc = eFactory::getDocument();
$eDoc->loadLightbox();

2.Now bind all A elements with class "something" (you can change it to anything you want) to lightbox:
$eDoc->addDocReady('$(".something").colorbox({iframe:true, width:600, height:450});');

We are ready!
Now any link you add having a CSS class "something" will open as iframe in a lightbox window.

Note: You don't have to load jQuery. When you load lightbox, Elxis also loads jQuery.

Example (using eLink plugin for portable links)
<a href="#elink:content:article.html" class="something">Open article in lightbox window</a>

Example (for inner.php links - not portable)
Note that eLink does not support inner.php links, so if you want to open the link only in component view you should use the full article's url:
<a href="http://www.example.com/inner.php/article.html" class="something">Open article in lightbox window</a>


Answers like this worth more than gold and must be bookmarked  ;D
Title: Re: Popup window features with lightbox
Post by: datahell on January 20, 2014, 12:28:35
Thanks, I updated my reply for links generated by third party extensions too.
Elxis libraries are easy to use. If you want to do something and you dont know how, or which is the best method to do it, just ask. We are here to help.

Note: Links portability is important in cases you want to move an Elxis installation (eg. from your local computer to an online site, or the opposite). Hard coded links are not portable. You will have to edit the SQL file to fix them before importing it in database. This is why you should use elink plugin in your articles for internal linking (if possible). Same is for images (use the Image (https://www.elxis.net/edc/multimedia/44.html) plugin).