moziloCMS Supportforum

moziloCMS => Hier klemmt es! => Thema gestartet von: bemerkenswelt am 10. Dezember 2016, 23:31:22

Titel: Vorschaubilder in PhotoSwipe
Beitrag von: bemerkenswelt am 10. Dezember 2016, 23:31:22
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
Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag von: Aggi am 11. Dezember 2016, 14:30:50
Hei,


.thumbnail {

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

}


mfg
Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag von: bemerkenswelt am 11. Dezember 2016, 17:22:23
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;
              }

Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag von: Aggi am 11. Dezember 2016, 19:57:16
Du musst  max-width:100px; auf deine gewünschte Größe anpassen...
Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag von: bemerkenswelt am 11. Dezember 2016, 20:06:17
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.
Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag von: Aggi am 11. Dezember 2016, 20:18:04
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
Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag von: bemerkenswelt am 11. Dezember 2016, 20:36:45
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)
Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag von: bemerkenswelt am 11. Dezember 2016, 20:50:21
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.
Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag von: djr am 11. Dezember 2016, 21:19:34
@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.
Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag von: bemerkenswelt am 11. Dezember 2016, 21:26:58
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.
Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag von: djr am 11. Dezember 2016, 22:48:27
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.
Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag 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.
Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag von: Aggi am 12. Dezember 2016, 16:21:47
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...
Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag von: bemerkenswelt am 12. Dezember 2016, 17:20:11
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.
Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag von: marusti am 12. Dezember 2016, 17:27:09
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%.
Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag von: Aggi am 12. Dezember 2016, 17:36:03
Hei,

bei zeile 129 in der index.php im PhotoSwipe Verzeichnis

die Zahl ändern    $picsperrow = 4; 1, 2 oder 3 ergibt die Spalten
Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag von: bemerkenswelt am 12. Dezember 2016, 18:00:41
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.
Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag von: djr am 12. Dezember 2016, 22:24:50
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:
Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag von: bemerkenswelt am 12. Dezember 2016, 22:46:35
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.
Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag von: bemerkenswelt am 12. Dezember 2016, 23:30:44
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.

Titel: Re: Vorschaubilder in PhotoSwipe
Beitrag von: bemerkenswelt am 13. Dezember 2016, 11:32:52
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)