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
Hei,
.thumbnail {
width:100%;
max-width:100px;
}
mfg
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;
}
Du musst max-width:100px; auf deine gewünschte Größe anpassen...
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.
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
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 > (http://bemerkenswelt.de/test/test.html)
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.
@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.
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 > (http://bemerkenswelt.de/REISEN/Griechenland_02.html)
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.
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.
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.
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...
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 > (http://bemerkenswelt.de/test/test.html))
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.
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%.
Hei,
bei zeile 129 in der index.php im PhotoSwipe Verzeichnis
die Zahl ändern $picsperrow = 4; 1, 2 oder 3 ergibt die Spalten
Zitat von: Aggi am 12. Dezember 2016, 17:36:03
bei zeile 129 in der index.php im PhotoSwipe Verzeichnis
die Zahl ändern $picsperrow = 4; 1, 2 oder 3 ergibt die Spalten
Schön, aber das wirkt sich dann auf sämtliche Galerien der Website aus, denke ich.
Kann ich nicht brauchen.
Ich muss das als Parameter auf Einzelseiten eingeben können.
Alle anderen Galerien sollen nach wie vor mit 4 Thumbs pro Reihe angezeigt werden.
Zitat von: bemerkenswelt am 11. Dezember 2016, 23:02:42
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.
In die PhotoSwipe/plugin.css-Datei einfügen:
.gallerytable {
table-layout: fixed;
}
.gallerytable .gallerytd {
display: none;
width: auto !important;
}
.gallerytable .gallerytd[style] {
display: table-cell;
}
.gallerytable .thumbnail {
width: auto;
}
Getestet auf:
- http://bemerkenswelt.de/test/test.html (http://bemerkenswelt.de/test/test.html)
- http://bemerkenswelt.de/AUSFLUG/Alt%20Kaiserswerth.html (http://bemerkenswelt.de/AUSFLUG/Alt%20Kaiserswerth.html) - hier ändert sich durch das neue CSS optisch nichts.
SUUUUPERSENSATIONELL!!!
Es funktioniert tatsächlich!
Vielen, Vielen Dank, damit hast Du mir ein tolles Weihnachtsgeschenk gemacht.
Ein Glück, dass es hier im Forum echte, hilfsbereite, Profis gibt.
Jetzt werde ich mal an die Stellen drangehen, an denen ich das einsetzen möchte.
Zum Beispiel beim Bericht von der Griechenlandreise (http://bemerkenswelt.de/REISEN/Griechenland_02.html).
Bis jetzt ist das noch ColorBox, also nicht responsiv und ohne Wischgesten.
Ich könnte mich überschlagen vor Freude, wenn das so auch mit PhotoSwipe klappt.
In einer Stunde wissen wir mehr.
Danke.
Habe umgestellt und es funktioniert wunderbar!
Das Ergebnis ist hier zu sehen >
(http://bemerkenswelt.de/REISEN/Griechenland.html)
Damit habe ich bei Verwendung von PhotoSwipe wieder mehr Möglichkeiten eine Seite zu gestalten.
Wir sollten Arvid bitten, den Code in die plugin.css zu übernehmen.
Es macht das Plugin flexibler.
Super.
Vielen Dank.
Hier nochmal ein kleines Beispiel, warum mir diese Funktion so wichtig war.
Jetzt lassen sich zum Beispiel auch seitenbreite Bilder per PhotoSwipe einbinden.
Wie hier, das Bild der alten Spinnerei > (http://bemerkenswelt.de/AUSFLUG/SinnesWald%20in%20Leichlingen.html)