Author Topic: gallery plugin inside tab plugin (Read 7686 times)

kyomar · « **on:** June 08, 2013, 03:30:36 »

Hi, I am always running into some problems with the tab plugin. I already know about the problem with plugins only working in the first tab (e.g. google map). The tab plugin is very useful and important but somehow we have to solve this problems as otherwise the plugin becomes useless if one only can have plain text in it.

Well, in this case I have got the gallery plugin in several tabs. The galleries show just fine but if clicking on a picture in the first tab it sometimes (not always) opens in the top left corner of the screen. If I click on a picture in the 2nd or 3rd tab it opens in full screen with a black background.

I have uploaded the site to my remote host so you can check: http://www.koyuki-hakuba.com/guest-rooms.html. Please note that this is very much a work in progress.

I would be very grateful if one could solve this problem.
Thank you!

datahell · « **Reply #1 on:** June 10, 2013, 20:53:34 »

It is a matter of the specific plugin (tab) and it's developer is the one may can help you.
I can only tell you to try changing the plugin's order. Put tab plugin before the gallery plugin (try the opposite too).

Elxis tabs
Elxis has built-in tabs support. They are integrated into Elxis form but can be used outside forms too.

Sample tabs HTML:
<ul class="tabs">
<li><a href="#tab_sample_1">Tab 1</a></li>
<li><a href="#tab_sample_2">Tab 2</a></li>
<li><a href="#tab_sample_3">Tab 3</a></li>
</ul>
<div class="tab_container">
<div id="tab_sample_1" class="tab_content">contents of first tab</div>
<div id="tab_sample_2" class="tab_content">contents of second tab</div>
<div id="tab_sample_3" class="tab_content">contents of third tab</div>
</div>

Load required javascript for sample tabs:
$eDoc = eFactory::getDocument();
$jsFile = eFactory::getElxis()->secureBase().'/includes/js/jquery/tabs.js';
$eDoc->addJQuery();
$eDoc->addScriptLink($jsFile);

CSS for the sample tabs:
If it is for frontend section you must also add required CSS declarations in your CSS to style tabs. Default styling can be copied from the file below:
templates/admin/iris/css/template.css (scroll down to section "tabs")

You can integrate Elxis tabs the way I show you on any article without the need of a tab plugin just from the editor.
Just don't forget to put jquery, the tabs.js file and the css in your template's head section.

Sample HTML to insert multiple plugins inside tabs with the WYSIWYG editor:
<ul class="tabs">
<li><a href="#tab_london">Pictures from London</a></li>
<li><a href="#tab_paris">Pictures from Paris</a></li>
</ul>
<div class="tab_container">
<div id="tab_london" class="tab_content">{gallery}media/images/london/{/gallery}</div>
<div id="tab_paris" class="tab_content">{gallery}media/images/paris/{/gallery}</div>
</div>

kyomar · « **Reply #2 on:** June 12, 2013, 13:41:15 »

Awesome, works like a charm! Thank you so much datahell, you saved my day - once again.

Amigamerlin · « **Reply #3 on:** June 14, 2013, 10:16:54 »

Really interesting topic. I've a noob question., sorry : Datahell, where to load the required js. :'(
Sorry again for the question.
Thank you you all. In this forum I'll never end to learning

datahell · « **Reply #4 on:** June 14, 2013, 10:39:25 »

If you want global support for all pages: In your template's index.php file before the <html> section and before echoing anything to the browser.
If you want support for a module or component: In the module/component code.

Elxis 4.x has built-in support for many things. Some of them are not too visible as they are used by Elxis internally.
So you might have to search a little Elxis files to find out its secrets.
Most of core features are under the "libraries" folder.

Author Topic: gallery plugin inside tab plugin (Read 7686 times)

kyomar

gallery plugin inside tab plugin

datahell

Elxis built-in tabs support

kyomar

Re: gallery plugin inside tab plugin

Amigamerlin

Re: gallery plugin inside tab plugin

datahell

Re: gallery plugin inside tab plugin