[easyzoom] Bildergalerie mit Zoom-Funktion und Bildauswahl über Miniaturbilder

EasyZoom erweitert Contao um ein Inhaltselement für eine Bildergalerie mit Zoom-Funktion. Über Miniaturbilder lässt sich das Hauptbild umschalten. Die Erweiterung basiert auf dem EasyZoom-Projekt von Alen Grakalic und Matt Hinchliffe. GitHub: https://github.com/i-like-robots/EasyZoom.

Die Erweiterung benötigt jQuery im Seitenlayout!

ER2: https://contao.org/de/erweiterungsli.../easyzoom.html

Umsetzung für Contao:
Softleister (www.softleister.de) unter finanzieller Beteiligung von Nina Gerling (ena-webstudio.com).

Hallo,

sehr schön! Kann man sich das irgendwo live ansehen?

Danke
HaPe

Bisher noch nicht, Du kannst es Dir aber in einer Testinstalltion gern schnell mal ausprobieren.

Oder direkt die Demos auf der EasyZoom-Seite anschauen:

http://i-like-robots.github.io/EasyZoom/

Hallo,

ich habe folgende Konstellation:
ce_easyzoom mit zwei Bilder
Für jedes der beiden Bilder hätte ich gerne, für eine Erläuterung zu den thumbnails, die Bildunterschrift genutzt. Diese Bildunterschrift habe ich in der Dateiverwaltung direkt vermerkt. diese werden aber nicht angezeigt.

In einem Modul gibt es für normal den Haken zur Auswahl ob die Bildunterschrift angezeigt werden soll - mit Haken wird die Bildunterschrift angezeigt.
In einem ce_image gibt es das Feld der Bildunterschrift - wenn eingetragen, dann wird diese angezeigt.

Bei easyZoom finde ich diese Möglichkeit nicht.
Wie müsste ich das template easyzoom_default.html5 anpassen, dass diese Bildunterschrift aus der Dateiverwaltung gezogen werden?

eigentlich dachte ich, dass diese Zeile dafür zuständig sei ... dürfte aber nicht der Fall sein.
... wobei ich mich mit templates nicht wirklich auskenne

Code:

---

<?php if(!empty($image['caption'])): ?> title="<?php echo $image['caption']; ?>

---

Danke für die Hilfestellung

Hallo Bernhard,

dieser Auszug aus dem Template ist auch genau dafür zuständig und bei mir funktioniert das auch einwandfrei.
Der Titel wird allerdings nur bei den Vorschaubildern angezeigt, nicht im Hauptbild, weil der Mauszeiger ja da eine andere Funktion hat.

Welche Contao-Version hast Du?
Gibt es eine öffentliche Seite, wo man mal gucken kann?

Hallo Hagen,

ich habe hier eine 3.5.3

in der Dateiverwaltung in den Meta-Infos ist Folgendes eingetragen:
photovoltaik-panele-vorher.jpg » Titel: "Vor der Reinigung" und bei Bildunterschrift "vorher"
photovoltaik-panele-nachher.jpg » Titel: "Nach der Reinigung" und bei Bildunterschrift "nachher"

ich denke, dass wir uns etwas missverstanden haben bzw. ich mich unglücklich ausgedrückt habe.
alt und title werden ja korrekt übernommen - nur eine Bildunterschrift wird mir keine ausgegeben » da sollte ja irgendwas von <figcaption class="caption"></figcaption> kommen, oder?

Code:

---

<ul class="easyzoomthumbnails">
  <li class="easyzoom-item">
    <a href="files/layout/images_vorher-nachher/photovoltaik-panele-vorher.jpg" data-standard="assets/images/5/photovoltaik-panele-vorher-fea4fdc5.jpg"><img src="assets/images/f/photovoltaik-panele-vorher-74c84eff.jpg" alt="Vor der Reinigung" title="vorher"></a>
  </li>
  <li class="easyzoom-item">
    <a href="files/layout/images_vorher-nachher/photovoltaik-panele-nachher.jpg" data-standard="assets/images/0/photovoltaik-panele-nachher-1f4a8780.jpg"><img src="assets/images/d/photovoltaik-panele-nachher-fd91cc4d.jpg" alt="Nach der Reinigung" title="nachher"></a>
  </li>
</ul>

---

[EDIT]link gelöscht[/EDIT]

Dann sollte es mit folgender Änderung im Template gehen:

HTML-Code:

---

  <li class="easyzoom-item">
    <a href="<?php echo $image['zoom']['img']['src']; ?>" data-standard="<?php echo $image['standard']['img']['src']; ?>"><img src="<?php echo $image['thumb']['img']['src']; ?>" alt="<?php echo $image['alt']; ?>"<?php if(!empty($image['caption'])): ?> title="<?php echo $image['caption']; ?>"<?php endif; ?>></a>
    <?php if(!empty($image['caption'])): ?><figcaption class="caption"><?php echo $image['caption']; ?></figcaption><?php endif; ?>
  </li>

