Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

Vorschaubilder in PhotoSwipe

Begonnen von bemerkenswelt, 10. Dezember 2016, 23:31:22

« vorheriges - nächstes »

bemerkenswelt

Hallo allerseits.

Weiß vielleicht jemand wie ich in PhotoSwipe die Größe der Vorschaubilder beeinflussen kann?
Ich habe schon mal in der style.css gesucht, aber nichts gefunden.

Ich hätte gerne, dass Vorschaubilder in der Größe angezeigt werden, die ich beim Upload als Vorschaugröße einstelle.
Bei mir werden die aber immer auf eine Breite von 165px skaliert.

Schönen Sonntag.
Manfred

Aggi

Hei,


.thumbnail {

width:100%;
max-width:100px;

}


mfg
Es ist noch kein Meister vom Himmel gefallen.

bemerkenswelt

Vielen Dank,

aber genau das steht in der style.css schon drin, glaube ich.
Das Ganze sieht bei mir so aus:

/* Vorschaubilder der Fotogalerien /Thumbnails) */

        .thumbnail {
            width:100%;
            max-width:100%;
            margin:0;
            margin-bottom:3px;
            -webkit-box-shadow: 2px 2px 2px #999;
          -moz-box-shadow: 2px 2px 2px #999;
           box-shadow: 2px 2px 2px #999;
              }


Aggi

Du musst  max-width:100px; auf deine gewünschte Größe anpassen...
Es ist noch kein Meister vom Himmel gefallen.

bemerkenswelt

Zitat von: Aggi am 11. Dezember 2016, 19:57:16
Du musst  max-width:100px; auf deine gewünschte Größe anpassen...

Nö, so funktioniert das leider nicht.
Die gewünschte Größe ist ja immer die, in der ich das Vorschaubild habe generieren lassen.
Hat also immer eine andere Pixelzahl.

Außerdem habe ich mit diesen Werten mal rumgespielt und festgestellt, dass sie überhaupt keinen Einfluss auf die Anzeige haben. Die Thumbnails werden bei mir immer mit 165 Pixel Breite angezeigt, egal was ich reinschreibe.

Aggi

#5
Füge das mal in die plugin.css im PhotoSwipe Verzeichnis ein... max-width auf Bedürfnisse anpassen.

.thumbnail {
border:1px #999 solid;
padding:2px;
width:100%;
max-width:100px;
margin:0;
margin-bottom:4px;
-webkit-box-shadow: 2px 2px 2px #999;
-moz-box-shadow: 2px 2px 2px #999;
box-shadow: 2px 2px 2px #999;
}
     
.thumbnail:hover {
border:1px #5d5d5d solid;
padding:2px;
-webkit-box-shadow: 4px 4px 3px #5d5d5d;
-moz-box-shadow: 4px 4px 3px #5d5d5d;
box-shadow: 4px 4px 3px #5d5d5d;
}


P.S schau mal in den Quellcode deiner Webseite <head> ist falsch plaziert
Es ist noch kein Meister vom Himmel gefallen.

bemerkenswelt

Leider auch negativ.
Reaktion ist die Gleiche, wie in der style.css.

Das heißt: Die Werte für Schatten und Rahmen um die Thumbnails werden übernommen und angezeigt.
Die Größen werden nicht beeinflusst. Sie sind scheinbar noch irgendwo, an anderer Stelle, hinterlegt.

In der Galerie auf der Testseite habe ich die Thumbnails breiter generieren lassen, als sonst und möchte gerne, dass diese Breite auch angezeigt wird. Irgendwo wir das aber runterskaliert, wie man im Browser beim Klick auf "Graik-Info anzeigen (Firefox)" sehen kann.

Was mich etwas stutzig macht: Die Anzeigebreite von 165px entspricht genau der Standardbreite in der ich normalerweise meine Thumbnails generiere. Aber wie gesagt: Die Thumbnails auf der Testseite habe ich breiter gemacht.

Hier mal der Link zur Testseite >

bemerkenswelt

Zitat von: Aggi am 11. Dezember 2016, 20:18:04
P.S schau mal in den Quellcode deiner Webseite <head> ist falsch plaziert

Danke.
Ich hatte den Code für die Cookies-Meldung aus Versehen wohl vor den head-Bereich gesetzt.
Hat aber trotzdem funktioniert.
Und das andere, was jetzt noch vor <head> steht ist ohnehin auskommentiert.

djr

@bemerkenswelt:
Die Vorschaubilder sind so groß wie gewünscht. Z.B. hat das Vorschaubild von DSCF8981.JPG (Blume) die Maße 600px × 449px.
Das CSS greift auch.

