Kursthemen

• Allgemeines

  Alles einklappen Alles aufklappen
  • Image-Viewer in Moodle-Plugins umsetzen

    ---

    Image Viewer – Live-Demo

    Bildvorschau (Image Viewer) für Einstellungen & Kursseiten

    Dieser Image Viewer vergrößert Vorschaubilder per Klick – ideal, um Bilder in Moodle-Einstellungen oder auf Kursseiten schnell größer darzustellen. Du kannst beliebig viele Bilder verwenden: Einfach jedes Vorschaubild in einen .zoomable-image-Container legen.

    • Kein Framework notwendig – reines HTML/CSS/JS.
    • Öffnen per Klick auf das Vorschaubild, Schließen per × oder Klick auf den Hintergrund.
    • Responsiv (max. 90% Breite / 80vh Höhe im Modal).

    Beispiel: Zoombares Bild

    

    Klicke auf das Bild zum Vergrößern

    ×
  • Image Viewer – Code zum Kopieren

    Hier findest du den vollständigen Code (HTML, CSS, JS) sowie ein Beispiel für die Verwendung in settings.php.

    HTML / CSS / JS

    <!-- Zoombares Bild -->
    <div class="zoomable-image" style="max-width:220px; margin: 1rem auto;">
      <img src="https://via.placeholder.com/400x200.png?text=Vorschaubild"
           alt="Beispielbild"
           style="width:100%; height:auto; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.2); cursor:zoom-in;">
    </div>
    
    <!-- Modal -->
    <div id="imageModal" class="image-modal">
      <span class="image-modal-close">×</span>
      <img class="image-modal-content" id="modalImage" alt="">
    </div>
    
    <!-- CSS -->
    <style>
      .image-modal { display:none; position:fixed; z-index:2000; padding-top:60px;
        left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.8); }
      .image-modal-content { margin:auto; display:block; max-width:90%; max-height:80vh;
        border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.5); }
      .image-modal-close { position:absolute; top:20px; right:35px; color:#fff;
        font-size:40px; font-weight:bold; cursor:pointer; line-height:1; }
      .image-modal-close:hover { color:#ddd; }
    </style>
    
    <!-- JS -->
    <script>
    document.addEventListener("DOMContentLoaded", function() {
      const modal = document.getElementById("imageModal");
      const modalImg = document.getElementById("modalImage");
      const closeBtn = document.querySelector(".image-modal-close");
    
      document.querySelectorAll(".zoomable-image img").forEach(function(img) {
        img.addEventListener("click", function() {
          modal.style.display = "block";
          modalImg.src = this.src;
          modalImg.alt = this.alt || "";
        });
      });
    
      closeBtn.addEventListener("click", function() {
        modal.style.display = "none";
      });
    
      modal.addEventListener("click", function(e) {
        if (e.target === modal) {
          modal.style.display = "none";
        }
      });
    });
    </script>
    

    settings.php – Beispiel (ein Radio-Button mit Bild)

    /**
     * Beispiel: Ein Radio-Element mit Bild in den Plugin-Settings.
     * Der Image Viewer (oben) kann global im Theme/Plugin geladen werden.
     */
    
    // URL zum Vorschaubild.
    $imageurl = new moodle_url('/local/myplugin/pix/example.png');
    
    // Sammlung für die Formelemente der Gruppe.
    $groupt = [];
    
    // Öffnet den Container (Flex-Ausrichtung).
    $groupt[] = $mform->createElement('html', '<div class="d-flex align-items-center">');
    
    // Öffnet das innere Element (zentriert, mit Abstand).
    $groupt[] = $mform->createElement('html', '<div class="text-center m-2 imageradioelement">');
    
    // Öffnet das Label für das Radio-Element.
    $groupt[] = $mform->createElement('html', '<label class="form-check-inline form-check-label fitem">');
    
    // Erstellt das Radio-Element (Name: id).
    $groupt[] = $mform->createElement(
        'radio',
        'id',
        '',
        get_string('generalsettings_example_radio', 'local_myplugin'),
        0
    );
    
    // Schliesst das Label.
    $groupt[] = $mform->createElement('html', '</label>');
    
    // Fügt das Bild mit Zoom-Link hinzu (gleiche Klasse wie im Viewer-Beispiel).
    $groupt[] = $mform->createElement('html', '<a href="' . $imageurl->out() . '" class="zoomable-image" target="_blank">');
    $groupt[] = $mform->createElement('html', '<img src="' . $imageurl->out() . '" alt="Example Image" style="width: 190px; height: auto; display: block; margin-top: 5px;">');
    $groupt[] = $mform->createElement('html', '</a>');
    
    // Schliesst das innere Element.
    $groupt[] = $mform->createElement('html', '</div>');
    
    // Schliesst den Container.
    $groupt[] = $mform->createElement('html', '</div>');
    
    // Fügt die Gruppe dem Formular hinzu.
    $mform->addGroup(
        $groupt,
        'groupid',
        get_string('generalsettings_example_group', 'local_myplugin'),
        null,
        false
    );
    
    // Setzt den Standardwert für das Radio-Element.
    $mform->setDefault('id', 0);
    

  • 

    Ankündigungen Forum