forum.mozilo.de das Supportforummozilo Forum
Willkommen Gast. Bitte einloggen oder registrieren. Haben Sie Ihre Aktivierungs E-Mail übersehen?

Einloggen mit Benutzername, Passwort und Sitzungslänge

Autor Thema: Vorschaubilder in PhotoSwipe  (Gelesen 1423 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

 

Offline bemerkenswelt

  • Mitglied
  • *
  • Beiträge: 171
    • Profil anzeigen
    • http://www.bemerkenswelt.de
Vorschaubilder in PhotoSwipe
« 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
Schöne Grüße
Manfred

Besucht mich auf: www.bemerkenswelt.de
 

 

Offline Aggi

  • Mitglied
  • *
  • Beiträge: 16
  • Alles wird gut...
    • Profil anzeigen
Re: Vorschaubilder in PhotoSwipe
« Antwort #1 am: 11. Dezember 2016, 14:30:50 »
Hei,


.thumbnail {

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

}

mfg
Es ist noch kein Meister vom Himmel gefallen.
 

 

Offline bemerkenswelt

  • Mitglied
  • *
  • Beiträge: 171
    • Profil anzeigen
    • http://www.bemerkenswelt.de
Re: Vorschaubilder in PhotoSwipe
« Antwort #2 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;
              }

Schöne Grüße
Manfred

Besucht mich auf: www.bemerkenswelt.de
 

 

Offline Aggi

  • Mitglied
  • *
  • Beiträge: 16
  • Alles wird gut...
    • Profil anzeigen
Re: Vorschaubilder in PhotoSwipe
« Antwort #3 am: 11. Dezember 2016, 19:57:16 »
Du musst  max-width:100px; auf deine gewünschte Größe anpassen...
Es ist noch kein Meister vom Himmel gefallen.
 

 

Offline bemerkenswelt

  • Mitglied
  • *
  • Beiträge: 171
    • Profil anzeigen
    • http://www.bemerkenswelt.de
Re: Vorschaubilder in PhotoSwipe
« Antwort #4 am: 11. Dezember 2016, 20:06:17 »
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.
Schöne Grüße
Manfred

Besucht mich auf: www.bemerkenswelt.de
 

 

Offline Aggi

  • Mitglied
  • *
  • Beiträge: 16
  • Alles wird gut...
    • Profil anzeigen
Re: Vorschaubilder in PhotoSwipe
« Antwort #5 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
« Letzte Änderung: 11. Dezember 2016, 20:24:18 von Aggi »
Es ist noch kein Meister vom Himmel gefallen.
 

 

Offline bemerkenswelt

  • Mitglied
  • *
  • Beiträge: 171
    • Profil anzeigen
    • http://www.bemerkenswelt.de
Re: Vorschaubilder in PhotoSwipe
« Antwort #6 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 >
Schöne Grüße
Manfred

Besucht mich auf: www.bemerkenswelt.de
 

 

Offline bemerkenswelt

  • Mitglied
  • *
  • Beiträge: 171
    • Profil anzeigen
    • http://www.bemerkenswelt.de
Re: Vorschaubilder in PhotoSwipe
« Antwort #7 am: 11. Dezember 2016, 20:50:21 »
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.
Schöne Grüße
Manfred

Besucht mich auf: www.bemerkenswelt.de
 

 

Offline djr

  • Mitglied
  • *
  • Beiträge: 413
    • Profil anzeigen
Re: Vorschaubilder in PhotoSwipe
« Antwort #8 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.
 

 

Offline bemerkenswelt

  • Mitglied
  • *
  • Beiträge: 171
    • Profil anzeigen
    • http://www.bemerkenswelt.de
Re: Vorschaubilder in PhotoSwipe
« Antwort #9 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 >
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.
« Letzte Änderung: 11. Dezember 2016, 21:39:46 von bemerkenswelt »
Schöne Grüße
Manfred

Besucht mich auf: www.bemerkenswelt.de
 

 

Offline djr

  • Mitglied
  • *
  • Beiträge: 413
    • Profil anzeigen
Re: Vorschaubilder in PhotoSwipe
« Antwort #10 am: 11. Dezember 2016, 22:48:27 »
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.
 

 

Offline bemerkenswelt

  • Mitglied
  • *
  • Beiträge: 171
    • Profil anzeigen
    • http://www.bemerkenswelt.de
Re: Vorschaubilder in PhotoSwipe
« Antwort #11 am: 11. Dezember 2016, 23:02:42 »
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.
Schöne Grüße
Manfred

Besucht mich auf: www.bemerkenswelt.de
 

 

Offline Aggi

  • Mitglied
  • *
  • Beiträge: 16
  • Alles wird gut...
    • Profil anzeigen
Re: Vorschaubilder in PhotoSwipe
« Antwort #12 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...
Es ist noch kein Meister vom Himmel gefallen.
 

 

Offline bemerkenswelt

  • Mitglied
  • *
  • Beiträge: 171
    • Profil anzeigen
    • http://www.bemerkenswelt.de
Re: Vorschaubilder in PhotoSwipe
« Antwort #13 am: 12. Dezember 2016, 17:20:11 »
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.
Schöne Grüße
Manfred

Besucht mich auf: www.bemerkenswelt.de
 

 

Offline marusti

  • Mitglied
  • *
  • Beiträge: 95
    • Profil anzeigen
Re: Vorschaubilder in PhotoSwipe
« Antwort #14 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%.
« Letzte Änderung: 12. Dezember 2016, 17:30:57 von marusti »