Shutter/Modal ein- und ausblenden

Erweiterungen
Post Reply
Gonzo Gates
Posts: 185
Joined: Thu 19. Jan 2023, 21:46

Shutter/Modal ein- und ausblenden

Post by Gonzo Gates »

Hallo Gemeinde,

ich habe ja schon aus dem Forum gelernt, dass man Bilder mit <a class="shutter" ....><img ...></a> einbinden kann, aber...

In einer älteren statischen Seite habe ich mehrere JS-Schnipsel zusammengeführt, dass sich ein modales Bild langsam einblendet und bei 'Klick' (egal wohin) wieder langsam ausblendet.

In 'Fotopro' habe ich die langsame Einblendung in 'CMSroot/plugins/fotopro/css/stylsheet.css' dann geschafft.

Hier meine Änderungen:

Code: Select all

@keyframes zoom { /* DOR: Entnommen von Blindtexte_spielwiese_modal_popup_neu/css/modal_popup_blindtext.css */
  from {transform:scale(0)} to {transform:scale(1)}
}
@keyframes zoom_out { /* DOR: hinzugefuegt fuer Bild ausblenden, hat aber einen komischen Effekt gebracht und nix kaputt gemacht */
  from {transform:scale(1)} to {transform:scale(0)}
}

div#shShutter
.............

background: rgba(51,51,51, .5); /* DOR: grosses bild hintergrund - #333 */
opacity: 0.7;  /*DOR: hier wird der abgedunkelte hintergrund heller - doppeltes moppelchen: bei 'background' rgba() angegeben'! */
transition: opacity .5s; /* DOR: Bild schneller einblenden */
animation-name: zoom; /* DOR: Entnommen von Blindtexte_spielwiese_modal_popup_neu/css/modal_popup_blindtext.css, '@keyframes zoom' gehoert dazu . Shutter macht sich von unten nach oben-aussen auf, nicht wie im JS von innen nach aussen!*/
animation-duration: 0.6s; /* DOR: einblendung besser als 0.8s; Entnommen von Blindtexte_spielwiese_modal_popup_neu/css/modal_popup_blindtext.css */

div#shNavBar
............

background: #444;

#shImage
........

animation-name: zoom; /* DOR: hinzugefuegt und geschafft!!! Bild wird von innen nach aussen eingeblendet - CHACKA!!! */
animation-duration: 2.5s; /* DOR: hinzugefuegt und geschafft!!! Bild wird von innen nach aussen eingeblendet - CHACKA!!! */

img#shTopImg
............

padding: 6px; /* DOR: hinzugefuegt, Abstand modales Bild zum aeussern Rand */
border: 3px solid #710; /* DOR: border ist jetzt gut so, farbe wie hintergrund Ticker. gleicher effekt. #930 sieht heller aus */
box-shadow: 0 0 15px #710; /* DOR: hinzugefuegt, schatten drumherum, farbe wie hintergrund Ticker. gleicher effekt. #930 sieht heller aus */
border-radius: 0 24px 24px 0; /* DOR: hinzugefuegt, ecken rechts sind jetzt rund */
/* animation-name: zoom_out; DOR hinzugefuegt und klappt, aber der Effekt ist ...hm... komisch! */
/*animation-duration: 4s;  DOR hinzugefuegt und klappt, aber der Effekt ist ...hm... komisch! */

div#shTitle
...........

background: #444;
font-family: SpecialElite, NormalFraktur, arial, sans-serif; /* DOR: hier NormalFraktur als schrift eingefuegt. Am anfang als '@font-face' eingebunden. */
font-size: 24px; /* DOR: Beschriftung groesser */
font-weight: 550; /* DOR: entweder 500 oder 600. dazwischen is nix */
padding: 15px 12px 12px 12px; /* DOR: abstand beschriftung bild oben hoeher */
animation: opacity05 1s; /* DOR: Hintergrund wird von innen nach aussen eingeblendet - CHACKA!!! */
Dann bin ich in 'CMSroot/plugins/fotopro/shutter/shutter_mobile.js' auf die Funktion 'shCloseShutter()' gestoßen und das '...style.opacity = '0';' ging mir schon immer auf den Keks. (Apropos auf den Keks: Ich habe da noch ein paar Sachen bzgl CMSimple, aber die passen jetzt nicht hierhin)

Darin habe ich folgendermaßen rumgewekelt, damit sich das Bild wieder langsam verabschiedet:

Code: Select all

  // DOR: Ausblenden geoeffnetes Bild mit shutter 
	function shCloseShutter() 
	{
    // DOR: Original
    //--------------
    
    //document.getElementById('shTopImg').style.opacity = '0';
    //document.getElementById('shShutter').style.opacity = '0';
    //document.getElementById('shImage').style.opacity = '0';
    //document.getElementById('shTitle').style.opacity = '0';
    //document.getElementById('shNavBar').style.opacity = '0';
    //setTimeout (function() 
		//{
		//	shutterMobile.hideShutter();
		//},510);

    // DOR: Angepasst...so lala
    //-------------------------
    // 'zoom_out' ist in 'fotopro/css/stylesheets.css' als '@keyframes zoom_out {from {transform:scale(1)} to {transform:scale(0)}}' definiert. Konstante sind individualisiert. 
    
		//document.getElementById('shTopImg').style.transform = 'translate(1,0)';
    //document.getElementById('shTopImg').style.animation = 'zoom_out .5s';  DOR: Bloss nicht aktivieren! Das gibt 2x zoom_out
		document.getElementById('shTopImg').style.transition = 1200; //DOR: rattenegal, was ich hier eintrage
    // DOR: shSutter ausblenden
		//document.getElementById('shShutter').style.transform = 'translate(1,0)';
    //document.getElementById('shShutter').style.animation = 'zoom_out 2s';
    // DOR: entnommen von 'https://developer.mozilla.org/en-US/docs/Web/API/Element/animate' und angepasst
    // Der modale Hintergrund kommt mit der Drehung nicht klar...
    const modal_weg0 = [ 
    //{ transform: 'rotate(0) scale(1)' }, /* DOR: von aussen nach innen weg rechts drehend ausblenden */
      { transform: 'scale(1)' }, /* DOR: nach innen ausblenden */
      //{ transform: 'rotate(360deg) scale(0)' } /* DOR: von aussen nach innen weg rechts drehend ausblenden */
      { transform: 'scale(0)' } /* DOR: nach innen ausblenden */
    ];
    const ModalTiming0 = {
		duration: 1480, // DOR: Wert von 2000 auf 1500 reduziert, weil es zeitlich besser passt. -> Modal einblenden zu Modal ausblenden
		iterations: 1
    }
    const mach_zu0 = document.getElementById('shShutter'); //DOR: das hat gewirkt, richtiger Selector, aber 'modal' kommt wieder hoch, wenn nicht 'SetTimeout' ausgeloest wird
    mach_zu0.addEventListener('click', () => {
      mach_zu0.animate(modal_weg0, ModalTiming0);
    });
    //document.getElementById('shImage').style.transform = 'translate(1,0)';
    // DOR: shImage ausblenden
    //  DOR: entnommen von 'https://developer.mozilla.org/en-US/docs/Web/API/Element/animate'
    const modal_weg1 = [ 
    //{ transform: 'rotate(0) scale(1)' }, /* DOR: von aussen nach innen weg rechts drehend ausblenden */
      { transform: 'scale(1)' }, /* DOR: nach innen ausblenden */
      //{ transform: 'rotate(360deg) scale(0)' } /* DOR: von aussen nach innen weg rechts drehend ausblenden */
      { transform: 'scale(0)' } /* DOR: nach innen ausblenden */
    ];
    const ModalTiming1 = {
		duration: 1500, // DOR: Wert von 2000 auf 1500 reduziert, weil es zeitlich besser passt. -> Modal einblenden zu Modal ausblenden
		iterations: 1
    }
    const mach_zu1 = document.getElementById('shImage'); //DOR: das hat gewirkt, richtiger Selector, aber 'modal' kommt wieder hoch, wenn nicht 'SetTimeout' ausgeloest wird
    mach_zu1.addEventListener('click', () => {
      mach_zu1.animate(modal_weg1, ModalTiming1);
    });
    //document.getElementById('shImgage').style.animation = 'zoom_out 4s';
		//document.getElementById('shTitle').style.transform = 'translate(1,0)';
		document.getElementById('shTitle').style.animation = 'zoom_out 1.5s';
		//document.getElementById('shNavBar').style.transform = 'translate(1,0)';
		document.getElementById('shNavBar').style.animation = 'zoom_out 1.5s';
		setTimeout (function() 
		{
			shutterMobile.hideShutter();
		},1480); // DOR: 20 ms vor 'ModalTiming' auausloesen, damit kein 'flackern' entsteht
		// DOR: man kann bei dieser implementaton nicht irgendwo hinklicken und das Modal schließt sich. Bei meiner JS implementierung ist es so...schade...wahrscheinlich rotzt mir lightbox dazwischen...
	}
Richtig zufrieden bin ich mit der Lösung noch nicht, denn 'shShutter' dreht sich nicht.

Hat jemand eine Idee, wie es besser geht?

Gruß
Gonzo
Ich kenne keinen Sysadmin oder Programmierer, der sich noch nie ins Knie geschossen hat :!:
Post Reply