✔ Div Box mit Bildern ohne zu überlappen

D

Darian

Erfahrenes Mitglied
Hallo Leute,

wieder einmal muss ich leider ein paar Fragen stellen.

Habe jetzt ja begonnen eine einfache Bildergallery selbst zu programmieren.

Man kann per FTP einfach Bilder (+Thumbs) in den entsprechenden Ordner kopieren, und PHP und JS kümmern sich um das automatische auslesen.

Jetzt weiß ich aber nicht wie ich einen Scrollbalken wie in dem Bild (siehe Anhang) machen könnte.

jquery holt sich den html Code (mit .load) von einem PHP Script, und gibt es in die Box. Wie kriege ich da jetzt aber ca. 10 Thumbnails in diese Box, die jenigen die überlappen werden nicht angezeigt, und wie könnte ich das dann mit js so beeinflussen, dass sie die Bilder nach links und rechts verschieben

HTML-Code:
HTML: 
    <div id="gallery_thumbs">
        <div id="button_left">&laquo;</div>
		<div id="thumbnails">
        	
        </div>
        <div id="button_right">&raquo;</div>
  </div>

Css-Code:
Code: 
#gallery_thumbs {
position:absolute;
left:290px;
right:10px;
bottom:0px;
height:95px;
border:1px solid #dbdbdc;
}

#button_left {
position:absolute;
height:100%;
border-right:1px solid #dbdbdc;
width:30px;
left:0px;
font-size:20px;
font-weight:bold;
line-height:95px;
text-align:center;
color:#af0817;
cursor:pointer;
}

#button_right {
position:absolute;
float:right;
height:100%;
border-left:1px solid #dbdbdc;
width:30px;
right:0px;
font-size:20px;
font-weight:bold;
line-height:95px;
text-align:center;
color:#af0817;
cursor:pointer;
}

#thumbnails {
margin-left:40px;
margin-right:40px;
}

Bin gerade mitten drinnen, und probiere mit CSS das noch irgendwie hin zu bekommen.

Leider beginnen Bilder die nicht in der selben Reihe Platz haben, derzeit eine neue Reihe anstatt einfach nur zur Hälfte angezeigt zu werden, oder ganz zu verschwinden.

Bin mir jetzt gar nicht sicher ob sowas mit css möglich ist.

lg und thx für eventuelle Infos
Darian
 

Anhänge

  • thumbnails.jpg
    thumbnails.jpg
    5,9 KB · Aufrufe: 91
Hallo Darian,

wenn man dir antworten möchte, dann müsste man folgendes wissen:

  • Wie breit sind denn die Bilder?
  • Wie breit wird denn der DIV#gallery_thumbs-Container?

Da die geposteten Informationen dazu keinerlei Auskunft geben, würde der Beitrag auch besser ins Astro-TV passen. :rolleyes:
 
Zuletzt bearbeitet:
Hallo,

ist mir eigentlich nicht klar warum du das vorher so genau wissen musst, aber ich werde jetzt einfach mal so ungefähr die Daten angeben.

Die Thumbnails sind 135x90. Die höhe bleibt immer gleich, aber breite ändert sich, je nachdem ob es Hoch- oder Querformat ist.

Die großen Bilder dann selbst sind zentriert und werden mir jquery rein geladen.

Das div gallery_thumbs hat eine Breite von 485px die Links und Rechts Button nehmen jeweils 30px ein.

Ich habe es vorhin mit marquee probiert. Aber irgendwie bleibt das stehen und fährt im linken Rand nicht mehr weiter. Ich dachte die marquee direction und Geschwindigkeit spreche ich dann einfach mit JS an. Aber irgendwie macht das nicht so wie ich will.

Würde mich noch über Infos freuen.

lg Darian

<edit>Habe auch gerade so einen Crawler probiert, der aber dafür sorgt dass FF abkackt. :) Witzig, sowas ist mir noch nie passiert. </edit>
 
Zuletzt bearbeitet:
Darian hat gesagt.:
Hallo,
ist mir eigentlich nicht klar warum du das vorher so genau wissen musst, ...
Zum Vergrößern anklicken....
... weil dein Container "thumbnails" mindestens genau so breit wie alle Bilder darin sein muss. Wenn die Bilder dort von der Breite her nicht reinpassen, weil dieser Container (so wie es jetzt ist) z.B. die "default"-Breite "auto" besitzt und so spätestens vom Viewport in der Breite begrenzt wird, dann wird der Inline- bzw. der gefloatete Inhalt umgebrochen. Das hast du ja selbst schon gemerkt - um so unverständlicher ist deine Frage und genau so sinnfrei erscheint dein oben gepostetes HTML-Fragment, in dem der "thumbnails"-Container noch keinen Inhalt besitzt.

Anders geht es m.E. nicht: Du musst einfach für eine passende Inhaltsbreite im "thumbnails"-Container sorgen. Wie du das machst (z.B. per JavaScript die Gesamtbreite der Bilder ausrechnen) ist dabei egal.

