Druckbare Version
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
Moderation: Verschoben in das entsprechende Erweiterungsforum
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
inline: true,
loop: false,
rel: 'myAlbum',
maxWidth: '95%',
maxHeight: '95%'
});
});
Ah ok, Danke, dass mit dem Inline hatte ich schon mal irgend wo gelesen.
Wie funktioniert dann der Aufruf?
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.
Ok, wenn der Aufruf so passiert:
Reicht es dann wenn ich den Inhalt so schreibe:HTML-Code:<a class="inline cboxElement" href="#inline_content">Inline HTML</a>
Sprich, funktioniert das so im ganzen?HTML-Code:<div id="inline_content">
<p></p>
</div>
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>
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.
sonst muss ich da nichts weiter beachten wie z.b. noch ein data-lightbox attribut oder so hinzufügen?
Zeig mal, wie du dein j_colorbox-Template angepasst hast. Bzw. zeige einen Link auf die Seite.
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>
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>
Ah ok, quasi das script noch mal erweitert. Danke :)
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:
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.PHP-Code:...
inline: $(this).hasClass('inline') ? true : false,
...
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?
Mit einer Callback Option, z.B.
Das kannst du auch auf den Hilfeseiten finden, zum Beispiel auf der example Seite "Examples with alerts".PHP-Code:$('a.inline').map(function() {
$(this).colorbox({
// ...
onOpen: function() {
// do stuff
alert('onOpen: colorbox is about to open');
},
// ...
});
});