---

Einfach die zusätzliche Zeile (3) eintragen und die Optik dann mit CSS anpassen.

DANKESCHÖN!
klappt einwandfrei

Hallo,
ich habe die Erweiterung unter Contao 3.5.6 schon einige Zeit im Einsatz, sie läuft problemlos.
Jetzt musste ich im Seitenlayout zusätzlich MooTools aktivieren, da die Erweiterung calendarfield benötigt wird.
Sobald ich MooTools aktiviere läuft EasyZoom nicht mehr. Wenn man auf das Bild klickt, wird es groß nur angezeit.

Ein Link zur Testseite, einen FTP- und Backendzugang kann ich gerne per PN zur Verfügung stellen.
Die Alternative wäre ein Kalender-Eingabefeld auf jQuery-Basis, gibt es so etwas für Contao?

Danke für die Hilfe.
Schmidty

Hallo Schmidty,

ich kann das Verhalten nachvollziehen, wenn ich die lokale Mootools-Variante einbinde.
Wenn ich im Seitenlayout umstelle auf "CDN (googleapis.com)", dann geht es bei mir.
Offenbar hat Contao eine andere Mootools-Version eingebunden.

Hallo do_while,

Danke für die Rückmeldung. Ich habe es gerade ausprobiert, wenn ich das Laden von mooTools auf CDN (googleapis.com) umstelle, dann läuft EasyZoom, aber die Erweiterung calendarfield, die mooTools benötigt läuft damit nicht. Sie läuft nur, wenn die lokale mooTools-Version geladen ist. Auch bei CDN mit lokalem Feedback läuft calendarfield nicht.

Viele Grüße
Schmidty

@do_while das Problem liegt hier:

PHP-Code:

---

<script>
<?php if(strlen($GLOBALS['EASYZOOM']['easyopts']) > 0): ?>
  var $easyopts = { <?php echo $GLOBALS['EASYZOOM']['easyopts']; ?> };
  var $easyzoom = $('.easyzoom').easyZoom($easyopts);
<?php else: ?>
  var $easyzoom = $('.easyzoom').easyZoom();
<?php endif; ?>
<?php if($GLOBALS['EASYZOOM']['thumbnails']): ?>
  var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
  $('.easyzoomthumbnails').on('click', 'a', function(e) {
    var $this = $(this);
    e.preventDefault();
    api1.swap($this.data('standard'), $this.attr('href'));
  });
<?php endif; ?>
<?php if($GLOBALS['EASYZOOM']['toogle']): ?>
  var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');
  $('.toggle').on('click', function() {
    var $this = $(this);
    if ($this.data("active") === true) {
        $this.text("Switch on").data("active", false);
        api2.teardown();
    } else {
        $this.text("Switch off").data("active", true);
        api2._init();
    }
  });
<?php endif; ?>
</script>

---

Du musst das korrekt wrappen, andernfalls kann man MooTools und jQuery nicht gleichzeitig einsetzen.

PHP-Code:

---

<script>
(function($)
{
  "use strict";
  <?php if(strlen($GLOBALS['EASYZOOM']['easyopts']) > 0): ?>
    var $easyopts = { <?php echo $GLOBALS['EASYZOOM']['easyopts']; ?> };
    var $easyzoom = $('.easyzoom').easyZoom($easyopts);
  <?php else: ?>
    var $easyzoom = $('.easyzoom').easyZoom();
  <?php endif; ?>
  <?php if($GLOBALS['EASYZOOM']['thumbnails']): ?>
    var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
    $('.easyzoomthumbnails').on('click', 'a', function(e) {
      var $this = $(this);
      e.preventDefault();
      api1.swap($this.data('standard'), $this.attr('href'));
    });
  <?php endif; ?>
  <?php if($GLOBALS['EASYZOOM']['toogle']): ?>
    var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');
    $('.toggle').on('click', function() {
      var $this = $(this);
      if ($this.data("active") === true) {
          $this.text("Switch on").data("active", false);
          api2.teardown();
      } else {
          $this.text("Switch off").data("active", true);
          api2._init();
      }
    });
  <?php endif; ?>
})(jQuery);
</script>

---

Außerdem sollte der Code doch auch lieber erst ausgeführt werden, wenn der DOM fertig geladen ist, oder nicht?

PHP-Code:

---

