JavaScript Darstellung von PrettyPhotoGallery

Hallo,

ich baue mir grad eine neue eigene Website, ich hab aber ein Problem mit der Galerie.
Ich hab diese hier verwendet: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Manchmal wird sie auf dieser Seite nicht richtig angezeigt: http://amazing-paws.at/lingschmetter/portfolio_hunde.html
da es eben nur manchmal ist, ist es sehr schwierig, das Problem zu finden!

Ich denke, dass es an der Höhen Angabe der Seite liegt, bzw dem Container. Woher die Höhenangabe kommt, weiß ich aber nicht. Und ich finde es sehr merkwürdig, dass es nur manchmal ist :/

lg Lisa

Kannst du "nicht richtig" beschreiben?

Ich sehe nur, dass beim Laden manchmal die Bilder übereinander dargestellt werden. Meinst du das?

Ja genau!

Sollte natürlich immer mit dem selben Abstand untereinander dargestellt sein, und nicht überlappend.

hmmm...

ich erhalte gleich 4 Fehler, wenn ich die Seite öffne:

• Failed to load resource: the server responded with a status of 404 (Not Found) http://amazing-paws.at/lingschmetter/flex-slider/flexslider.css
• Failed to load resource: the server responded with a status of 404 (Not Found) http://amazing-paws.at/lingschmetter/styles/style.css
• Failed to load resource: the server responded with a status of 404 (Not Found) http://amazing-paws.at/lingschmetter/flex-slider/jquery.flexslider-min.js
• Uncaught TypeError: undefined is not a function amazing-paws.at/lingschmetter/scripts/setup.js:3

Schau mal, dass du die Ressourcen korrekt einbinden kannst.

Ich hab die Fehlermeldungen behoben, aber die Galerie wird immer noch nicht richtig angezeigt :/

Schau mal beim Initialisieren von prettyPhoto. Da gibts einen Haufen Parameter, die du mitgeben kannst, e.g.: horizontal_padding oder default-height.

Versuchs mal mit horizontal_padding: 20

war auf 20.. habs jetzt auf 100 und es ist wieder so, dass es manchmal geht und manchmal nicht

Ich hab die Galerie jetzt nochmal von Anfang an neu aufgebaut, jetzt funktioniert wieder alles:
http://amazing-paws.at/lingschmetter/test/portfolio_hunde.html

Ich wollte dass 6 statt 3 Bilder in einer Reihe sind - aber wie ich das geändert hab, ging das der Rest nicht mehr!
Bevor ich jetzt wieder alles zerstöre, weiß jemand wie und wo ich das ändern muss?

lg und danke schon mal

Irgend etwas, ich weiß nur nicht genau was, sorgt per JavaScript dafür, dass die Bilder absolut positioniert werden, jeweils mit ner CSS3 Transition für die Verschiebung in X- und Y-Richtung. Was auch immer dafür verantwortlich ist: Sowas ist totaler Bullshit.

Eine deutlich flexiblere Kachelung erhälst du, indem du dich schlichtweg auf pures HTML & CSS3 verlässt. JS hat hier nur als reine Lightbox seine Daseinsberechtigung, aber sollte niemals an der Position der Thumbnails herumpfuschen.

Ich würde die Bilder-Liste komplett neu aufbauen, als <ul><li> - Struktur (Bildergalerien sind eine unsortierte Liste von Bildern -> Semantik). Jetzt kann man wählen, ob man die Bilder alle auf Einheitshöhe bringt (dann kann man auf float:left; setzen), oder bei unterschiedlichen Höhen lieber display:inline-block; und vertical-align:top; verwendet. Noch hübscher, aber für IE<10 nicht brauchbar, wäre eine Lösung über das CSS3 Flex Model.
Was sich lohnt: wenn die Thumbnails oftmals unterschiedliche Größen haben, kann man noch ein Masonry-Script auf das Problem werfen. Schon ist es hübsch nahtlos... und deutlich flexibler als das aktuelle Konstrukt.