Eine horizontale Scrollgalerie einbinden ♥♥



Hi zusammen!
Endlich kommt mal wieder ein Post von mir :)
Ich denke einige Leser hier werden ihren Blog zum Darstellen ihrer Fotos nutzen - ich mache es ja nicht anders ;).
Allerdings besteht bei Blogger nur die Möglichkeit, die Bilder alle einfach in einen Post oder auf eine Seite zu packen und man Scrollt sich dann vertikal durch die Bilder. Jedoch kann man leicht mit ein wenig Bastelei im HTML-Code eine Galerie erstellen, in der man horizontal durch die Bilder scrollt. Ich mag diese Art der Darstellung sehr.

Zuerst müssen wir unsere Bilder auf eine konstante Höhe bringen. Dafür nutze ich in Photoscape die Stapelverarbeitung...
... und setze die Höhe meiner Bilder auf 500px.


Ihr müsst darauf achten, dass auch Querformatfotos mit der ausgesuchten Höhe noch komplett sichtbar im Postbereich sind. Die Bilder speichert ihr nun ab und ladet sie bei einem Bildhoster eurer Wahl oder direkt im Blog hoch.

Wichtig ist nun, den html-Code von allem überflüssigen zu befreien.
Habt ihr die Bilder mit Blogspot hochgeladen, so stellt die Option "Originalgröße" ein. Dann schauen wir in den html-Code und suchen nach unseren Bildern - der Code lautet immer <img src="LINK" /> - und löschen den Rest. Das sieht dann so aus:



Außerdem sollte man darauf achten, dass zwischen den Bildercodes keine neue Zeile angefangen wird, sondern alles direkt hintereinander steht. Also in meinem Falle so:

<img src="http://www.abload.de/img/galerie_011kohz.jpg" /><img src="http://www.abload.de/img/galerie_02b4r4m.jpg" /><img src="http://www.abload.de/img/galerie_039krjx.jpg" /><img src="http://www.abload.de/img/galerie_044cppg.jpg" /><img src="http://www.abload.de/img/galerie_05vdpp4.jpg" /><img src="http://www.abload.de/img/galerie_062lpra.jpg" />

Nun brauchen wir noch die Galerie, die unsere Bilder beinhalten wird.
Dafür fügen wir folgenden Code vor und nach den Bildern ein:

<div style="border: none; margin: 0px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap;">
...BILDERCODES...
</div>

Und das wars auch schon!
Die Höhe der Galerie passt sich automatisch der Höhe der Bilder an und die Breite passt sich der Breite des Postbereichs an.

(Das Urheberrecht aller Fotos liegt natürlich bei mir)

Viel Spaß mit diesem kleinen Tutorial und ich wünsche euch einen schönen dritten Advent!

Grüße,
Jenny