<script>
(function($)
{
  "use strict";
  $(document).ready(function()
  {
    <?php if(strlen($GLOBALS['EASYZOOM']['easyopts']) > 0): ?>
      var $easyopts = { <?php echo $GLOBALS['EASYZOOM']['easyopts']; ?> };
      var $easyzoom = $('.easyzoom').easyZoom($easyopts);
    <?php else: ?>
      var $easyzoom = $('.easyzoom').easyZoom();
    <?php endif; ?>
    <?php if($GLOBALS['EASYZOOM']['thumbnails']): ?>
      var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
      $('.easyzoomthumbnails').on('click', 'a', function(e) {
        var $this = $(this);
        e.preventDefault();
        api1.swap($this.data('standard'), $this.attr('href'));
      });
    <?php endif; ?>
    <?php if($GLOBALS['EASYZOOM']['toogle']): ?>
      var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');
      $('.toggle').on('click', function() {
        var $this = $(this);
        if ($this.data("active") === true) {
            $this.text("Switch on").data("active", false);
            api2.teardown();
        } else {
            $this.text("Switch off").data("active", true);
            api2._init();
        }
      });
    <?php endif; ?>
  });
})(jQuery);
</script>

---

@Schmidty bis das in der Extension behoben ist könntest du dir dein eigenes j_easyzoom Template anlegen und folgenden Inhalt einfügen:

PHP-Code:

---

<?php

// Add the colorbox style sheet
$GLOBALS['TL_CSS'][] = 'system/modules/easyzoom/vendor/easyzoom/css/easyzoom.min.css|static';

?>

<script src="system/modules/easyzoom/vendor/easyzoom/js/easyzoom.min.js"></script>
<script>
(function($)
{
  "use strict";
  $(document).ready(function()
  {
    <?php if(strlen($GLOBALS['EASYZOOM']['easyopts']) > 0): ?>
      var $easyopts = { <?php echo $GLOBALS['EASYZOOM']['easyopts']; ?> };
      var $easyzoom = $('.easyzoom').easyZoom($easyopts);
    <?php else: ?>
      var $easyzoom = $('.easyzoom').easyZoom();
    <?php endif; ?>
    <?php if($GLOBALS['EASYZOOM']['thumbnails']): ?>
      var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
      $('.easyzoomthumbnails').on('click', 'a', function(e) {
        var $this = $(this);
        e.preventDefault();
        api1.swap($this.data('standard'), $this.attr('href'));
      });
    <?php endif; ?>
    <?php if($GLOBALS['EASYZOOM']['toogle']): ?>
      var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');
      $('.toggle').on('click', function() {
        var $this = $(this);
        if ($this.data("active") === true) {
            $this.text("Switch on").data("active", false);
            api2.teardown();
        } else {
            $this.text("Switch off").data("active", true);
            api2._init();
        }
      });
    <?php endif; ?>
  });
})(jQuery);
</script>

---

Hallo Spooky,

vielen Dank für die Änderungsanregungen. Ich werde das kurzfristig übernehmen.

Ich stecke in JavaScript, Mootools und jQuery nicht so tief drin, da bin ich sehr froh, dass Du da Verbesserungen und Korrekturen gefunden hast.
Die aktualisierte Version in Kürze ...

Ich wünsche Euch schon mal ein schönes Weihnachtsfest.

EDIT:
Die neue Version 1.1.0 steht im ER2 bereit: https://contao.org/de/erweiterungsli.../easyzoom.html
Im Composer braucht es immer ein bisschen mehr Zeit.

Hallo Zusammen,

ich möchte/muss auf einer Seite mehrere Galerien anzeigen. Bei easyzoom wird bei mir bisher das angeklickte Miniaturbild immer nur im großen Bildbereich der ersten Galerie angezeigt.

Lässt sich das irgendwie einstellen bzw. mit einem JS-Objekt so trennen, dass jeder Galeriebereich auf der Seite für sich funktioniert?

Danke für Hilfe

easyzoom ist vor 5 Jahren für Contao 3 entstanden. Für Contao 4 gibt es bisher, soweit ich weiß, keine Erweiterung.

Zitat:

---

Zitat von do_while

easyzoom ist vor 5 Jahren für Contao 3 entstanden. Für Contao 4 gibt es bisher, soweit ich weiß, keine Erweiterung.

---

Dank Dir für die Info aber das beantwortet nicht meine Frage und außerdem benutze ich noch contao 3.5.40.
Gibt es also für die Version 3 die Möglichkeit?

LG

Ich tippe mal drauf, dass dieses Anzeigefeld eine CSS-ID hat, die sich bei den anderen Galerien wiederholt. Das gibt zum Einen einen Conformance-Fehler, da IDs nicht mehrfach vorkommen dürfen, zum Anderen wird das Javascript dann immer nur das erste Vorkommen verwenden und dort die Vergrößerung eintragen.

Um das zum Laufen zu bekommen, müsste man sicherlich die ID einheitlich machen, z.B. durch die Erweiterung mit der Contentelement-ID, und man müsste das Javascript soweit anpassen, dass es von der individuellen ID Kenntnis hat und entsprechend dort auch die Vergrößerung bedient.

Ob sich irgendwelche Anpassungen für eine Contao-Version 3.5, die seit über 1,5 Jahren nicht mehr supportet wird noch wirklich lohnen?
Spätestens mit PHP 8 ist dann wahrscheinlich nicht nur aus Sicherheitsgründen Schicht im Schacht.