(OLD 5.7 Discussion FORUM)

custom form to open in lightbox

Permalink 1 user found helpful May 27, 2015 at 9:55 AM

I need to create an Enquiry form that opens in a light box when the text link 'Enquiry' is clicked.

Are there any built in features (Elemental; Concrete 5.7) that my allow me to do this?

Thanks

MrKDilkington replied on May 28, 2015 at 12:11 am Permalink Reply

Hi PJSAndo,

In concrete5 5.7, Magnific Popup is included as an asset.
http://dimsemenov.com/plugins/magnific-popup/...

You can require the asset in your theme or block.

PJSAndo replied on May 28, 2015 at 4:55 am Permalink Reply

Thanks

PJSAndo replied on May 28, 2015 at 6:38 am Permalink Reply

Re magnific-popup. I've had a look at the documentation, but can't quite figure out how to get the popup to show.

All I need to do is to have a link that opens the popup and includes a Google My Map.

What would be the first few steps to get this going?

Cheers
P

MrKDilkington replied on May 28, 2015 at 11:05 pm Permalink Reply

This is only for demonstration. You should be making a block for this instead. Inlined code with hard coded links is fragile and limited.

- you need to require the Magnific Popup assets

<?php
View::getInstance()->requireAsset('javascript', 'core/lightbox/launcher');
View::getInstance()->requireAsset('javascript', 'core/lightbox');
View::getInstance()->requireAsset('css', 'core/lightbox');
?>

- a link to to the map

<!--
Google My Map embed code
<iframe src="https://www.google.com/maps/d/embed?mid=z-k-mg8oyDFg.kCEYlosJrcWc" width="640" height="480"></iframe>
- the src for the <iframe> is used as the href for the popup link
-->
<a class="popup-gmaps" href="https://www.google.com/maps/d/embed?mid=z-k-mg8oyDFg.kCEYlosJrcWc">Google Map Directions</a>

- the jQuery to call Magnific Popup

<script>
$(document).ready(function() {
    $('.popup-gmaps').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: false
    });
});
</script>

PJSAndo replied on Jun 6, 2015 at 5:59 pm Permalink Reply

Hi MrKDilkington,

Thanks for this. Just about got round to trying this out.

I'm pretty much up to speed with creating my own blocks, but struggling a touch with where this code should go.

The last bit of code I guess (from what I've read) can go in a sub-folder of the block folder called js and will be called automatically from there.

The second bit of code I can put in view.php

But what about the first chunk of code? I guess I can put it in either controller.php or view.php. If it were placed in view.php would the code be the same, as I notice that there is reference to view within the requireAsset (View:: getInstance() etc.

Thanks
P

MrKDilkington replied on Jun 6, 2015 at 8:17 pm Permalink Best Answer Reply

The assets would be required in the controller using view().

public function view()
{
    $this->requireAsset('javascript', 'core/lightbox/launcher');
    $this->requireAsset('javascript', 'core/lightbox');
    $this->requireAsset('css', 'core/lightbox');
}

The Google My Map popup link would be put in view.php. Ideally you would add a form (form.php) to the block and include an input to enter the Google My Map iframe src. The iframe src would be echoed as the href value in the link in view.php. This would stop the link href value from being hard coded.

<a class="popup-gmaps" href="<?php echo $googleMyMap; ?>">Google Map Directions</a>

The script could be placed at the end of view.php.

byvictoria replied on Nov 11, 2015 at 4:37 pm Permalink Reply

Hi @MrKDilkington,

Thank you for your tutorial...
I tried to apply this to the Image block, to make it work as a button, where when you click on it, a pop up window with another page opens.
The block is opening the page fine, but not in an iframe like expected...
Could you tell me if I did something wrong?
This is what I did:

I made a new block imagebutton, (which worked fine) and then I followed your directions:
in controller.php,

public function view() {
        $f = File::getByID($this->fID);
    $this->requireAsset('javascript', 'core/lightbox/launcher');
    $this->requireAsset('javascript', 'core/lightbox');
    $this->requireAsset('css', 'core/lightbox');
        if (!is_object($f) || !$f->getFileID()) {
            return false;
        }

in view.php

if ($linkURL):
        print '<a class="popup-gmaps" href="' . $linkURL . '">';
    endif;

and I added the script at the end like you said:

<script>
$(document).ready(function() {
    $('.popup-gmaps').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: false
    });
});
</script>
<?php } ?>

