After successfully updating to Seblod 3.3.0, I had to re-adapt my change to: templates > seb_table > index.php where I committed a 'little sin' by adding something to the original script. I did this to be able to callout a modal window WITH content out of a Seblod list with jquery-colorbox ;) Thus I completely avoided having to use external modal plugins (from Yoo, nonumbermodals, etc ...) that needlessly interfere and clash with jquery in the site.
Here's an example where I call a modal popup window WITH content out of a Seblod list (blue links in the list)
This is how I did it:
1) In admin > list&Search > List
There I set the field I want lo link in option #2 to:
VIEW +: ... 'Content' = Field .... 'Field name' = art_id ..... 'Template' = component
HTML +:
{source 0}
<a class='test' href='$cck->getLink('tl_datum');'>$cck->getValue('tl_auteur') </a>
{/source}
(!! your MUST have Nonumber Sourcerer running !! )
2) In templates > seb_table > index.php (via filezilla) just after line 29 and before '// -- Render' I added:
// een speciaaltje voor de tijdslijn
$doc->addStyleSheet( 'media/cck/scripts/jquery-colorbox/styles/style0/colorbox.css' );
$doc->addScript("media/cck/scripts/jquery-colorbox/js/jquery.colorbox-min.js");
$doc->addCustomTag( '
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("a.test").colorbox({iframe:false, initialWidth:"75%", innerWidth:"75%", innerHeight:365, scrolling:true });
});
</script>
' );
In other words, whenever the class='test' then I force the content to open (href) in a colorbox via the ("a.test").colorbox statement.
As my knowledge of programming is dangerously low, God knows how I got it right and therefore I wish to thank my many friends on this forum for their advice which pointed me in the right direction to 'read between the lines' and be oh so adventurous .... ;)
Now I throw the glove to the programmers to pick up the challenge and find a better formula than I did because I'd love to implement their solution as a permanent feature!
Kind regards,
Bernard
That's exactly where I lack knowledge.
If I understand well what you're pointing at, I got around the fixed size with statements like eg. --initialWidth:"75%"-- etc. In this manner the modal window follows the responsive template. Obviously, when working this way, I carry around some extra code in all seb_table's around the site ..
I am rather wondering if on could have a kind of field 42 or so in which one could call the settings as I did in seb_table >index.php and also predetermine width, scrollbar, style etc. You see the picture?
Bernard
Next in template js file use:
jQuery('a.modal').modal();
The functions: http://getbootstrap.com/javascript/#modals
I just did the test (step by step) in my Wamp server but as soon as I just add a class "modal" to the link in markup option then, when I refresh the site, the first element (field with markup) in the list gets thrown into a modal window.
This means that the class must be a unique name as 'modal' as a class is already being used elsewhere.
After that I went on testing a bit with the second part (using modal or test as a class) in jQuery('a.modal').modal(); but I got nowhere (endless scripts or blank screens);
Did you try it yourself already? What is the full snippet? Where did you put it?
Kind regards,
Bernard
In link rel options (link + markup config) add:
The additional " and missing " is to break rel tag :)
Don´t need any class or javascript, bootstrap will get href.
You can control modal width/height by css #example
Till just now,
Bernard
Thank you!
Bernard
<div id="mymodal" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close btn" data-dismiss="modal">Close</a>
</div>
<div class="modal-body">
</div>
</div>
Remove link class´s In link rel options field (link + markup config) add:
" data-toggle="modal" data-toggle="modal" data-target="#mymodal
In list the link will look like:
-300000 - ca -8000
Hello Marcio,
This works very well and much faster than my solution!! This shows one of the many hidden possibilities of Seblod! Thank you for opening this door of knowledge for us!
Here again is the temporary link again to the site under construction. (Don't worry about the title not appearing in the modal window as I set the 'show_title' to '0')
Here I have 3 remaining remarks/questions:
1) When clicking on the overlay to close the modal window after viewing more than one link in the page, the overlays keep on layering themselves (they go darker and darker), and one has to click several times on the page to eliminate the overlays. Is there a statement missing?
2) Where and how do I write the css for #mymodal? Say that I want to set the width to 80% ..
3) ... is there a way not to let
Kind regards,
Bernard
2 - in yoo_master custom css file
3 - override this content type item position to not set pagination if tmpl = component
Here are my findings on the different points:
1) In my original post, I mentioned that I want to avoid clashes with other modal plugins and that's why I decided to stick with colorbox as Seblod seems to use colorbox for images (unless I'm mistaken).
2) I manage to set the css (#mymodal) and control the width by % - (proof: that's why the characters are red ;) right now). The bad news is that on a galaxy mini the modal window shows up on the top left beyond the screen.
3) The plugin does not give me this option in Joomla and I don't master php to override this content type item position to not set pagination if tmpl = component
Q/ Can one use the same technique in 'Link' and use colorbox instead of 'modal'?
Bernard
A non conflit modal plugin: http://www.codigoaberto.pt/extensions/plg_system_modaljscodigoaberto.zip
Just add a class "imodal" to any link and it open in lightbox, it work anywhere in Joomla plataform.
Marcio (www.codigoaberto.pt) did a fantastic job developing this plugin as described above. For 2 nights I was his "live rat" continually testing the development of his plugin on a live (testing) site while communicating through Skype. - Till he got it 100% right -
All my compliments to him and the company he works at Codigo Aberto your commitment goes beyond words!!
Here is the temporary link again the site under construction where you can see a modal window popping out of the links in a list. It work in other environments too (androïd, ipad, ..)
Thank you Marcio!.
is it suitable for form-in-form in modal windows? i'd like to have an opportunitty using button free (or just button) to open a form in form.
For example, dynamic cascade with country/region/city as seblod's content type . If user can't find a city, he has button free, if he clicks - a modal window popups with another seblod's form, where user can add own option.
At the moment, I don't know how to do it in Seblod.
Basically, should be a way to use form-in form in modals (ajax+jquery, I guess)
Also i'm looking for a solution for kinda module in article view, where user can click and relate other his articles to current article.
Foe example create an event for several (2,3,...) articles like genealogical tree.
2 - create the button and in output html write: < a href="/ index.php?option=com_cck &view=form &type=you_form_unpublished_name &tmpl=component" class="modal btn btn-primary" rel="{handler: 'iframe', size: {x: 800, y: 500}}" >*value*< /a>
I've made this with button free (how's bad taht we don't have proper documentation)
Hi Bernard,
I first tried your "Simple Modal Box" topic wich i could make works...
But from there, you send people here in your "March 2014" edit... I'm very intersting in this "without external plugin" solution, but i can't just make it work. I'm lost here, wich topic should I use ? Do you think u could make a "one two three" steps by steps tutorial (sorry my knowldege in coding seems far down from yours :-) I'm working with "Rockettheme" and not "Yootheme" template (seems a discovers warp 7 doesn't support IE8, wich i can't avoid)...
Hello Stef,
In all honesty, I think Codigo Aberto is the best person to answer you in a correct manner. Personally I went from Rockettheme to Warp 6 and then Warp 7. Experimenting with Warp 7 unfortunately didn't allow me for Rockettheme to be in the Joomla system (conflict) so I deleted Rockettheme and everything that came with it.
On the other hand, my (strictly) personal vision is that people should upgrade their browsers, be it for their personal safety and comfort. If not, then change over to another browser. Companies like Microsoft not installing (or should I type) enabling automatic updates like chrome, FF, or even Adobe (for their applications while trying to trap people into other things) etc goes beyond my common sense in this ever changing virtual world we're living in on the flick-on of just about any screen.
Kind regards,
Bernard
(while awaiting Codigo Aberto for a reply to fulfill your quest)
Hi Bernard, and thanks a lot for your answer... OK will wait for Aberto if he is still listinenig to this topic...
I indeed agree with what peaple (or MS ;) should do with their browser, but in my country (New Caledonia) IE8 is really not avoidable, so....
Warp7 support IE8 with fossil plugin to convert CSS3 vars.
You can use bootstrap modal markup too.
Link to see it live ?
Hi Marcio,
I've used your plugin "plg_system_modaljscodigoaberto.zip" and it works perfectly. Thanks for it.
For me site I use two different templates assigned throught the menu "template style".
I've notice that when your plugin is activated, only the default template is showing (and SEF is active)
If the Plugin activated and Sef desactivited, then the other template is then showing.
Is there a way to fix this ?
Regards
