Galerieprobleme - welche tut so wie sie soll???

[john doe]

Moin zusammen,

Ich hätte da gerne wieder mal ein Problem:
Grundsätzlich soll(en) auf einer Website eine (mehrere) Galerie(en) eingebaut werden. So weit so gut. Bisher auch (fast) alles getestete zum laufen gebracht: Swissknife, lytebox, visual lytebox.
Bedingung für die Galerie: Thumbs sollen in 200x200px Größe dargestellt werden; Vier jeweils nebeneinander, Abstand untereinander 40px (Quadratraster). Thumb nicht als verkleinerte Ansicht des Bildes, sondern so ungefähr ein 1:1-Ausschnitt.

Swissknife ist simpel und easy.
Aufbau wie gewuenscht problemlos realisierbar, Handling eigentlich fast schon genial... allerdings optisch jetzt nicht so die Sahne schlechthin.

Lytebox in etwa das selbe in Grün. Optische Anpassbarkeit etwas Mangelware.

Visual Lytebox waere der Mercedes. Optisch hervorragend anpassbar mit einem schönen Overlay-Effekt für die Thumbs! (Der sollte es schon sein...)

Das Problem?
Im Prinzip ganz einfach - wie bekommt man mit der Visual Lytebox die geforderte Optik hin? Bisher hab ich entweder das angestrebte Raster oder die Optik der VL.
Aber ich bekomme es nicht hin, dass mir die VL die Thumbs wie gewuenscht generiert, geschweige denn sie wie gewuenscht anordnet. Entweder geht das nicht oder ich bin dazu irgendwie zu d... nicht in der Lage.

Muss ich mich also entscheiden ob perfektes Raster mit 1:1-Thumbs oder willkürliches Raster und dafuer die gewünschte Galerieoptik???
Anders gefragt: Hat jemand zufällig eine Ahnung wie ich die Visual Lytebox dazu kriege die Thumbs so zu generieren wie ICH das gerne möchte, bzw mit selbstgebauten Thumbs die VL laufen zu lassen? (Aber dann eben mit dem Overlay-Effekt :-) ) So wie hier: http://visuallightbox.com/lightbox-for-photo-android-demo.html
Oder gibt es eventuell eine Möglichkeit, Swissknife um den Overlay zu erweitern???
Hab momentan den Kopf komplett voller Fragezeichen...

Irgend jemand, der da eventuell weiterhelfen könnte, kann, möchte???
Wäre wirklich sehr nett. Bei Fragen bitte fragen - wenn irgend etwas an meiner Erklärung nicht genau genug sein sollte...

Herzlichen Dank für jedwede Bemühung bereits im Voraus!

Grüße, John.

[Tao]

Hallo John!

Also meiner Meinung nach kannst du mit keinem der von dir genannten - und auch mit keinem mir bekannten Programm - Thumbnails aus einem gewünschten Ausschnitt erstellen lassen.
Diese kannst du vermutlich nur in manueller Handarbeit erstellen und gegen die Thumbnails in den jeweiligen Ausgabeordnern ersetzen. Damit sind sie dann natürlich zu sichern bzw. gegen das versehentliche Überschreiben zu schützen.

Das Raster den Thumbnail-Ansicht kannst du in der Visual Lytebox zumindestens in der Spalten-Anzahl dauerhaft einstellen.

Der vertikale Abstand der Thumbnails ist über den Margin-Wert in der ausgegeben CSS-Datei manuell editierbar. Dieser Wert wird dir aber bei jeder neuen Veröffentlichung aus der VLB heraus überschrieben und sollte also auf dem Server gesichert bzw, unverändert gelassen werden.

Vermutlich wäre eine Abänderung des vertikalen Standard-Abstands in der entsprechenden Template-Datei des jeweiligen VLB-Styles möglich, habe ich aber noch nie ausprobiert.

Ob die genannte Vorgehensweisen praktikabel sind, hängt sicherlich mit davon ab, wie oft und in welchem Umfang du Änderungen an der Bildergalerie vornehmen willst.

LG

[john doe]

Hallo Panda,

Danke für die Antwort.
Einige Stunden testen später kann ich schon mal festhalten, dass das mit dem Ersetzen der Thumbs in der Visual Lightbox durch eigene erstellte geht. Da die Galerien nicht allzu umfangreich sind ist das auch noch halbwegs praktikabel und die gewünschte Optik wird erreicht.

Ein anderes Problem ist die Einfügung ins Layout - der 'Margin'-Wert in der VL-CSS steuert sowohl den vertikalen, als auch den horizontalen Abstand. Allerdings stimmt der nur vertikale pixelgenau, bei horizontalen sind es immer fünf oder sechs Pixel mehr und das treibt mich langsam in de Wahnsinn, weil ich nicht begreife wo die herkommen...
Ich halte mein Raster so jedenfalls nie ein, die Breite ist nicht wirklich steuerbar.

Das einzige was mir im Moment dazu noch einfällt ist das manuelle platzieren der Thumbs im Layout und dann jeweils den VLB-Aufruf manuell ins HTML der einzelnen Thumbs reinkopieren.
Wer schön sein will muss anscheinend leiden.

Oder hat jemand noch irgend eine Idee, wie sich der Abstand in den VLB-Dateien so einstellen lässt wie man es braucht???
Dat muss doch irgendwie - oder?

Grüße, John.

[nettesekel]

