How to link to an opened modal / lightbox window?

[SPDRMN]

Hi!

I'm planning to modify a component. I need it's items to be opened in modal / lightbox windows. I think I can achieve this by using Modals plugin (or anything else that suits my needs) easily. But I need the ability to link these opened modal / lightbox items from links on other sites or links in emails (from newsletter).

Is there a way to link to an opened state of a modal / lightbox window?

[iextensions]

you can select one:

http://extensions.joomla.org/extensions ... -a-iframes

[SPDRMN]

I think you didn't understand what I need.
I can make links open in modal / lightbox window, there's no problem with that.

I wonder if I could link to these _opened state_ of modal / lightbox windows _from other sites_ or from emails. So if I send a link in email to my subscribers of my newsletter, I want this link behave like that: clicking on the link it navigates to my site, and opens the modal / lightbox window.

For example let's assume that I prepare my com_content blog view to open all articles in modal / lightbox. It works. Anybody who browses my site's blog view can open articles only in modal / lightbox. It's not possible to view any article in it's own article view page. That's right, that's what I wanted to do. The same behaviour is what I want to see if I link to my articles from outer sites (for example from this forum post) or from emails. My problem is that basically if I link my article from outer sites (for example from this forum post) or from email, it doesn't matter if com_content blog view is prepared or not, the link navigates directly to the articles single page view. This behaviour is what I want to avoid.

[DaveOzric]

JCE editor can do this as probably many others. The JCE function would not be in the free one as you need Mediabox.

There is a setting when creating the popup to have it auto popup on page load.

[SPDRMN]

And how can I link to a popup that's in open state, what is the URL? If you use it, could you link something that's in this opened window?

I can imagine that inside an article I can have (for example) an image (or something like that, or another article, etc, any element) that has a setting for auto popup that image on page load. In this case the URL is the article's URL, a single article view page's URL. But what if - as in my previous example - the article itself is what I want to see in an opened state popup? So the URL will be not a single article view page's URL, but... what?

Additional question: can this JCE plugin work in components code, in template override? You know, I don't want edit articles but to modify a component's code.

[bbolli]

You can add a URL parametee to flag for tge modal window to be opened. Then simply launch the modal window programtically if present using JavaScript.

[SPDRMN]

Could you help me how to achieve that?
Let's assume that I have a blog view of com_content with 2 articles. I want to link one of those articles to be shown in modal window above this blog view. What is the link, what is the parameter?

[bbolli]

Well, you would start by checking for the flag in the URL parameters. Let's say the url was:

Code: Select all

index.php?option=com_mycomponent&view=myview&modal_view=1

You should create a method in your Model and retrieve value in JViewLegacy class, making it available in your default*.php files for rendering: A method consisting of the below and called getModelView would work:

Code: Select all

return JFactory::getApplication()->input->get('modal_view', 0, 'boolean');

You would grab the value of the modal_view parameter in JViewLegacy like so:

Code: Select all

$this->modal_view = $this->get('ModalView');

At the top of your primary view file in the tmpl directory, add the below to import the jquery library.

Code: Select all

JHtml::_('behavior.modal');
JHtml::_('jquery.framework');

You need to make the value available to your JavaScript which can be done a couple of ways. I prefer to assign value to hidden input fields like so:

Code: Select all

<input type="hidden" id="modal_view" value="<?php echo $this->modal_view; ?>" />

You should also keep the existing anchor link reference used to launch the modal window and add an ID attribute to it. This will still be used to automatically launch the modal window when desired, but will also server its original purpose as a user call-to-action for the modal view.

Then, at the end of your view files in the tmpl directory. Add the below script deceleration:

Code: Select all

<script>
    (function($) {
        $(document).ready(function() {
            // retrieve value of modal view
            var modal_view = document.getElementById('modal_view').value;
            if (parseInt(modal_view) === 1) {
                SqueezeBox.assign("#myModelId", {handler: "iframe", size: {x: 640, y: 480}, onClose:     function({
                    // Add any callback logic to be fired when modal closed.
                }});
             }
        });
    })(jQuery);
</script>

The above jQuery/JavaScript waits for the DOM to fully render, then grabs the value set for the hidden input field storing the modal view parameter. It converts to an integer since it would be considered a string in its current state and checks for a true value. If so, in manually launches the modal window link. This solution maintains existing functionality with the addition of the desired results.

[SPDRMN]

Thank you very much! However I'm not a programmer (I've no experience in JS) I think I can understand this method. I'll try to apply it on my component and I'll write my experiences. Thanx a lot!