Need help: how to open URL in greybox (or similar) overlay from regular content block

Permalink 1 user found helpful
I have spent a lot of time searching and cannot find a feasible solution, so I turn to you (the community) for help.

I need to open a URL in an overlay and I need to do it from a regular content block, but I am having trouble finding a simple solution for Concrete5.

In most CMS (Wordpress, Drupal, etc.) I use Greyboxhttp://orangoo.com/labs/GreyBox/... as it is quite simple to include the headers in the template and when editing content I can use the "rel" or if I need a little more advanced use the "onclick" with a javascript call.

I tried including Greybox in my template and doing as usual with C5, but when I submit the content I get an "Error" message with some interesting string of characters that doesn't mean anything to me (perhaps it's made for internal testing). This error would occur when adding any content at all (even an empty content block). When I removed the greybox headers from the theme the errors went away, but obviously that does not solve my original problem.

I assume the conflict is because C5 uses jquery and greybox uses prototype (at least I believe so). My next step was to try greybox reduxhttp://jquery.com/demo/grey/ since it is based on jquery. I had difficulty getting that to work as well (and I find there is a lack of support for examples of how to install/use this version).

I did further search and reading here on the forums and it seems there is a built-in jquery uidialog as well as a custom uidialog (that seems was included in C5 before jquery came out, or something to that effect)... But I have a few problems with this option. One problem is that the examples I found to use it (see here:http://www.concrete5.org/documentation/how-tos/javascript-jquery-an... ) do not have a clear and easy-to-use option for regular content blocks (it seems this is more for template, add-on, and block design, which I do not need at this time).

Among all the searching in the forums I found numerous referrals to add-ons from the marketplace -- the pop-up and gallery add-ons in particular -- but these options are overkill for my situation. It would be like trying to kill a dove with a tank round when a simple .22 would suffice.

I really like Concrete5, but I cannot understand why it would be so complicated to do a task that is so simple to perform in other CMS like Wordpress and Drupal.

Any help would gladly be appreciated.

 
teknojunkey replied on at Permalink Best Answer Reply
teknojunkey
hi ... why dont you add it as a html block ?

add html block and paste this ...

<script type="text/javascript" src="http://jquery.com/demo/grey/greybox.js"></script>
<link href="http://jquery.com/demo/grey/greybox.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript">
var GB_ANIMATION = true;
$(document).ready(function(){
$("a.greybox").click(function(){
var t = this.title || this.innerHTML || this.href;
GB_show(t,this.href,470,600);
return false;
});
});
</script>
<ul>
<li><a href="http://google.com/" title="Google" class="greybox">Launch Google</a></li>
</ul>

works for me ... hope it works for you too
Mnkras replied on at Permalink Reply
Mnkras
or make a custom template,
mihelpinghand replied on at Permalink Reply
@Mnkras -- I was/am using a custom template. I think the problem was that I should have coded the template so that it does not import the greybox headers when the site is in editing mode. For some reason when they were included in the template it was causing errors in editing mode.

I suppose this is one of those situations where you bang your head against the problem for too long and you can't see straight so you have to take some time away from it, seek a second and third point of view.

Thank you for your response.
mihelpinghand replied on at Permalink Reply
@teknojunkey -- Thank you for the suggestion. I tried it and it does seem to work. I am not sure why I didn't think to try this approach. I had included the headers in the template and it was causing a conflict with the editing interface of Concrete5. I guess I didn't think to include them dynamically.

This is sufficient enough for now. I do appreciate your response.

I suppose if I want to include this in my template I need to insert a conditional that will exclude the headers if the site is in editing mode. I suppose in that case it would avoid the conflict I was having previously. Would you agree?
teknojunkey replied on at Permalink Reply
teknojunkey
yes should work ...

this will include if in edit mode ...

<?php if ($c->isEditMode()) { ?>
<script>here</script>
<?php } ?>
mihelpinghand replied on at Permalink Reply
OK I'll give that a try. Thank you again for your help.