byvictoria replied on Nov 11, 2015 at 4:59 pm Permalink Reply

I think I know what it is, I forgot to call the script in here:

if ($linkURL):
        print '<a class="popup-gmaps" href="' . $linkURL . '">';
    endif;

Could anybody tell me the sintaxis for this?
Thank you!

MrKDilkington replied on Nov 11, 2015 at 9:33 pm Permalink Reply 1 Attachment

@byvictoria

It is not recommended to modify core files.

You can instead create a custom template for the Image block.

I have created this custom template for you and attached it to this reply.

Unzip this file into your blocks folder:
application\blocks

You should have this path after unzipping:
application\blocks\image\templates\popup\view.php

byvictoria replied on Nov 11, 2015 at 10:41 pm Permalink Reply

Thanks a lot!
I have downloaded the file and unzipped, but the page won't load, I get this error in the console:
NetworkError: 500 Internal Server Error
If I delete the block, the page loads fine...
I have cleared the cache, I don't know what else to try...
Do you know what can it be?

byvictoria replied on Nov 11, 2015 at 11:00 pm Permalink Reply

Hi again @MrKDilkington,
For the record, I replaced the view.php in my image duplicated block, which I named imagebutton (application/blocks/imagebutton/view.php), and it worked, the link opens in a pop-up window.
But your way through the block template seems so much cleaner, I would like to do it like that if I could find out why I am getting the error.
Thanks again for your valuable input!
V.

MrKDilkington replied on Nov 11, 2015 at 11:34 pm Permalink Reply

@byvictoria

Do you have other files and folders inside the image folder?
application\blocks\image

byvictoria replied on Nov 12, 2015 at 6:34 am Permalink Reply

@MrKDilkington,
No, there is nothing but the templates folder...

MrKDilkington replied on Nov 12, 2015 at 12:56 pm Permalink Reply

@byvictoria

"I have downloaded the file and unzipped, but the page won't load"

At what point does the page stop loading?

Is it after you apply the custom Popup template to an Image block?

byvictoria replied on Nov 12, 2015 at 2:22 pm Permalink Reply

@MrKDilkington
as soon as I unzip the file, the page won't load. After unziping, when I refresh the page the site is blank, it wont load at all, and Firefox console would say server error 500...

MrKDilkington replied on Nov 12, 2015 at 3:58 pm Permalink Reply

@byvictoria

Where are you unzipping the file?

byvictoria replied on Nov 12, 2015 at 5:50 pm Permalink Reply

@MrKDilkington
I copied the path from the file manager:
/application/blocks/image/templates/popup/view.php

PJSAndo replied on May 20, 2016 at 1:16 pm Permalink Reply

Thought you may be able to help with this...

I used magnific popup for an enquiry form which has been working fine for ages. But is now not working. Please seehttp://gotimetrekkers.com/gbg027-lost-monuments-peak-district... (click on Make an Enquiry). It goes to a 404.

I think it is something to do with the link putting gotimetrekkers/ before .ccm-page.popup-enquiry-form, as I remember I had a similar problem last year and I think the solution involved just having .ccm-page.popup-enquiry-form which seemed to work as I remember...

Help appreciated!

MathiasB replied on Mar 1, 2017 at 9:45 am Permalink Reply

Dear Mr. Dilkington,
thanks a lot for this posting. Unfortunately the lightbox only works, when I am logged in. When I am logged out, the browser just open the pics the "normal" way. I there a fast way to solve that problem?

