Widget:GOV-Test

Ajax-Variante mit wiki

<script>

   const serverBaseURL = "https://gov.genealogy.net";

        .then(response => response.text())
       .then(html => {
           const tempDiv = document.createElement('div');
           tempDiv.innerHTML = html;

           // Anpassung relativer URLs
           const links = tempDiv.querySelectorAll('a[href^="/"]');
           links.forEach(link => {
               link.href = serverBaseURL + link.getAttribute('href');
           });
           const images = tempDiv.querySelectorAll('img[src^="/"]');
           images.forEach(img => {
               img.src = serverBaseURL + img.getAttribute('src');
           });

           // Grafik ersetzen und Zoom-Wrapper hinzufügen
           const zoomImage = tempDiv.querySelector('td a[href*="relationshipGraph"] img');
           if (zoomImage) {
               const wrapper = document.createElement('div');
               wrapper.className = 'zoomable';
               zoomImage.parentElement.replaceWith(wrapper);
               wrapper.appendChild(zoomImage);

               // Initiales Zoom-Level setzen
               zoomImage.dataset.scale = 1;
           }

           document.getElementById('content').innerHTML = tempDiv.innerHTML;
       })
       .catch(error => console.error('Error loading content:', error));

   // Zoom mit STRG + Mausrad
   document.addEventListener('wheel', (event) => {
       if (event.ctrlKey) {
           const zoomable = document.querySelector('.zoomable img:hover');
           if (zoomable) {
               const scale = parseFloat(zoomable.dataset.scale || 1);
               const newScale = event.deltaY < 0 ? scale * 1.1 : scale / 1.1;
               zoomable.style.transform = `scale(${newScale})`;
               zoomable.dataset.scale = newScale;
               event.preventDefault(); // Standardverhalten verhindern
           }
       }
   });

</script>

<style>

   /* Zoomable Styles */
   .zoomable {
       position: relative;
       display: inline-block;
       overflow: hidden;
       max-width: 100%;
       cursor: grab;
   }

   .zoomable img {
       transition: transform 0.3s ease;
       width: 100%;
       height: auto;
   }

   .zoomable img:hover {
       cursor: zoom-in;
   }

</style>

Variante: responsiv mit

<style>

   body {
     margin: 0;
     padding: 0;
     font-family: Arial, sans-serif;
   }

   .iframe-container {
     width: 100%; /* Container hat immer die volle Breite des Viewports */
     position: relative; /* Wichtig für absolute Positionierung */
     padding-top: 56.25%; /* Seitenverhältnis 16:9 */
  
   }

   iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100vw; /* Breite des Viewports */
     height: calc(100vw * 0.5625); /* Höhe proportional zur Breite (16:9) */
     transform-origin: top left; /* Skalierung startet oben links */
   }

   /* Media Queries für kleinere Bildschirme */
   @media (max-width: 768px) {
     iframe {
       transform: scale(0.9); /* Skaliere den iframe-Inhalt */
     }
   }

   @media (max-width: 480px) {
     iframe {
       transform: scale(0.8); /* Weitere Skalierung für kleine Geräte */
     }
   }
 </style>