Abschnittsübersicht

    • 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
      Beispielbild

      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);