Best Mathias

MrKDilkington replied on Mar 2, 2017 at 5:35 am Permalink Reply

@MathiasB

Can you explain how you are using the lightbox, please.

MathiasB replied on Mar 2, 2017 at 8:06 am Permalink Reply

Dear Mr. Dilkington.
Of course I can...

1. I put all the stuff of your posting (May 28, 2015 at 11:05 pm) into the default.php of my theme. It worked. But after I got logged out it didn't.

2. I put the java script into a single file and called it in the header.php

<script type="text/javascript" src=..... >

.
This also just worked when I was logged in.

Now I use the "old school" lightbox (the one with the folder named "dist"). This works fine in both conditions.
http://www.dematon.de/c5/index.php/de/museum/requiem...

So I guess the asset is the culprit.

Best Mathias

MrKDilkington replied on Mar 2, 2017 at 10:01 am Permalink Reply

@MathiasB

Without an example page using the code, it will be hard to find the issue.

Did you have any errors in your browser console?

MathiasB replied on Mar 2, 2017 at 11:30 am Permalink Reply

Dear Mr. Dilkington.
Sorry, I didn't mind that. Unfortunately I replaced your code with the other one which works. Now I am glad, that I found a solution.

I'll try to find the "default.php" with your code in the time machine. Than I can rebuild the theme to check that. But it will take a little time.
Thanks for your interest to help me.

Best Mathias

MathiasB replied on Mar 2, 2017 at 12:07 pm Permalink Reply

Dear Karl (I hope you don't mind it).

Here it is. I love the time machine...

http://dematon.de/c5/index.php/de/museum/beziehungszauber...

Works only when logged in. You should see the pics opened in the normal way.

Here is the code:

<?php
View::getInstance()->requireAsset('javascript', 'core/lightbox/launcher');
View::getInstance()->requireAsset('javascript', 'core/lightbox');
View::getInstance()->requireAsset('css', 'core/lightbox');
?>
    <script>$(document).ready(function() {
   $('.popup-gallery').magnificPopup({
      delegate: 'a',
      type: 'image',
      tLoading: 'Loading image #%curr%...',
      mainClass: 'mfp-img-mobile',
      gallery: {
         enabled: true,
         navigateByImgClick: true,
         preload: [0,1] // Will preload 0 - before current, and 1 after the current image

Viewing 15 lines of 26 lines. View entire code block.

 
<?php
 
View::getInstance()->requireAsset('javascript', 'core/lightbox/launcher');
View::getInstance()->requireAsset('javascript', 'core/lightbox');
View::getInstance()->requireAsset('css', 'core/lightbox');
?>
    <script>$(document).ready(function() {
   $('.popup-gallery').magnificPopup({
      delegate: 'a',
      type: 'image',
      tLoading: 'Loading image #%curr%...',
      mainClass: 'mfp-img-mobile',
      gallery: {
         enabled: true,
         navigateByImgClick: true,
         preload: [0,1] // Will preload 0 - before current, and 1 after the current image
      },
      image: {
         tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
         titleSrc: function(item) {
            return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
         }
      }
   });
});</script>
    <div class="popup-gallery">
 [.............................]

Best Mathias

MrKDilkington replied on Mar 3, 2017 at 1:15 am Permalink Reply

@MathiasB

My first guess is that jQuery is not being loaded.

MathiasB replied on Jun 16, 2017 at 8:25 am Permalink Reply

Hey Karl,
sorry, but I had to reinstall the complete system for another reason.
But you were right! The asset wasn't loaded.

<?php $view->requireAsset('core/lightbox');?>

obviously has to be placed at the top of the templates default.php
I hope that will run constantly now.
Til then:
Thank You again
Best
Mathias

Forums

(OLD 5.7 Discussion FORUM)

custom form to open in lightbox

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?