MetaModels Workshop in Berlin
Ergebnis 1 bis 15 von 15

Thema: Inhalte aus einem Katalog in Colorbox anzeigen

  1. #1
    Contao-Fan
    Registriert seit
    13.12.2012.
    Beiträge
    569

    Standard Inhalte aus einem Katalog in Colorbox anzeigen

    Hi,

    ich gebe in meinem aktuellen Katalog(ce_cataloge) den Namen und eine Kurzbeschreibung von Kunden aus.
    Die Kurzbeschreibung soll ausgeblendet werden, so das man nur noch die Namen sieht, wenn man jetzt auf den Namen klickt, soll sich keine Detailseite öffnen, sondern eine colorbox mit den Werten darin. Wie kann ich jetzt so einen Link generieren, der mir eine colorbox öffnet?

    LG & Danke

  2. #2
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    6.410
    Partner-ID
    152
    User beschenken
    Wunschliste

    Standard

    Moderation: Verschoben in das entsprechende Erweiterungsforum

  3. #3
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.611
    User beschenken
    Wunschliste

    Standard

    Du müsstest im j_colorbox Template inline auf true setzen
    http://www.jacklmoore.com/colorbox/

    Hier ein Beispiel (siehe Link "Inline HTML")
    http://www.jacklmoore.com/colorbox/example1/

    Evtl. solltest du dazu die Colorbox für diese Links noch ein zweites Mal aufsetzen
    https://github.com/contao/core/blob/....html5#L12-L20
    Dieser Block sucht nach Anchorn, welche ein Attribut "data-lightbox" besitzen. Den zweiten Block könntest du nach deinen speziellen Links suchen lassen.
    PHP-Code:
    $('a.myInlineLink').map(function() {
      $(
    this).colorbox({
        
    // Put custom options here
        
    inlinetrue,
        
    loopfalse,
        
    rel'myAlbum',
        
    maxWidth'95%',
        
    maxHeight'95%'
      
    });
    }); 
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  4. #4
    Contao-Fan
    Registriert seit
    13.12.2012.
    Beiträge
    569

    Standard

    Ah ok, Danke, dass mit dem Inline hatte ich schon mal irgend wo gelesen.

    Wie funktioniert dann der Aufruf?

  5. #5
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.611
    User beschenken
    Wunschliste

    Standard

    So wie in dem Beispiel. Der Inhalt bekommt ne ID und der Link diese ID als Hash - href=thispage.html#myInlineElement. Diese Lightboxen versuchen default immer das Linkziel in der Box anzuzeigen.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  6. #6
    Contao-Fan
    Registriert seit
    13.12.2012.
    Beiträge
    569

    Standard

    Ok, wenn der Aufruf so passiert:
    HTML-Code:
    <a class="inline cboxElement" href="#inline_content">Inline HTML</a>
    Reicht es dann wenn ich den Inhalt so schreibe:

    HTML-Code:
    <div id="inline_content">
    <p></p>
    </div>
    Sprich, funktioniert das so im ganzen?
    HTML-Code:
    <div class="modul_1">
        <div class="mod_link">
            <a href="#modul_001" class="inline cboxElement">Modul 1</a>
        </div>
        <div id="modul_001" class="mod_content">
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
                labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
                Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
        </div>
    </div>

  7. #7
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.611
    User beschenken
    Wunschliste

    Standard

    Ja, sollte so funktionieren. .mod_content solltest du dann noch auf display:none; setzen. Wenn das nicht geht, dann braucht .mod_content noch einen wrapper, welcher dann auf display:none; kommt. So wie in dem Beispiel auch zu sehen ist.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  8. #8
    Contao-Fan
    Registriert seit
    13.12.2012.
    Beiträge
    569

    Standard

    sonst muss ich da nichts weiter beachten wie z.b. noch ein data-lightbox attribut oder so hinzufügen?

  9. #9
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.611
    User beschenken
    Wunschliste

    Standard

    Zeig mal, wie du dein j_colorbox-Template angepasst hast. Bzw. zeige einen Link auf die Seite.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  10. #10
    Contao-Fan
    Registriert seit
    13.12.2012.
    Beiträge
    569

    Standard

    Ist lieder noch alles Lokal.

    So schaut meine j_colorbox aus:

    PHP-Code:
    <?php

    // Add the colorbox style sheet
    $GLOBALS['TL_CSS'][] = 'assets/jquery/colorbox/'$GLOBALS['TL_ASSETS']['COLORBOX'] .'/css/colorbox.min.css|static';

    ?>

    <script src="<?= TL_ASSETS_URL ?>assets/jquery/colorbox/<?= $GLOBALS['TL_ASSETS']['COLORBOX'?>/js/colorbox.min.js"></script>
    <script>
      (function($) {
        $(document).ready(function() {
          $('a[data-lightbox]').map(function() {
            $(this).colorbox({
              // Put custom options here
              loop: false,
              rel: $(this).attr('data-lightbox'),
              inline: true, 
              maxWidth: '95%',
              maxHeight: '95%'
            });
          });
        });
      })(jQuery);
    </script>

  11. #11
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.611
    User beschenken
    Wunschliste

    Standard

    Ich denke dein Template sollte z.B. so in etwa aussehen:
    PHP-Code:
    <?php

    // Add the colorbox style sheet
    $GLOBALS['TL_CSS'][] = 'assets/jquery/colorbox/'$GLOBALS['TL_ASSETS']['COLORBOX'] .'/css/colorbox.min.css|static';

    ?>

    <script src="<?= TL_ASSETS_URL ?>assets/jquery/colorbox/<?= $GLOBALS['TL_ASSETS']['COLORBOX'?>/js/colorbox.min.js"></script>
    <script>
      (function($) {
        $(document).ready(function() {

          // Contao core: sucht nach Links mit einem Attribut data-lightbox
          $('a[data-lightbox]').map(function() {
            $(this).colorbox({
              // Put custom options here
              loop: false,
              rel: $(this).attr('data-lightbox'),
              maxWidth: '95%',
              maxHeight: '95%'
            });
          });

          // Mod: sucht nach Links mit der Klasse inline - a.inline
          $('a.inline').map(function() {
            $(this).colorbox({
              // Options for a.inline links
              inline: true,
              loop: false,
              rel: 'we-belong-together',
              maxWidth: '95%',
              maxHeight: '95%'
            });
          });

        });
      })(jQuery);
    </script>
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  12. #12
    Contao-Fan
    Registriert seit
    13.12.2012.
    Beiträge
    569

    Standard

    Ah ok, quasi das script noch mal erweitert. Danke

  13. #13
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.611
    User beschenken
    Wunschliste

    Standard

    Ja, du musst halt eine Unterscheidung machen. Du kannst in deinem isotope-template natürlich auch ein attribut data-lightbox vergeben und dann nur mit dem core-snippet arbeiten und:
    PHP-Code:
    ...
    inline: $(this).hasClass('inline') ? true false,
    ... 
    Ungetestet (gibt es hasClass() in jQuery?). $(this) ist immer das Element, welches gerade angeklickt wird. Aber die Version von mir schafft erst mal einen sauberen Überblick. Viele Wege führen zum Ziel.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  14. #14
    Contao-Fan
    Registriert seit
    13.12.2012.
    Beiträge
    569

    Standard

    Hi,

    nein, so seperat wie du es am Anfang gemacht hast, finde ich es super.

    Noch eine kurze frage, wie kann ich jetzt, wenn ich meine colorbox öffne, dem div "wrapper" eine Klasse geben und wenn ich die colorbox schließe, dass die Klasse wieder verschwindet?

  15. #15
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.611
    User beschenken
    Wunschliste

    Standard

    Mit einer Callback Option, z.B.
    PHP-Code:
    $('a.inline').map(function() {
      $(
    this).colorbox({
        
    // ...
        
    onOpen: function() {
          
    // do stuff
          
    alert('onOpen: colorbox is about to open');
        },
        
    // ...
      
    });
    }); 
    Das kannst du auch auf den Hilfeseiten finden, zum Beispiel auf der example Seite "Examples with alerts".
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •