Colorbox and SectionPicker??

[johnbroeckaert]

Hi All,

Is there a way to use colorbox to display a section of an other page? I know I can display a whole page but i want just a section (SID).

Thanks

[Ruud]

You can use the sectionPicker module to get content from another section and use it as another (page) section.
https://dev4me.com/modules-snippets/opensource/sectionpicker/

To do the same for all pages within the template use globalBlocks.
https://dev4me.com/modules-snippets/opensource/globalblocks/

[johnbroeckaert]

Hi @Ruud,

Maybe I didn't put the question right. I want a section of a page shown as a modal window with the use of colorbox.

For example i have a page with content and a call to action to look at something else without leaving the page. The content I want to display is already on an other page. Is sectionpicker the right tool?

[jacobi22]

if you ask me....

put the code for the modal window into a code2-section directly on the page with the visible content (as second section)
for the content, it doesn't matter, what you use, Droplets like showwysiwyg or also sectionpicker

example (without test

Code: [Select]

<div id="addcustomer" class="w3-modal w3-animate-zoom">
    <div class="w3-modal-content">
        [[ShowWysiwyg?section=123]]
    </div>
</div>

[johnbroeckaert]

@jacobi22,

Yes I asked you to because you are (still??) a moderator 

I see you are using the modal window of w3school. No problem with that, but for pictures i (and my customer) are using colorbox. The look and feel of colorbox is different from the w3 style and for customers it isn't nice to fill in the code2 section.

That's why I asked for a solution with colorbox. If there isn't a solution I have to consider to change everything to the w3 solution I suppose.

Thanks! John

[jacobi22]

W3CSS or not, doesn't matter, it was only a example from the actual module with a modal window

do you know the Colorbox-Examples from here -> http://www.jacklmoore.com/colorbox/example1/

you need a special hidden element with a unique id like

Code: [Select]

<div style='display:none'>
    <div id="inline_content" style="....">
        [[ShowWysiwyg?section=123]]
    </div>
</div>
and a link like this with a anchor to this hidden element

Code: [Select]

<a class="inline cboxElement" href="#inline_content">Inline HTML</a>
for the hidden element you can use a code2-section or a wysiwyg-section with a Droplet call inside.
or you work with two code2-section's and a different section type in the middle like

Code2 - open tags for the hidden div
Middle - different section type, Foldergallery, ProCalender, wysiwyg
Code2 - endtag's from the hidden div in #1

[johnbroeckaert]

@jacobi22 and maybe others,

I adopted the w3 method and made two droplets to adchieve a modal window. Just to make it simple for my costumer

1. Make the button

Code: [Select]

//:modal button
//:[[modal button?class=button button2&tekst=TEKST]]
return '<button id="myBtn" class="'.$class.'">'.$tekst.'</button>';where class is the class for the button an tekst is the text within the button

2. Display the actual modal

Code: [Select]

//:modal window
//:[[modal windo?id=01]]
$returnvalue = "";
$returnvalue = '
<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
     [[SectionPicker?sid='.$id.']]
  </div>
</div>
';
return $returnvalue;
where ID is the SID of the section to display

CSS and JS script can be found here:
https://www.w3schools.com/howto/howto_css_modals.asp

This solution is for just one modal per page. If you want more modals on a page you can modify the ID of the button and the modal window.

I'm open to other, better ways

john

[jacobi22]

other solution: see my last posting - it use the colorbox   

to explain the W3CSS-Usage
i use for all my modules the w3css, its avaiable in the actual wb-backend and if not for possible next version's of the acp-theme, i can implement it with my used frontend-template - so it's the best solution for me

and the the moment of your question, i work on a module with a modal window. i use often a modal window's, because, i have no redirect's for every little settings

my example in the first answer was not a recommendation for W3CSS, it was only a fast answer with a example. it make (for me) no sense, to implement W3CSS for this modal only. i use it in the frontend too, so it doesn't matter for me
Check the solution with the colorbox, maybe it's better for you

[johnbroeckaert]

Hi @Jacobi22,

Check the solution with the colorbox, maybe it's better for you

I realy tried, but I get no result. Have the module colorboxv-1.6 installed
WB 2.10.0  - php 7.1.11

I tried everything to get it to work, but it just won't happen

<a class="inline cboxElement" href="#inline_content">Inline HTML</a>

I had to add 'COLORBOX' to the class and put a piece of the script witch is on the  Colorbox-Examples to let it do anything.
Could not chunck it into pieces like you suggested an dif i put everything in a wysiwyg codemode it worked, but becouse the div is 'display non' I could not see it to make changes

So for now, I will use the droplets instead.

By the way, is your work (module for modal windows) availeble for us wen it's ready?
Thanks for you time!

[jacobi22]

So, any hour's later....   

no problem to use the colorbox as modal window, but....
the colorbox module doesn't work, specially, it doesn't load the correct css-file
if you want, load the ZIP from the attachement, unpack it into your frontend-template-folder and call the colorbox.css in the head of the template-index.php and the jquery.colorbox.js nearly to the footer. you can (of course) use the files from the download package on the original source

if you use the sectionpicker, be sure, that this picker works - not possible for me, to work with the actual sectionpicker-version from WB 2.10.0, result is a empty overlay box there with only a close-button
I use the Picker from WB 2.8.3 Rev 1611. Maybe you add a new droplet with the name SectionPickerOld, so that you not destroy your original picker

example pictures
a own module for a actors website in section picker -> https://i.gyazo.com/854284edf44b10f59bfac207b8d2ece8.png
a wysiwyg section with the droplet [[ShowWysiwyg]] -> https://i.gyazo.com/8dcd04f6b12ebbf6a26e71b61ebc97cb.png
a foldergallery with section picker -> https://i.gyazo.com/3768c3722252b4916ddafea2ceb35e02.png

construct here: two wysiwyg-section's on one page  (not really needed, also possible in only one section)
first section has the link , the css-class show the called ID inline as overlay, #inline_content is the ID of the (hidden) content

Code: [Select]

<a class="inline cboxElement" href="#inline_content">Inline HTML</a></p>
second section

Code: [Select]

<div style="display:none">
    <div id="inline_content" style="">[[SectionPicker?sid=18]]
    </div>
</div>
also possible: multiple hidden div's with different ID's (needs multiple links)

P.S.: i was working in the past at a new module version with the latest js & css and a automatic translation like my description for the foldergallery in the last week (see here -> https://forum.WebsiteBaker.org/index.php/topic,30577.msg213184.html#msg213184)
but somewhere was a problem, i dont remember

[johnbroeckaert]

Thank You very much!

I 'll try  to get this to work. Let you know if it's a go 

[johnbroeckaert]

@jacobi22,

I use the zipfile as described, but unfortunately it does not work. As soon as a section picker is used, the modal remains empty. If I only use text it works fine. Maybe something in my template?

Cheers
John

[jacobi22]

part of my code in the frontend template

- i dont use any filters from WB - (not really important, works also with a filter (for jquery etc))
- i dont use register_frontend_m odfiles() -  (not really important, works also with a register_frontend_m odfiles (for jquery etc))
- no colorbox-module installed, only the script from my zip

the last line's from the template

<script src="<?php echo WB_URL; ?>/include/jquery/jquery-min.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/js/template.js"></script>
<script src="<?php echo TEMPLATE_DIR; ?>/colorbox/jquery.colorbox.js" type="text/javascript"></script>
<script src="<?php echo TEMPLATE_DIR; ?>/js/CookieNotice.min.js" type="text/javascript"></script>
<script type="text/javascript">
                        $(document).ready(function(){
                                //Examples of how to assign the Colorbox event to elements
                                $(".group1").colorbox({rel:'group1'});
                                $(".group2").colorbox({rel:'group2', transition:"fade"});
                                $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
                                $(".group4").colorbox({rel:'group4', slideshow:true,loop:true,
                                                 slideshowSpeed:6000,
                                                 slideshowAuto:true,
                                                 transition:"elastic",
                                                 opacity: "0.7",
                                                 maxWidth:"90%",
                                                 maxHeight:"90%",
                                                 previous:"zur&uuml;ck",
                                                 next:"vor",
                                                 close:"schlie&szlig;en",
                                                 current: "Bild {current} von {total}",
                                                 slideshowStart: "Diashow starten",
                                                 slideshowStop: "Diashow anhalten"});

                        });
                </script>
<?php if (function_exists('register_frontend_modfiles_body')) { register_frontend_modfiles_body(); } ?>

</body>
</html>

templates.js is a little script to change the colorbox overlay-window for a second row in the picture title under the maxi picture. if i remove this line, i've the default picture size, so no matter for your case

the next script with $(".group1").colorbox({rel:'group1'}); change intern the a-link-class "group1" to the deprecated rel-element, so that i have no problem's in the validation, the rest are default settings for a colorbox slideshow.
for a single picture with a short title, i use group1, for multiple pictures without slideshow = group2, for a single picture with a longer title over two or three lines = group3, for a slideshow = group4
foldergallery has own settings, specially shorter slideshowSpeed (4000ms) and no loop (loop=false)

i can use this solution in every frontend-template, also with filters and with register_frontend_m odfiles(), no problem
important in every case: i have to call the colorbox.js after jquery

if you want, i build a test-wb for you, so that you see it live

[johnbroeckaert]

I'll try again this evening. Let you know the status after that.
Appreciate your offer to make a working example. Maybe after my attempt tonight? However, I do not want to take too much of your time. 

[johnbroeckaert]

@jacobi22

A bit later  as mentioned but:
After installing the zip-file everything works ok with the droplet [[ShowWysiwyg]] That's enough for now. the droplet  [[SectionPicker]] (both versions) don't display anything.
Do not bother further on. It's fine this way!
Thanks again!

[jacobi22]

if its work with the  [[ShowWysiwyg]]-Droplet, the Problem is in the [[SectionPicker]]-Droplet, specially the inclusion of the JS- and CSS-files, maybe you can check the load process for the needed files in browser developer tools

(if you dont have it..) Add a new Droplet, call it (maybe) SectionPickerOld, open the File SectionPicker.php from the ZIP add add all the Code to the content-field, line 1 for description, line 2 for the USAGE-filed , then call the Droplet with [[SectionPickerOld?sid=123]]