artikelnavigation in lightbox

[timtow]

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

[Tim G]

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

[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.

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

[Tim G]

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.

[Tim G]

Hi,
das klappt:

mod_article_list.tpl

<?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.

[timtow]

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

[Tim G]

Ich frage mich, woher die Mediabox weiß, welche aktion oder welcher Artikel auf dem next und prev-Button liegt.

Anhand der id / des Namen des initialisierten lightbox Elements. Richtig: Objekts

Genausowenig, wie ich die mediabox dazu bringe, sich gleich beim Seitenaufruf zu öffnen und den ersten Artikel zu laden.

Das sollte mit einem Javascript-Befehl im body onload möglich sein.
Ich glaube der Befehl lautet: Mediabox.open('welche Mediabox per id').

Grüße Tim

[timtow]

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:

<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>

Der erste Artikel wird brav geladen, es gibt aber keinen "next"-Button. Sowas...

Noch irgendwelche Vorschläge. Oder hinweis auf seiten, die mir weiterhelfen könnten?

ciao
timtow

[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.

<?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 &ouml;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>

Dieses veränderte Template von Tim muß allerdings noch etwas abgewandelt werden.

Viel Erfolg!
timtow