Lade dir mal den Web Developer für FF und installiere ihn... mit einem Rechtsklick auf die Seite und der Auswahl Web Developer>>CSS>>CSS bearbeiten, erhältst du die Möglichkeit in Echtzeit in den verwendeten Styledateien zu editieren und die daraus resultierenden Änderungen direkt auf deiner Website nachzuvollziehen. So kommt man derartigen Problemen am besten auf die Schliche.

[Tao]

Hallo John!

Schon mal probiert dem Margin-Wert zu splitten?

margin-top:40px;
margin-left:37px;

[john doe]

Hallo zusammen,

Jep. danke.
Schon alles durchforstet. Hab das 'Problem' noch nicht entdeckt...

Selbst die nackte Galerie aus VLB macht horizontal immer ein paar Pix Abstand, auch wenn die margin auf 0 steht, egal ob links, rechts oder beide. Vertikal perfekt einstellbar.
Hab die Stelle noch nicht lokalisieren können die den Abstand erzeugt.
*Grummel*

Greetz, John.

[nettesekel]

Schick mal nen Link...

[Tao]

Im Ordner "vlb_files1" findest du die "vlightbox1.css".

Im Abschnitt "#vlightbox1 .vlightbox1" ersetzt du einfach den einzeiligen Text "Margin:5px;" gegenn den Zweizeiler:

margin-top:40px;
margin-left:37px;


Ergänzung: Wobei der obige originale Zahlenwerte durchaus je nach Template unterschiedlich sein kann. Hier musst du eventuell probieren.

[john doe]

@ NE: ...gibts noch keinen, ist in der lokalen Versuchsphase...

@Panda: In dem Ding hab ich schon rumgedoktert...
Margins oben und unten reagieren wie erwartet, aber links und rechts nicht. Selbst wenn dort beides auf '0' ist kleben die Thumbs nicht aneinander, sondern haben immer noch diese ominoesen 5 oder 6 Px Abstand... und woher die kommen hab ich noch nicht herausgefunden.

Ist übrigens wurscht, ob man das in der von VLB generierten 'nackten' Galerie testet, oder nach Einfügung. Ergebnis bleibt sich gleich.

Ich würde erwarten, dass wenn man die Margins in der 'vlightbox1.css' auf '0' setzt, die Thumbs alle ohne Abstand aneinander sitzen...
Das tun sie aber nur vertikal - horizontal bleibt der kleine Abstand bestehen - und wo der herkommt bleibt mir bis dato schleierhaft.

Du hast das ja offenbar nachvollzogen; Was machen die Thumbs bei Dir, wenn Du die Margins auf '0' setzt und mal nur die von VLB generierte 'index' startest???
Abstand oder keiner? ...

Greetz, John.

[nettesekel]

Wie wärs mit nem Testverzeichnis?  So könnte man versuchen zu helfen...

[john doe]

...nimm einfach mal den link von weiter oben:
http://visuallightbox.com/lightbox-for-photo-android-demo.html
Das ist die selbe Galerie nur mit anderen Bildergrößen.
Wenn ich dort im (identischen) CSS spiele bekomme ich die Thumbs auch nicht so aneinander wie ich es gerne hätte - in dem Fall als Beispiel auf '0' ...

Auch in dem Beispiel sieht man schon, dass obwohl der Margin-Wert pauschal auf '5' steht, die horizontalen Abstände breiter sind.

EDIT:
Scheint bei allen Galerien so zu sein, also muss der Abstand noch aus einer anderen Quelle stammen ...

[nettesekel]

Versuchs mal mit:

Code: HTML5

1. margin-left: -5px;

[Tao]

Du darfst natürlich nicht die Rahmengrafiken der Thumbnails vergessen, die sind ja auch noch da und benötigen ebenfalls Platz. Deshalb wirst du mit unterschiedlichen Margin-Angaben arbeiten müssen.

Ich habe das jetzt mal ausprobiert und damit lässt sich ohne weiteres ein bestimmtes Raster einhalten.

[john doe]

 

... ob margin -5 das problem löst? Dann schiebt es den ersten Thumb ja ggf. nach aussen... ?

"Rahmengrafiken" ist ein interessantes Stichwort, Panda. Allerdings sehe ich im Gegensatz zu dem von Dir verwendeten Beispiel im von mir verlinkten keine.
Ich glaube auch nicht, dass es das ist.

Wenn man den ganzen Inhalt mal markiert, stellt man fest, dass da vor jedem Thumb links oben sowas wie eine Leerstelle sitzt.
Wo die herkommt weiss ich aber immer noch nicht.

Hilft wohl wirklich nur mit den margins zu spielen bis es passt - in der Hoffnung dass dann nicht wieder irgend ein Brauser dumm rummacht.

Muss mal übers Wochenende noch ein bissel damit spielen. Danke fürs helfen so weit schon mal.
Ist aber auch doof wenn man immer über so Kleinkram stolpern muss ... :-)

Greetz, John

[nettesekel]

... ob margin -5 das problem löst? Dann schiebt es den ersten Thumb ja ggf. nach aussen... ?

Das wirst du merken, wenn du es testest. Ich habe es an dem Link probiert den du gepostet hattest (mit dem Web Developer)... bei margin:0; rutschten die Bilder in der oberen Galerie zwar vertikal lückenlos zusammen, aber horizontal blieb ein Abstand. Bei margin-left: -5px; war auch dieser Abstand verschwunden.