Druckbare Version
Hallo,
ich habe eine Folge von Bilder mit jeweils dazugehörigem Text als mehrere Artikel angelegt. Diese kann ich in einer Artikelnavigation durchblättern. Quasi eine Bildgalerie mit Text zu jedem Bild.
Wie stelle ich es nun an, dass ich die Artikel in einer Lightbox / Mediabox durchblättern kann. Ich habe leider keine passende Lösung gefunden und selber komm ich auch nicht drauf. Die Module "lightbox" und "lightbox4ward" erscheinen mir nicht passend, da das Blättern jeweils fehlt.
Gruß
Timtow
Hi,
wieviel Text hast du denn bei jedem Bild?
(Ist doch eine sehr seltsame Methode für eine Galerie, die du hier verwendest. Ein geändertes Template für die interne Galerie wäre wahrscheinlich besser. Die Navigation hätte man auch damit realisieren können.)
Grüße Tim
Danke für die Antwort! Ich habe etwa 20 Wörter pro Bild. Die Lightbox erscheint mir für bilder besser geeignet als das Template, das ich für die Artikel verwende. Fotos wirken auf dunklem HIntergrund besser. DAher gibt's ja die lightbox. Das möchte ich gerne für die Darstellung nutzen. Ein eigenes Foto-template mit Artikelnavigation... naja. Wäre auch eine Lösung, aber nicht so elegant. Die User stehen auf lightbox. Teils berechtigterweise wie ich finde.Zitat:
Zitat von Tim G
Ich habe folgende Lösungsansatze im Kopf:
1) Die Artikel (Bilder mit Text) ohne Artikelnavigation untereinander in der seite unsichtbar laden. Das Artikeltemplate so verändern, dass ich die divs in denen die Beitreäge stehen mit der mediabox ansprechen kann (id="mb_..."). Dann müßte ich nur noch die "next"-Links der Mediabox anpassen, so dass sie die einzelnen Artikel-divs laden kann.
2) Mediabox erhält links, so dass bei klick auf "next" per Ajax der betreffende Artikel geladen wird.
Grüße
Timtow
Interessant...
Sag nur kurz warum du Artikel in die Lightbox laden willst und nicht einfach die Bilder mit Ihren 20 Worten als Untertitel?
So, oder so...
Probiers mit deinen Artikeln. Versuch vielleicht im mod_articles_list.tpl Template dem li elment ein rel=lightbox unterzujubeln.
Hi,
das klappt:
mod_article_list.tpl
PHP-Code:<?php
$id_of_the_article_containing_the_module = 48; // Id des Arikel mit dem Artikelliste Modul (falls über Artikel in die Seite eingebunden)
/*
Falls das Artikelliste Modul ebenfalls in einem Artikel eingebunden ist,
darf es nicht innerhalb der Schleife per inserttag eingebunden werden, weil sonst dieses
Template sich endlos aufrufen würde und der Server abbricht.
Info: Kann leer gelassen werden, wenn in den Moduleinstellungen der Artikel mit dem Modul übersprungen wird.
*/
?>
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>
<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<ul>
<?php foreach ($this->articles as $article): ?>
<?php $id = $article['articleId']; ?>
<li>
<a href="<?php echo $this->request; ?>#mb_content<?php echo $id; ?>" rel="lightbox[lb<?php echo $this->id; ?>, 640 480]" title="<?php echo $article['title']; ?>"><?php echo $article['link']; ?></a>
<div id="mb_content<?php echo $id; ?>" class="mediaboxContent" style="display:none">
<?php if($id != $id_of_the_article_containing_the_module): ?>{{insert_article::<?php echo $id; ?>}}<?php endif; ?>
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
ps. bitte durchlesen ;)
Erklärung:
Im Grunde wie du überlegt hast. Der Clou ist das jedes Element der gleichen Lightbox zugeordnet wird, die sich an mit der aktuellen Id des Moduls initialisiert. So sollten auch mehrere Artikellisten dieser Art pro Seite funktionieren.
Innerhalb des lightbox[] kannst du noch die Größe der Lightbox festlegen.
Grüße,
Tim
ps. Da könnte ich nen kleines Modul draus machen. Die Funktion ist schön.
Danke Dir. ;)
Hey tim,
nicht schlecht, respekt. Habe das so ähnlich eingebaut. Ich frage mich, woher die Mediabox weiß, welche aktion oder welcher Artikel auf dem next und prev-Button liegt. Das versteh ich nicht. Genausowenig, wie ich die mediabox dazu bringe, sich gleich beim Seitenaufruf zu öffnen und den ersten Artikel zu laden.
Kommt für mich etwas viel zusammen weil ich mich mit contao noch nicht so gut auskenne und mit der Mediabox noch weniger. Ich bleib dran...
Vielen Dank schonmal!
timtow
Anhand der id / des Namen des initialisierten lightbox Elements. Richtig: ObjektsZitat:
Ich frage mich, woher die Mediabox weiß, welche aktion oder welcher Artikel auf dem next und prev-Button liegt.
Das sollte mit einem Javascript-Befehl im body onload möglich sein.Zitat:
Genausowenig, wie ich die mediabox dazu bringe, sich gleich beim Seitenaufruf zu öffnen und den ersten Artikel zu laden.
Ich glaube der Befehl lautet: Mediabox.open('welche Mediabox per id').
Grüße Tim
Hi,
funktioniert leider immer noch nicht. Finde im Web keine Infos die mir weiterhelfen.
Ich habe diese zeilen in dieobige mod_article_list.php eingefügt:
Der erste Artikel wird brav geladen, es gibt aber keinen "next"-Button. Sowas...Code:<script>
window.onload = function () {
Mediabox.open('<?php echo $this->request; ?>#mb_content<?php echo $this->articles[0]['articleId']; ?>','lb<?php echo $this->id; ?>', '400 400');
};
</script>
Noch irgendwelche Vorschläge. Oder hinweis auf seiten, die mir weiterhelfen könnten?
ciao
timtow
okay, habe das ganze nun hinbekommen. Hier eine Schritt für Schritt-Anleitung falls jemand das gleiche feature sucht:
1) Erstelle in BE unter "themes" ein eigenes Modul, das auf dem FE-Modul "Artikelliste" basiert.
2) Erstelle in BE unter "themes" ein eigenes Seitenlayout und weise ihm dieses Modul zu, welcher Content Bereich ist wohl egal. Moo_Mediabox nicht aktivieren für dieses Modul.
3) Erstelle in BE unter "Seitenstruktur" eine neue Seite und weise ihr dieses Seitenlayout zu.
4) Erstelle unter "Inhalte/Artikel" in der eben erstellten Seite die Artikel, die jeweils als Contentelement "Text" das gewünschte Bild und den zugehörigen Text enthalten.
5) Erstelle unter "Layout/Templates" ein neues template indem du unter "Orginaltemplate" "mod_article_list.tpl" auswählst. Wähle unter "Zielverzeichnis" den Ordner "Templates" und erstelle das Template.
6) Wähle unter "Layouts/templates" dieses Template zum bearbeiten aus und ersetze den Inhalt durch folgenden Quelltext.
Dieses veränderte Template von Tim muß allerdings noch etwas abgewandelt werden.Code:<?php
$id_of_the_article_containing_the_module = 48; // Id des Arikel mit dem Artikelliste Modul (falls über Artikel in die Seite eingebunden)
/*
Falls das Artikelliste Modul ebenfalls in einem Artikel eingebunden ist,
darf es nicht innerhalb der Schleife per inserttag eingebunden werden, weil sonst dieses
Template sich endlos aufrufen würde und der Server abbricht.
Info: Kann leer gelassen werden, wenn in den Moduleinstellungen der Artikel mit dem Modul übersprungen wird.
*/
?>
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>
<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<a href="<?php echo $this->request; ?>" >Artikelliste erneut öffnen</a>
<?php
$arrParamsMediaBox = array();
foreach ($this->articles as $article):
$arrParamsMediaBox[] = "["."'#mb_content".$article['articleId']."', '".$article['title']."', '400 430'"."]";
/* <a href="<?php echo $this->request; ?>#mb_content<?php echo $id; ?>" rel="lightbox[lb<?php echo $this->id; ?>, 640 480]" title="<?php echo $article['title']; ?>"><?php echo $article['link']; ?></a>*/ ?>
<div id="mb_content<?php echo $article['articleId']; ?>" class="mediaboxContent" style="display:none">
<?php if($article['articleId'] != $id_of_the_article_containing_the_module): ?>{{insert_article::<?php echo $article['articleId']; ?>}}<?php endif; ?>
</div>
<?php
endforeach;
$strParamsMediaBox = implode(",", $arrParamsMediaBox);
?>
</div>
<script type="text/javascript" src="plugins/mediabox/js/mediabox_src.js?1.2.5"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
//var u = new URI(document.URL);
var u = location.pathname;
//if (u.get('fragment') == 'new-name') {
if (u == '/artikellisten.html') {
//Mediabox.open([['#mb_test1', 'title1', '380 200'], ['#mb_test2', 'title2', '380 200'], ['#mb_test3', 'title3', '380 200']], 1);
Mediabox.open([<?php echo $strParamsMediaBox ?>], 0);
}
});
</script>
Viel Erfolg!
timtow