Aufruf der Lightbox

[Heidegeist]

Hallo allerseits,

Kurzform:
Ist es möglich, eine Fotostrecke (Colorbox-Gruppe: <... data-lightbox="alle-gleich">) über ein Element/Link/Trigger aufzurufen, der selbst NICHT Teil der Gruppe ist?
Alternativ: Ist es möglich, das aufrufende Element (aka Vorschau) von der Anzeige in der Lightbox auszunehmen?

Den konkreten Anwendungsfall beschreibe ich gerne ausführlicher, wenn es zu obiger Aufgabe keine einfache Antwort gibt, die ich bisher womöglich übersehen habe.

Schematisch soll's also so sein:

<a some-attributes='xyz'>Open lightbox</a>

<div style='display:none;'>
    <a data-lightbox='alle-gleich'>
        <div>
            <img>Bild1</img>
            <h1>Bildtitel1</h1>
            <p>Bildbeschreibung1</p>
        </div>
    </a>

    <a data-lightbox='alle-gleich'>
        <div>
            <img>Bild2</img>
            <h1>Bildtitel2</h1>
            <p>Bildbeschreibung2</p>
        </div>
    </a>

    ...

</div>

Danke und viele Grüße
Andreas

[zonky]

sieh dir mal die Beispiele bei der Colorbox an

http://www.jacklmoore.com/colorbox/e...inline_content

mach am Besten ein eigenes Template mit dem Parameter
http://www.jacklmoore.com/colorbox/#setting-inline
oder steuere das z.B. über eine CSS-Klasse, die Du im JS abfragst

[Heidegeist]

Grundsätzlich funktioniert die Galerie ja fast wie gewünscht.
Es gibt nur zwei Probleme, die ich nicht lösen kann.
Ansicht und Beschreibung hier:

Link entfernt

Javascript, j_colorbox.html5:

<?php
$GLOBALS['TL_CSS'][] = 'assets/colorbox/css/colorbox.min.css|static';
?>
<script src="<?= $this->asset('js/colorbox.min.js', 'contao-components/colorbox') ?>"></script>

<script>
(function($) {
$(document).ready(function() {
  $('a[data-lightbox]').map(function() {
    $(this).colorbox({
        opacity: 0.6,
        loop: false,
	inline: true,
        rel: $(this).attr('data-lightbox'),
        maxWidth: '95%',
        maxHeight: '95%'
    });
  });
});
})(jQuery);
</script>

Template Galerie 1:

<?php foreach ($this->boxes as $index => $box): ?>

  <?php 
	$image = $this->getImageObject($box->image, $this->size);
	$boxid = $this->id."_box".$index;
  ?>

  <?php if ($index === 0): ?>
	<a href="#<?php echo $boxid ?>" data-lightbox="<?php echo $this->id ?>">
  <?php else: ?>
	<a href="#<?php echo $boxid ?>" data-lightbox="<?php echo $this->id ?>" style="display:none">
  <?php endif ?>

	  <div id="<?php echo $boxid ?>">

    	    <?php $this->insert('picture_default', $image->picture) ?>
	    <h3><?php echo $box->headline ?></h3>
	    <?php echo $box->text ?>
			
	  </div> 

	</a>
	
<?php endforeach ?>

Template Galerie 2:

<a href="#<?php echo $this->id."_box0" ?>" data-lightbox="<?php echo $this->id ?>">
    Trigger Lightbox
</a>

<div style="display:none">

  <?php foreach ($this->boxes as $index => $box): ?>

	<?php 
	    $image = $this->getImageObject($box->image, $this->size);
	    $boxid = $this->id."_box".$index;
	?>

	<a href="#<?php echo $boxid ?>" data-lightbox="<?php echo $this->id ?>">

	    <div id="<?php echo $boxid ?>"> 

                <?php $this->insert('picture_default', $image->picture) ?>
		<h3><?php echo $box->headline ?></h3>
		<?php echo $box->text ?>

            </div>

	</a>
	
  <?php endforeach ?>

</div>

Danke und viele Grüße
Andreas

[Heidegeist]

Ich habe nun die Extension "Lightcase" installiert und ohne jede Anpassung der Templates einfach statt Colorbox im Seitenlayout eingebunden.

Das Problem der verschwindenden Preview-Box taucht damit nicht mehr auf.
Also ist Lightcase für mich verwendbar und das Thema ist an sich erledigt.

Dennoch wäre es interessant, irgendwann mal die Ursache für dieses Verhalten der Colorbox zu kennen und ob/wie man es abstellen kann.

Danke und viele Grüße
Andreas

EDIT: Auf der verlinkten Testseite oben habe ich das unerwünschte Verhalten belassen, falls es noch jemanden interessiert.