Die Skalierung kommt daher, dass die Galerie 4 Vorschaubilder pro Zeile vorsieht und eine Tabelle mit 4 Spalten baut.
Im aktuellen Kontext ist ein Tabellenfeld 165px breit und das Bild durch seine 100%-Angabe eben auch.

bemerkenswelt

#9
Aha,
Wenn ich das richtig verstehe, dann kann ich das, was ich will, also nur mit einem Plugin erreichen, bei dem ich die Bildanzahl pro Reihe individuell bestimmen kann?

So wie ich es hier gemacht habe >
Dabei habe ich ColorBox benutzt, wo man "picsperrow=" angeben kann.
Wäre schön gewesen, ich hätte diesen Effekt irgendwie auch mit dem responsiven und wischgestenfreundlichen PhotoSwipe erreichen können.

djr

Zitat von: bemerkenswelt am 11. Dezember 2016, 21:26:58
Wenn ich das richtig verstehe, dann kann ich das, was ich will, also nur mit einem Plugin erreichen, bei dem ich die Bildanzahl pro Reihe individuell bestimmen kann?
Wenn Dich leere Tabellenfelder im Code nicht stören, kommst Du auch mit CSS an Dein Ziel.

bemerkenswelt

Zitat von: djr am 11. Dezember 2016, 22:48:27
Wenn Dich leere Tabellenfelder im Code nicht stören, kommst Du auch mit CSS an Dein Ziel.

Der Code ist mir ziemlich egal, wenn das Ergebnis stimmt.
Da ich CSS-Amateur bin, hilft mir die Antwort aber nicht weiter.
Da bräuchte ich schon mehr Info darüber, wo ich was eingeben muss.
Wenn das allerdings zu umfangreich ist, lohnt es die Mühe wahrscheinlich nicht.

Aggi

Hol das mal aus der style.css raus
* Vorschaubilder der Fotogalerien /Thumbnails) */

        .thumbnail {
            width:100%;
            max-width:100%;
            margin:0;
            margin-bottom:3px;
            -webkit-box-shadow: 2px 2px 2px #999;
          -moz-box-shadow: 2px 2px 2px #999;
           box-shadow: 2px 2px 2px #999;
              }


und füge das in die plugin.css ein

/* gallery */

.gallerytable {
  width:100%;
}

.gallerytable tr {
width:100%;
}

table.gallerytable {
border-collapse:collapse;
margin:0 auto;
   
}

.gallerytd {
color:#8a8a8a;
font-size:10px;
line-height:12px;
text-align:center;
vertical-align:top;
padding:10px 10px 5px 0;
}

.thumbnail {
border:1px #999 solid;
padding:2px;
width:100%;
max-width:100px;
margin:0;
margin-bottom:4px;
-webkit-box-shadow: 2px 2px 2px #999;
-moz-box-shadow: 2px 2px 2px #999;
box-shadow: 2px 2px 2px #999;
}
     
.thumbnail:hover {
border:1px #5d5d5d solid;
padding:2px;
-webkit-box-shadow: 4px 4px 3px #5d5d5d;
-moz-box-shadow: 4px 4px 3px #5d5d5d;
box-shadow: 4px 4px 3px #5d5d5d;
}


ist getestet und funktioniert...
Es ist noch kein Meister vom Himmel gefallen.

bemerkenswelt

Zitat von: Aggi am 12. Dezember 2016, 16:21:47
ist getestet und funktioniert...

Hallo Aggi,

vielen Dank für die Mühe, aber es funktioniert leider nicht. (siehe Testseite >)
Es wird nach wie vor die Reihe mit den vier Thumbnails von 165px nebeneinander gebaut.
Da müsste wohl irgendwo das gallerytable von vier auf eine Spalte gesetzt werden.

Ich denke, da musst Du auch nicht mehr weiter ausprobieren.
Das wird nur funktionieren, wenn PhotoSwipe erlaubt, in der Aufrufzeile, im Seitentext, einen Parameter für die Bildanzahl pro Zeile einzugeben. So ist PhotoSwipe aber leider (noch?) nicht programmiert.

Vielen Dank nochmal.

marusti

#14
Hallo bemerkenswelt,
in deiner HTML Datei steht folgendes, dadurch werden 4 Tabellenfelder nebeneinander angeordnet
<td class="gallerytd" style="width:25%;">

Zudem gibt es bei .thumbnail in der CSS jeweils max-width:100% und width:100%.