31 Kommentare:

  1. danke,das werde ich auf jeden fall ausprobieren! :)

    AntwortenLöschen
  2. tolles tutorial, vielen dank dafür! das werd ich demnächst mal ausprobieren.

    übrigens, weißt du, wie man einstellt, dass dieser "Gif-Animator" auch ohne Anklicken funktioniert? Bei mir will das nie klappen...

    Liebe Grüße!

    AntwortenLöschen
  3. super tutorial und wunderschöne bilder. (: <3

    AntwortenLöschen
  4. Die Fotos hast du gemacht?? Verdammt! Die sind total gut!

    AntwortenLöschen
  5. Klasse Idee, ich ärgere mich ohnehin ständig über die Blogger-Fix-Anordnung der Bilder =)

    LG MissXoxolat

    AntwortenLöschen
  6. total gute Idee, danke dafür :) werd ich später sicher mal ausprobieren!

    AntwortenLöschen
  7. Super Tutorial!

    Kann man in Photoscape die Bilder auch auf eine konstante Breite bringen. Weil das ist immer noch mein Problem und das stört mich wirklich, dass die horizontalen Bilder nicht so breit sind wie die querformatigen. Oder gibt es da einen anderen Tipp den du mit geben kannst?

    Wär super wenn du mit helfen könnstet. Vielen Dank :)

    Liebe Grüße, Magdalena :*

    AntwortenLöschen
  8. @Alice:
    Den Gif-Animator habe ich noch nie genutzt, dazu kann ich nichts sagen :)

    @Magdalena:
    Meinst du wenn du die Bilder normal in den Blog einbindest? Ja, dann ist die fixe Breite sehr praktisch. Mache ich bei meinem Blog ganz genauso, ich verkleiner alle Bilder vorher auf 800px-Breite (so breit sind halt meine Posts).

    AntwortenLöschen
  9. hallo :) bin durch zufall mal auf deinen blog gestoßen und muss sagen er gefällt mir sehr gut :)
    darf ich dich noch fragen , wie du die schönen schneflocken ins bild gezaubert hast, ich weiß leider nicht wie das geht und wollte das schon seit ewigkeiten herausfinden !
    alles liebe julie

    AntwortenLöschen
  10. oh toll das wollt ich schon lange gerne wissen danke!:)

    AntwortenLöschen
  11. großes dank ♥ du bist der hammer :D !!!!

    AntwortenLöschen
  12. @Julie:
    Dies hier ist nicht mein Blog, ich bin hier nur Autor und schreibe ein paar Tutorials :) Schau doch einfach mal auf die Startseite des Blogs, das Tutorial mit den Schneeflocken hat Mira vor ein paar Tagen erst gepostet :)

    AntwortenLöschen
  13. Oh ja... das kann ich gut gebrauchen. Werde ich bei Gelegenheit mal ausprobieren.

    Dankeschön.

    LG

    AntwortenLöschen
  14. ihr wurdet gelobt für eure vielen ganz tollen tutorials. :)

    http://sparkling-in-the-daylight.blogspot.com/

    AntwortenLöschen
  15. oh ähm tschuldigung du hast schon einen post gemahct zu schneeflocken , hat mir sehr geholfen , tausend dank, was hast du für einen geilen blog, man findet so tolle einstellungen und alles, wirklich der wahsinn !!!!
    und hast du schon mal herausgefunden, wie man den mauszeiger in einem blog verändern kann, ich würde mich sehr freuen, wenn es dazu auch mal einen post geben würde , alles lieb julie ;*

    AntwortenLöschen
  16. Hey Süße
    ich veranstalte zurzeit auf meinem Blog ein Gewinnspiel.. schau doch mal vorbei !
    http://beautysarosh.blogspot.com/2011/12/weihnachtsgewinnspiel.html

    Liebste Grüße
    Beautysarosh.blogspot.com ♥

    AntwortenLöschen
  17. Super Tutorial! Ich hätte mal eine Frage:

    Wie ändere ich die Hintergrundfarbe bei einem markierten Text? Also wenn ich z.B auf eurem Blog einen Text markiere wird es grün! Wie kann ich das ändern?

    AntwortenLöschen
  18. Hey. Ich finde euren Blog hier super. (:
    Ich habe aber trozdem mal noch eine Frage: Wie schaff ich es denn zum Beispiel mehrer Seiten anzulegen und auf denen dann unabhänig voneinander Posts zu erstellen, die auch kommentiert werden können.??
    Das ist sehr wichtig für mich, ich würde mich also über eine antwort freuen. (:
    Liebe Grüße, Patty.
    http://patty-318.blogspot.com/

    AntwortenLöschen
  19. Ich werds gleich morgen ausprobieren!

    AntwortenLöschen
  20. gefällt mir richtig gut !
    aber ich hätte noch eine frage . Könntest du vielleicht ein turtorial machen , wo du ( wenn du weißt wie das geht ) zeigst , wie man sein header fest an einer stelle hat und die post sich nur bewegen ? Verstanden ?:D wenn nicht auch nicht schlimm , würde mich nur freuen oder du schreibst mir einfach wie das geht ( wenn du willst ) auf meinen Blog als kommentar;) Liiebe grüße dena

    http://thisisgoingtobeagreatthing.blogspot.com/

    AntwortenLöschen
  21. Bei mir klappt das ganze leider nicht :(

    AntwortenLöschen
  22. ich hab's ausprobiert & bei mir klappt das leider nicht, weil dann sind alle bilder untereinander und unter dem letzen bild ist dann so ein 'scroll-teil' wo aber nichts zum scrollen ist. maaannn :D achso, und mir würd es auch brennend interessieren, wie man zu anderen seiten einen eigenen link/kommentare hinzufügen kann ! liebste grüße, & wer lieb wenn ihr bei mir als kommentar antworten würdet:) <3 http://superwoman-na.blogspot.com

    AntwortenLöschen
  23. Bei mir funktioniert das leider nicht, ich habe das so gemacht, wie du es beschrieben hast, aber die Bilder sind trotzdem untereinander. :(

    AntwortenLöschen
  24. Kann man die Fotos auch anders auf eine konstante Höhe bringen?
    vielleicht mit gimp? ich würde mir ja photoscape runterladen, aber ich habe keinen Windows, deshalb geht's nicht.. :D
    ich würde mich freuen, wenn du mir auf meinem Blog antworten könntest. (:

    http://fotografieistleben.blogspot.com/

    AntwortenLöschen
  25. bei mir hast gleich funktioniert! Super Danke!

    AntwortenLöschen
  26. :o
    und ich hab den ganzen Spaß mit HTML (Tabellen, etc. blabla) selbst zusammengeschrieben ! Jetzt entdecke ich hier deine Variante. Oh man :DDD

    AntwortenLöschen
  27. Hey cool, bin von jemandem hierher geschickt worden und benutze dein System nun auf meinem Blog .. vielen Dank dafür :) Hätte nie gedacht, dass ich das mal hinbekomme!

    AntwortenLöschen
  28. och nööö, funktioniert nicht, die scrollbalken erschenen zwar oben und unten, aber die bilder bleiben UNTEREINANDER... :o((

    AntwortenLöschen
  29. hi ;) das ist ein tolles tutorial ....ich hab noch eine frage ...diesen rahmen als ob es ein zettel wäre der aufliegt ..wo bekommt man den ? lgtani

    AntwortenLöschen
  30. Wirklich richtig hilfreich!

    Ich hab nur noch ein Poblem: obwohl ich die Höhe der Bilder bei Photoscape mehrmals verkleinert hab, ist die Galerie trotzdem noch genauso "riesig", also von der Höhe her. Ich hätte sie aber gern niedriger, kannst du mir da vlt helfen bzw. sagen was ich vlt falsch gemacht habe? Wäre sehr lieb!

    Liebe Grüße
    Paloma :)

    AntwortenLöschen
  31. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen, Spam und sonstiges Blabla ohne Vorwarnung gelöscht werden. Falls du ein Tutorialvorschlag hast, dann kannst du ihn hier loswerden. ♥

Related Posts Plugin for WordPress, Blogger...