Contao-Camp 2024
Ergebnis 1 bis 19 von 19

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

  1. #1
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.612
    Partner-ID
    1081
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

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

  2. #2
    HaPe
    Gast

    Standard

    Hallo,

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

    Danke
    HaPe

  3. #3
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.612
    Partner-ID
    1081
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

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

  4. #4
    Contao-Fan Avatar von jscholtysik
    Registriert seit
    19.06.2009.
    Ort
    München
    Beiträge
    366

    Standard

    Oder direkt die Demos auf der EasyZoom-Seite anschauen:

    http://i-like-robots.github.io/EasyZoom/
    Joachim
    *** Kein Backup, kein Mitleid ***

  5. #5
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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
    Grüsse
    Bernhard


  6. #6
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.612
    Partner-ID
    1081
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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?

  7. #7
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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]
    Geändert von derRenner (04.10.2015 um 19:18 Uhr)
    Grüsse
    Bernhard


  8. #8
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.612
    Partner-ID
    1081
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  9. #9
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    DANKESCHÖN!
    klappt einwandfrei
    Grüsse
    Bernhard


  10. #10
    Contao-Nutzer Avatar von Schmidty
    Registriert seit
    06.06.2011.
    Ort
    Pforzheim
    Beiträge
    203

    Frage Probleme mit MooTools

    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

  11. #11
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.612
    Partner-ID
    1081
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  12. #12
    Contao-Nutzer Avatar von Schmidty
    Registriert seit
    06.06.2011.
    Ort
    Pforzheim
    Beiträge
    203

    Standard

    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

  13. #13
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.899
    Partner-ID
    10107

    Standard

    @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>
    Geändert von Spooky (24.12.2015 um 08:48 Uhr)

  14. #14
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.612
    Partner-ID
    1081
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    Geändert von do_while (24.12.2015 um 11:32 Uhr)

  15. #15
    Contao-Nutzer
    Registriert seit
    30.04.2010.
    Ort
    Balve
    Beiträge
    6

    Frage mehrere Galerien/Instanzen auf einer Seite?

    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

  16. #16
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.612
    Partner-ID
    1081
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

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

  17. #17
    Contao-Nutzer
    Registriert seit
    30.04.2010.
    Ort
    Balve
    Beiträge
    6

    Frage mehrere Galerien/Instanzen auf einer Seite?

    Zitat Zitat von do_while Beitrag anzeigen
    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

  18. #18
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.612
    Partner-ID
    1081
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  19. #19
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •