Ich hätte da gerne mal ein Problem...
Wenn ich in einer Seite mehrere Bilder mit 'class="shutter"' habe und ich klick auf Bild unten und dann auf Bild oben scrollt die Seite wieder nach unten, aber stellt mir in beiden Fällen das modale Bild dar. Ich möchte aber nicht, dass die Seite im Hintergrund von sich aus nach unten scrollt. Leider kommtes auch vor, dass wenn ich ein Bild oben aufrufe, es schließe und dann ein Bild unten auf der Seite aufrufe, dass der Hintergrund (Die Seite) nach oben scrollt.
Wie gut, dass ich einen 'Scroll-To-Top'-Button habe
Offenbar muss ich noch, wie in einer anderen Seite, einen 'Scroll-To_Bottom'-Button einbauen.Habe ich eine Seite mit nur einem Bild mit 'class="shutter"', passiert es nicht.
Änderungen in 'CMSroot/plugins/fotopro/css/stylesheet.css'
Code: Select all
/*
===================================
SHUTTER MOBILE / Hintergrund bei Thumb OnClick
===================================
*/
div#shShutter {
border: 0px solid #060;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: #000;*/
background: rgba(51,51,51, .5); /* DOR: grosses bild hintergrund - #333 */
padding: 0;
margin: 0 auto;
z-index: 1000;
/*opacity: 0.86; */
opacity: 0.7; /*DOR: hier wird der abgedunkelte hintergrund heller - doppeltes moppelchen: bei 'background' rgba() angegeben'! */
/*transition: opacity 1s;*/
/*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: .8s; /* DOR: einblendung besser als 0.8s; Entnommen von Blindtexte_spielwiese_modal_popup_neu/css/modal_popup_blindtext.css */
}
/* Navigation */
div#shNavBar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 28px;
/*background: #000; DOR: Hintergrund obere Leiste bei Vollbild */
background: #444;
/*color: #000;*/
color: #000;
font: normal 16px arial, sans-serif;
padding: 0 0 9px 0;
margin: 0 auto;
text-align: center;
/*opacity: 0.8;*/
opacity: 0.8;
animation: opacity08 1s;
z-index: 1020;
}
/* big image / grosses Bild */
#shImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: transparent;
border: 0px solid #c60;
margin: 40px 0 0 0;
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!!! */
}
@keyframes zoom { /* DOR: Entnommen von Blindtexte_spielwiese_modal_popup_neu/css/modal_popup_blindtext.css */
from {transform:scale(0)} to {transform:scale(1)}
}
/*#shImage:target { DOR: hinzugefuegt fuer Bild ausblenden, hat aber nix gebracht und kaputt gemacht
display: block;
animation-name: zoom_out;
animation-duration: 5.5s;
}*/
#shImage img { /* DOR: der Heini macht ueberhaupt NIX! */
max-width: none!important;/**/
/*display: block;
animation-name: zoom_out;
animation-duration: 5.5s;
animation-name: zoom; DOR: Entnommen von Blindtexte_spielwiese_modal_popup_neu/css/modal_popup_blindtext.css. leider macht es nur der hintergrund - hier klappts nicht, aber oben */
/*animation-duration: 1.5s; DOR: einblendung besser als 0.8s; Entnommen von Blindtexte_spielwiese_modal_popup_neu/css/modal_popup_blindtext.css - hier klappts nicht, aber oben */
}
img#shTopImg {
display: block;
box-sizing: border-box;
margin: 0 auto;
padding: 6px; /* DOR: hinzugefuegt, Abstand modales Bild zum aeussern Rand */
/*border: 1px solid #999; DOR: border bei grossem Bild*/
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: 10px; DOR: hinzugefuegt, ecken sind jetzt rund */
border-radius: 0 24px 24px 0; /* DOR: hinzugefuegt, ecken rechts sind jetzt rund */
opacity: 1;
animation: opacity08 1s;/**/
/* 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! */
z-index: 9000;
}
@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)}
}
/* short description / Bildbeschreibung im der Gallerie */
div#shTitle {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
/*background: #000; DOR: Hintergrund untere Leiste bei Vollbild */
background: #444;
/*color: #999;*/
color: #aaa;
font-family: SpecialElite, NormalFraktur, arial, sans-serif; /* DOR: hier NormalFraktur als schrift eingefuegt. Am anfang als '@font-face' eingebunden. Jetzt 'SpecialElite' ohne Einbindung */
/*font-size: 18px;*/
font-size: 24px; /* DOR: Beschriftung groesser */
/*line-height: 20px;*/
line-height: 22px;
/*font-weight: 500;*/
font-weight: 550; /* DOR: entweder 500 oder 600. dazwischen is nix */
text-align: center;
box-sizing: border-box;
/*padding: 4px 12px 12px 12px;*/
padding: 15px 12px 12px 12px; /* DOR: abstand beschriftung bild oben hoeher */
margin: 0;
opacity: 0.8;
animation: opacity05 1s; /* DOR: Hintergrund wird von innen nach aussen eingeblendet - CHACKA!!! */
}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.transform = 'translate(1,0), 4000'; // DOR: millisekunden hat nix gebracht, aber auch nix kaputt gemacht -> https://developer.mozilla.org/en-US/docs/Web/CSS/transform
//document.getElementById('shShutter').style.animation = 'zoom_out 2s'; DOR: Sutter wird nicht in die Mitte ausgeblendet, aber im Grunde klappt es...
// 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: 1280, // 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
}
In freudiger Erwartung
Gonzo
Etwas anderes: Als mir nichts mehr einfiel, wie ich meine Website/CMS runterrocken könnte, habe ich im Forum gestöbert. Dort bin ich auf folgenden Post gestoßen: https://cmsimple.org/forum/viewtopic.php?t=1230. Dort wird eine Website erwähnt, die jetzt in meiner Liste "Unmögliche Websites" Einzug erhalten hat.
