Article, news reader or Metamodel reader on overlay ?

[charled]

Hello,
In Contao 4.4, how can I make article, newsreader or Metamodel reader display on overlay over the list page ? If possible with no javascript.

Thanks for help.

[Andreas]

Sorry, I think this is not enough information to help you.

[charled]

Hi Andreas.

I'm looking for the same effect as in contao-manager/discover. When you click on an extension, its details page comes above the list page (with some blur or translucent black around ity).
How can I do the same with articles, news or MM list (css only if possible) ?

Thanks.

[Andreas]

I think you need a professional. There are a lot of solutions for that. You should find a solution that exactly fits your requirements.

1. A solution with CSS requires that everything that should pop up is already rendered in the HTML of the page. This includes a little bit of JavaScript, which ensures that when you click on an element, the associated element which should pop up gets a CSS class 'showme' or similar.

2. Otherwise you can reload missing content into the page with AJAX (JS). Thereby the page gets not reloaded again. Disadvantage for SEO. And you have to know how to use AJAX in Contao.

3. And then there is also the possibility to have other pages pop up in a lightbox. E.g. I've done it here: https://engadin-art-talks.ch/de/speakers.html. You see a list module and when you click on an entry the details page pops up in a lightbox. Disadvantage: a lot of effort.

[charled]

Thanks Andreas. I'll see...

[charled]

Hi again...
I just discovered I can add data-lightbox="data-lightbox" to a link to have the effect. In a forum thread, there is data-lightbox="iframe" too. Is there some explanations somwhere on how to use it with Contao ? And perhaps with Metamodels too ?
Thanks.

[Andreas]

I show you the Colorbox initialization from above linked website. Yes, you can see, that Colorbox collects links with the attribute "data-lightbox" to treat them as Colorbox links. The value of data-lightbox doesn't matter. Same values means you can leafe through those links while Colorbox is open.

You don't need a value "iframe", it has no effect.

What I do is, I try to figure out if the link wants to open an HTML site as then you have to set the option "iframe" to true.

(function($) {
  $(document).ready(function() {

    $('a[data-lightbox]').map(function() {
      var isIFrame = false;

      if($(this).attr('href').split('.').pop() == 'html' || $(this).attr('href').indexOf('youtube.com') != -1) {
        isIFrame = true;
      }

      $(this).colorbox({
        // Put custom options here
        title: function() {
          if(isIFrame) {
            return $(this).text();
          } else {
            return $(this).attr('title');
          }
        },
        loop: false,
        rel: $(this).attr('data-lightbox'),
        fixed: true,
        maxWidth: isIFrame ? '817px' : '100%',
        maxHeight: isIFrame ? false : '100%',
        iframe: isIFrame,
        width: isIFrame ? '95%' : '100%',
        height: isIFrame ? '95%' : '100%',
        className: isIFrame ? 'iframe' : 'no-iframe',

        // internationalization
        current: isIFrame ? 'Seite {current} von {total}' : 'Bild {current} von {total}',
        previous: 'zurück',
        next: 'weiter',
        close: 'schließen',
        xhrError: 'Laden des Inhalts fehlgeschlagen.',
        imgError: isIFrame ? 'Laden der Seite fehlgeschlagen.' : 'Laden des Bildes fehlgeschlagen.'
      });
    });

  });
})(jQuery);