Ich vermute mal, dass dein HTML so aussehen soll:
HTML: 
 <div id="gallery_thumbs">
    <div id="button_left">&laquo;</div>
    <div class="thumbnails">
        <a href="#"><img src="thmbn01.jpg" alt="" title="Bild 1"></a>
        <a href="#"><img src="thmbn02.jpg" alt="" title="Bild 2"></a>
        <a href="#"><img src="thmbn03.jpg" alt="" title="Bild 3"></a>
        <a href="#"><img src="thmbn04.jpg" alt="" title="Bild 4"></a>
        <a href="#"><img src="thmbn05.jpg" alt="" title="Bild 5"></a>
        <a href="#"><img src="thmbn06.jpg" alt="" title="Bild 6"></a>
        <a href="#"><img src="thmbn07.jpg" alt="" title="Bild 7"></a>
        <a href="#"><img src="thmbn08.jpg" alt="" title="Bild 8"></a>
        <a href="#"><img src="thmbn09.jpg" alt="" title="Bild 9"></a>
        <a href="#"><img src="thmbn10.jpg" alt="" title="Bild 10"></a>
    </div>
    <div id="button_right">&laquo;</div>
</div>
... dann müsste das CSS für einen thumbnails-Container mit Bilder 135px Breite und 90px Höhe so aussehen:
Code: 
.thumbnails {
  width: 1400px;  /* = Platz für 10 Bilder */
  margin: 0 31px;  /* Platz für left-/right-Button */
}
.thumbnails img {
  display: block;
  float: left;
  width: 135px; /* Angabe nur notwendig, wenn Bilder andere Größe haben */
/*  height: 90px;  Angabe nur notwendig, wenn Bilder andere Größe haben */
  border: 0 solid black;  /* gleiche Farbe wie Hintergrund des umgebenden Elements */
  border-width: 3px 2px 2px 3px;
}
Wenn man also um die Bilder noch einen Rand von insgesamt 5px setzt, dann braucht man für 10 Bilder 1400px Containerbreite.

Der "DIV#gallery_thumbs" ist dann der umrahmende Container, der im Layout sichtbar wird und ein (scrollbares) Fenster zu den Bildern hat. Die Scrollfähigkeit ist mit "overflow:hidden" deaktiviert, da du das ja per JS machen willst.
Code: 
#gallery_thumbs {
  position: relative;  /* auch abs.Positionierung mgl. */
  top: 20px;  /* Wert dem Layout anpassen */
  left: 30px;  /* Wert dem Layout anpassen */
  background-color: black;
  border: 1px solid #ddd;

  width: 50%; /* hier rel. oder abs. Wert mgl. */
/*  height: 95px;  ohne Scrollbalken hier auch "auto" mgl. */
  overflow: hidden;  /* Scrollbalken unterdrücken: */
}
Ich hoffe, das hilft dir etwas weiter.
 
Hallo,
ja schon langsam verstehe ich wie man sowas realisieren könnte.
Das overflow:hidden, was ich nebenbei vergessen hatte, ist des Rätsels Schlüssel.

Ich habe aber heute begonnen so ein fertiges js Programm einzubauen. Es macht aber leider nicht so wie ich will. Mal sehen, vielleicht kriege ich es noch hin, sonst müsste ich mir doch wieder selbst was überlegen, und werde dann darauf zurück kommen.

Wie du bemerkt hast hatte ich da keinen Inhalt, das ist deswegen weil der Inhalt dynamisch geladen wird. Natürlich je nach (Unter)Kategorie.

Danke für die Mühen
lg Darian
 
Hi,

ich hab den Thread (dank hela via Div in Reihe bei fester Größe des outerContainer) erst heute aufgeschlagen, da ich zu der Zeit im Urlaub war ;-)

Ist also schon eine Weile her, und von Darian auch als erledigt markiert, aber ich hab da noch was im Rucksack gefunden, das ich hier loswerden will :)
hela hat gesagt.:
... weil dein Container "thumbnails" mindestens genau so breit wie alle Bilder darin sein muss. Wenn die Bilder dort von der Breite her nicht reinpassen, weil dieser Container (so wie es jetzt ist) z.B. die "default"-Breite "auto" besitzt und so spätestens vom Viewport in der Breite begrenzt wird, dann wird der Inline- bzw. der gefloatete Inhalt umgebrochen.

[...]

Anders geht es m.E. nicht: Du musst einfach für eine passende Inhaltsbreite im "thumbnails"-Container sorgen.
Zum Vergrößern anklicken....

Es geht auch anders :)
HTML: 
 <div id="gallery_thumbs">
    <div id="button_left">&laquo;</div>
    <ul class="thumbnails">
        <li><a href="#"><img src="thmbn01.jpg" alt="" title="Bild 1"></a></li>
        <li><a href="#"><img src="thmbn02.jpg" alt="" title="Bild 2"></a></li>
        <li><a href="#"><img src="thmbn03.jpg" alt="" title="Bild 3"></a></li>
        <li><a href="#"><img src="thmbn04.jpg" alt="" title="Bild 4"></a></li>
        <li><a href="#"><img src="thmbn05.jpg" alt="" title="Bild 5"></a></li>
        <li><a href="#"><img src="thmbn06.jpg" alt="" title="Bild 6"></a></li>
        <li><a href="#"><img src="thmbn07.jpg" alt="" title="Bild 7"></a></li>
        <li><a href="#"><img src="thmbn08.jpg" alt="" title="Bild 8"></a></li>
        <li><a href="#"><img src="thmbn09.jpg" alt="" title="Bild 9"></a></li>
        <li><a href="#"><img src="thmbn10.jpg" alt="" title="Bild 10"></a></li>
    </ul>
    <div id="button_right">&laquo;</div>
</div>
CSS: 
#gallery_thumbs .thumbnails {
  position:absolute;
  list-style:none;
  white-space:nowrap;
}
#gallery_thumbs .thumbnails li {
  display:inline;
}

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück