Bild - geöffnete Großansicht öffnet nicht in der Lightbox

[be-tina]

Im Bildelement habe ich ein Haken bei Großansicht gesetzt.

Jetzt öffnet die Großansicht aber in einem neuen Fenster. Man kann dann nur mit dem Zurück-Button vom Browser zurück auf die Seite.
Das liegt wahrscheinlich an der Fläche, die bei Mouse-over über dem Bild liegt.
jQuery j_colorbox ist aktiviert.

Zu sehen hier z.B. bei Klick auf einen der Flyer
http://www.knell-design.de/portfolio-print.html

Kann ich da irgendwie ein X-Symbol anzeigen lassen, der zurück auf die Seite führt oder das Bild trotz der Fläche in der Lightbox öffnen lassen?

[Spooky]

Sieh dir den Source an:

<div class="ce_image infobild large-4-12 med-3-6 mini-2-2 block">
  <figure class="image_container">
<!--
    <a href="files/kgd_bilder/FL_Friedrichs_01.jpg" title="Flyer Christian Friedrichs" data-lightbox="34038b">
-->
      <img src="files/kgd_bilder/FL_Friedrichs_01.jpg" width="900" height="600" alt="Flyer Christian Friedrichs" title="Flyer Christian Friedrichs">
    </a>
    <figcaption class="caption">
      <a href="files/kgd_bilder/FL_Friedrichs_01.jpg">
        Flyer als PDF <br /> Kunde: Christian Friedrichs
      </a>
    </figcaption>
  </figure>
</div>

Es handelt sich hierbei offensichtlich um ein angepasstes ce_text Template, wo folgendes (falsch) gemacht wurde:

1. Der eigentliche Bild Link, welcher auch das data-lightbox Attribut enthält, wurde auskommentiert.
2. Allerdings wurde nur der öffnende </a> Tag auskommentiert, was zu invalidem HTML führt.
3. In der figcaption wurde statt dessen ein neuer Link hinzugefügt, allerdings ohne das data-lightbox Attribut

Der Programmierer der Website sollte das beheben.

[be-tina]

Das Problem in dem Fall ist ja, dass ich das programmiert habe :-(

Ich hatte das ce_image Template genommen und dem figcaption den gleichen Link verpasst wie dem Bild. Den Link für das Bild hatte ich auskommentiert, damit das mit der schwarzen Fläche auch auf Touch Devices klappt.

Jetzt habe ich es mit dem php Code unten probiert, da hatte ich aber das Problem, dass nach dem Schließen der Lightbox das Bild auf der Seite verschwindet.

Wahrscheinlich wäre das ein größerer Programmieraufwand, das zu lösen? Wenn ja, dann lasse ich es einfach so und verlinke irgendwann auf eine Unterseite.

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>

  <figure class="image_container"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>


    <?php $this->insert('picture_default', $this->picture); ?>
    

    <?php if ($this->caption): ?>
    
      <figcaption class="caption"><?= $this->caption ?>
      
      <?php if ($this->href): ?>
      <a href="<?= $this->href ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?= $this->attributes ?>>
        <?php endif; ?>

        <?php if ($this->href): ?>
      </a>
      <?php endif; ?>
      
      </figcaption>
    <?php endif; ?>

  </figure>

<?php $this->endblock(); ?>

[Spooky]

Aktuell ist auf der Seite noch eine Version ohne data-lightbox Attribut zu sehen.

[be-tina]

Ja, ich habe das alte wieder eingesetzt.

Jetzt habe ich das PHP nochmal eingesetzt, das ich gepostet habe. Kannst dir das mal anschauen.

[Spooky]

Puh, das ist in der Tat ein seltsames Verhalten. Dunkel kann ich mich an etwas ähnliches vor langer Zeit erinnern, wo das auch mit der Colorbox passiert ist.

[be-tina]

Naja, wenn du da auch nicht weiter weißt, lasse ich das einfach so.

Irgendwann setze ich da mal einen Link zu einer Unterseite - wenn ich mal wieder Zeit habe.

Danke, dass du dir das angesehen hast!

[Andreas]

Dein letztes Template ist seltsam programmiert, weil der Link keinen Inhalt hat. Probier mal das hier. Ich habe es noch modifiziert, sodass sowohl das Bild als auch der Caption-Text verlinkt ist.

...
<?php
$linkOpen  = $this->href ? '<a href="'.$this->href.'"'.($this->linkTitle ? ' title="'.$this->linkTitle.'"' : '').$this->attributes.'>' : '';
$linkClose = $this->href ? '</a>' : '';
?>

  <figure class="image_container"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>

    <?= $linkOpen ?>
    <?php $this->insert('picture_default', $this->picture); ?>
    <?= $linkClose ?>

    <?php if ($this->caption): ?>
      <figcaption class="caption">
      <?= $linkOpen . $this->caption . $linkClose ?>
      </figcaption>
    <?php endif; ?>

  </figure>
...

Mein Test-CSS sah in etwa so aus.

figure {
  position: relative;
  float: left;
}
figure:hover figcaption {
  top: 0;
}
figcaption {
  position: absolute;
  top: 100%;
  background-color: rgba(0,0,0,.5);
  width: 100%;
  height: 100%;
  transition: 1s;
}
figure img {
  display: block;
}
figcaption a {
  display: block;
  height: 100%;
}