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

44 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
  32. wie speichert man das denn, also die Stapelverarbeitung? :O

    kann mir da jemand helfen??

    AntwortenLöschen
    Antworten
    1. Die musst du gar nicht direkt speichern. Das macht der von automatisch. :)

      Löschen
  33. Danke für das Tutorial. Hat mir wirklich seeeehr geholfen und ich hab gleich mal eine Fotoschau von mir für meine 'Über mich' Seite erstellt. Ging super schnell und einfach. Danke. :)

    http://estherliebt.blogspot.de/

    AntwortenLöschen
    Antworten
    1. Na toll.. Heute Nachmittag hat alles super funktioniert. Und ketzt ist alles ganz anders. Die bilder stehen nebeneinander und darunter ist das zum Scrollen. Bloß kann man nicht scrollen, da dort drinnen keine Bilder sind. Kann sich das vielleicht mal jemand angucken und mir helfen? :)

      Löschen
  34. Vielen Dank für das tolle Tutorial.

    Ich habe meine Bilder als Link gelassen und einfach Deinen <div style...> Tag um den von Blogger produzierten Code herum gewickelt. Die Höhe der Bilder habe ich nicht vorher angepasst, sondern direkt im Code, in dem ich die height auf 200 gesetzt habe und die width einfach entfernt. Zusätzlich ist noch der rechte und linke border rausgeflogen.

    Nochmals vielen Dank für die Anregung!!!

    AntwortenLöschen
  35. Weiß hier zufällig jemand, wie man eine vertikale Scrollgalerie einbindet, so wie hier in diesem Post → http://sizzixblog.blogspot.de/2012/11/die-cutting-paper-filigree-reindeer.html
    Das würde mich auch sehr interessieren :)!

    Laureen ♥

    AntwortenLöschen
  36. hallo!

    also ich find das total toll und hab es auch geschafft, das ganze einzubauen - danke für die anregung und hilfestellung!!!
    jedoch hab ich da schon noch eine frage: wie kann ich denn zwischen den einzelnen bildern die abstände vergrößern?!

    mit margin hab ich es bereits versucht und irgendwie klappt's einfach nicht... :/ füge ich es an der falschen stelle ein?! muss ich nach jedem bild extra was einfügen oder geht es auch einfacher?!

    liebe grüße und
    "fröhliches bloggen"
    Michaela

    AntwortenLöschen
  37. vielen dank :))
    hat bei mir eine weile gedauert :D aber ich habs dann doch geschafft ;)

    LG, Ronja

    AntwortenLöschen
  38. ich hab das auch mal probiert - und es hat FUNKTIONIERT :D :D ich hab grad Riesenfreude ^^
    Danke für die absolut tollen und inspirierenden Tipps und Posts :)

    NOMINAO

    AntwortenLöschen
  39. Hei, habt ihr vielleicht auch einen Code für diese Galerie in CSS? Wäre wirklich super toll!!! :)

    Viele liebe Grüße!

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

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!