Hilfe, meine Galerie ist aus den Fugen geraten

HolgerGr

Ich hab's erst gerade eben bemerkt aber das Problem könnte schon etwas länger bestehen. Ich verwende als Galerie-Pluging amazin responsive rd gallery....allerdings nicht in der Urform. Weil die Galerie grayscale sein soll und nur auf onHover in Farbe und weil die opacity nicht stimmte, habe ich an den beiden Galerie-stylesheets ne Menge verändert...allerdings alles auskommentiert.

Nun stelle ich fest, dass die geöffneten Bilder aus dem Seitenverhältnis geraten. Alle Bilder scheinen mit fester Höhe und Breite angezeigt zu werden. Eigentlich sind sie auf with: calc(100%) eingestellt aber irgendwas scheint diese Einstellung zu überschreiben.

Nur...ich finde nicht, was.

http://bouwmeester-moebel.de
Problem entsteht beim Klick auf eines der Bilder. Das geöffnete Bild ist verzerrt. Besonders gut bei der Treppe zu sehen, da die Treppe im Hochformat aufgenommen ist und im Querformat angezeigt wird.

Hier mal die beiden veränderten stylesheets des Plugins

PHP

.rdgallery {
  margin: 0 auto;
}
.rdgallery figure {
  overflow: hidden;
  #background: #3085a3; /*Verändert für greyscale*/ 
  text-align: center;
  cursor: pointer;
  opacity: 0;
  margin: 0;
}
.rdgallery figure img {
  position: relative;
  display: block;
  #opacity: 0.8; /*verädert wegen greyscale*/
  
}
.rdgallery figure.rdgallery-thumbnail > img {
  max-width: none;
  height: 100%;
  
}
.rdgallery figure figcaption {
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.rdgallery figure figcaption:before,
.rdgallery figure figcaption:after {
  pointer-events: none;
}
.rdgallery figure figcaption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}
.rdgallery figure h2 {
  word-spacing: -0.15em;
  font-weight: 600;
  margin: 0;
  font-size: 22px;
  line-height: 1.5em;
  color: #FFFFFF;
}
.rdgallery figure h2 span {
  font-weight: 800;
}
.rdgallery figure p {
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
margin: 0;
    color: #FFFFFF;
}
.rdgallery figure p.icon-links {
  display: none;
}
.rdgallery figure p.icon-links a {
  text-decoration: none;
}
#rdgallery-lightbox-overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: #292929;
  z-index: 999;
}
.rdgallery-loader {
  position: relative;
  display: block;
  left: 50%;
  width: 4.33333em;
  height: 4.33333em;
  margin-left: -2.166665em;
  z-index: 100000;
  margin-bottom: 20px;
  margin-top: 20px;
}
.rdgallery-loader .rdgallery-loader-block {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  opacity: 0;
  width: 1em;
  height: 1em;
  background: #e1e1e1;
  -webkit-animation: show 1s step-end infinite alternate, pulse 1s linear infinite alternate;
  animation: show 1s step-end infinite alternate, pulse 1s linear infinite alternate;
}
.rdgallery-loader .rdgallery-loader-block:nth-child(1) {
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-animation-delay: 0.06s;
  animation-delay: 0.06s;
}
.rdgallery-loader .rdgallery-loader-block:nth-child(2) {
  margin-left: 1.66667em;
  -webkit-animation-delay: 0.48s;
  animation-delay: 0.48s;
}
.rdgallery-loader .rdgallery-loader-block:nth-child(3) {
  margin-left: 3.33333em;
  -webkit-animation-delay: 0.18s;
  animation-delay: 0.18s;
}
.rdgallery-loader .rdgallery-loader-block:nth-child(4) {
  margin-top: 1.66667em;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.rdgallery-loader .rdgallery-loader-block:nth-child(5) {
  margin-left: 1.66667em;
  margin-top: 1.66667em;
  -webkit-animation-delay: 0.12s;
  animation-delay: 0.12s;
}
.rdgallery-loader .rdgallery-loader-block:nth-child(6) {
  margin-left: 3.33333em;
  margin-top: 1.66667em;
  -webkit-animation-delay: 0.42s;
  animation-delay: 0.42s;
}
.rdgallery-loader .rdgallery-loader-block:nth-child(7) {
  margin-top: 3.33333em;
  -webkit-animation-delay: 0.36s;
  animation-delay: 0.36s;
}
.rdgallery-loader .rdgallery-loader-block:nth-child(8) {
  margin-left: 1.66667em;
  margin-top: 3.33333em;
  -webkit-animation-delay: 0.24s;
  animation-delay: 0.24s;
}
.rdgallery-loader .rdgallery-loader-block:nth-child(9) {
  margin-left: 3.33333em;
  margin-top: 3.33333em;
}
@-webkit-keyframes pulse {
  from,
  40% {
    background: #e1e1e1;
  }
  to {
    background: #c5c5c5;
  }
}
@-webkit-keyframes show {
  from,
  40% {
    opacity: 0;
  }
  41%,
  to {
    opacity: 1;
  }
}
@keyframes pulse {
  from,
  40% {
    background: #e1e1e1;
  }
  to {
    background: #c5c5c5;
  }
}
@keyframes show {
  from,
  40% {
    opacity: 0;
  }
  41%,
  to {
    opacity: 1;
  }
}

Alles anzeigen

und

PHP

/* Effects 3 CSS*/


figure.effect-3 {
  #background: #9e5406; /*Verändert wegen greyscale */
}
figure.effect-3 img {
  /*ausgeschaltet wegen greyscale */
  #opacity: 0.7;
  #-webkit-transition: opacity 0.35s;
 # transition: opacity 0.35s;
  /*Hinzugefügt wegen greyscale */
  filter: grayscale(1);
 -webkit-filter: grayscale(1);
 -moz-filter: grayscale(1);
 -o-filter: grayscale(1);
 -ms-filter: grayscale(1);
 
}
figure.effect-3 figcaption::before,
figure.effect-3 figcaption::after {
  position: absolute;
  top: 8%;
  right: 8%;
  bottom: 8%;
  left: 8%;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}
figure.effect-3 figcaption::before {
  border-top: 2px solid #fff;   /*Linienstärke von 1 auf 2 px hochgesetzt */
  border-bottom: 2px solid #fff; /*Linienstärke von 1 auf 2 px hochgesetzt */
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
}
figure.effect-3 figcaption::after {
  border-right: 2px solid #fff; /*Linienstärke von 1 auf 2 px hochgesetzt */
  border-left: 2px solid #fff; /*Linienstärke von 1 auf 2 px hochgesetzt */
  -webkit-transform: scale(1, 0);
  transform: scale(1, 0);
}
figure.effect-3 h2 {
  padding-top: 30%;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0, -20px, 0);
  transform: translate3d(0, -20px, 0);
}
figure.effect-3 p {
  padding: 20px 2.5em;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0, 20px, 0);
  transform: translate3d(0, 20px, 0);
}
figure.effect-3:hover img {
  #opacity: 0.8;  /*von 0.4 auf 0.8 hochgesetzt wegen greyscale*/
  filter: none;  /*greyscale filter aufgehoben beim hovern*/
}
figure.effect-3:hover figcaption::before,
figure.effect-3:hover figcaption::after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
figure.effect-3:hover h2,
figure.effect-3:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

Alles anzeigen

Ich glaube allerdings fast, dass es an meiner style.css liegt

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SirEctor

Da scheint einiges durcheinander. Ich würde es mal so versuchen:

CSS

figure.rdgallery-thumbnail.active {
    box-shadow: 0 0 0 !important;
}
.rdgallery-thumbnail.active img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: inline;
}

Einfach in die CSS schreiben.

HolgerGr

Erste Sahne! Das klappt. Danke Dir.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Hilfe, meine Galerie ist aus den Fugen geraten

Jetzt mitmachen!