Results 1 to 7 of 7

Thread: Article, news reader or Metamodel reader on overlay ?

  1. #1
    User
    Join Date
    04-01-10.
    Posts
    289

    Frage Article, news reader or Metamodel reader on overlay ?

    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.

  2. #2
    User Andreas's Avatar
    Join Date
    07-11-09.
    Location
    Mönchengladbach
    Posts
    499

    Default

    Sorry, I think this is not enough information to help you.
    Web-Development, Freelancer, Burgtech, XHTML, HTML5, CSS, PHP, Javascript, MooTools, MySQL and more
    Amazon wishlist

  3. #3
    User
    Join Date
    04-01-10.
    Posts
    289

    Default

    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.

  4. #4
    User Andreas's Avatar
    Join Date
    07-11-09.
    Location
    Mönchengladbach
    Posts
    499

    Default

    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.
    Web-Development, Freelancer, Burgtech, XHTML, HTML5, CSS, PHP, Javascript, MooTools, MySQL and more
    Amazon wishlist

  5. #5
    User
    Join Date
    04-01-10.
    Posts
    289

    Default

    Thanks Andreas. I'll see...

  6. #6
    User
    Join Date
    04-01-10.
    Posts
    289

    Default

    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.

  7. #7
    User Andreas's Avatar
    Join Date
    07-11-09.
    Location
    Mönchengladbach
    Posts
    499

    Default

    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.

    PHP Code:
    (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');
              }
            },
            
    loopfalse,
            
    rel: $(this).attr('data-lightbox'),
            
    fixedtrue,
            
    maxWidthisIFrame '817px' '100%',
            
    maxHeightisIFrame false '100%',
            
    iframeisIFrame,
            
    widthisIFrame '95%' '100%',
            
    heightisIFrame '95%' '100%',
            
    classNameisIFrame 'iframe' 'no-iframe',

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

      });
    })(
    jQuery); 
    Web-Development, Freelancer, Burgtech, XHTML, HTML5, CSS, PHP, Javascript, MooTools, MySQL and more
    Amazon wishlist

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •