Webdesign, Tutorials und mehr - Webmasterpro.de

Bilder-Wechsel via js?

Tobias Müller, am Mittwoch den 03.03.2010 um 23:43:51

Guten Abend zusammen,

bin gerade dabei mein eigenes Layout für mein Blog zu erstellen. Bei diesem Layout habe ich nun ein DIV-Bereich, in dem ich wiederum Bilder ausgeben möchte. Diese Bilder habe ich zurzeit mit einer Ungeordneten Liste (ul) ausgegeben, da ich so keinen "Zwischenraum" zwischen den Bildern habe. Das Ergebnis kann man hier sehen.

Nun würde ich gerne das die Bilder sich durch dieses DIV schieben/bewegen. Eine Lösungsmöglichkeit gibt es mit dem jCarousel. Bei den Beispielen passt für meinem Zweck am besten jenes, bei dem der Inhalt automatisch geladen wird (also die Bilder von einer Liste): "dynamic content loading". Und / oder das Beispiel, bei dem die Bilder automatisch scrallen, wenn man die Schaltflächen nicht benutzt: "auto scralling". Am optimalsten wäre wohl eine Mischung aus beiden Beispielen.

Leider hat das einbinden bei mir nicht so ganz geklappt. Denn vieles bei dieser "Vorlage" wird aus dem beiliegenen CSS geladen, wie zum Beispiel die Schaltflächen zum blättern. Obwohl ich deren CSS zusätzlich zu meinem eingebunden habe, hat es nicht geklappt. Ursache war zum Beispiel, dass mein Bereich weit aus breiter ist, als jener aus den Beispielen. Das hat dann die folge, dass das blättern nicht klappt(e). Auch die Pfeile zum blättern wurden durch das CSS eingefügt und waren daher leider außerhalb von meinem DIV.

Daher bin ich nun auf der Suche nach einer Lösung zu meinem Problem. Mein Aufbau schaut zurzeit so aus:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div id="BilderReihe">
    <a class="alignleft" href="#"><img src="Bilder/buttons/pfeile/blaettern/zurueck.gif" alt="zurueck" name="zurueck" /></a>
    <a class="alignright" href="#"><img src="Bilder/buttons/pfeile/blaettern/vor.gif" alt="vorwaerts" name="vorwaerts" /></a>
    <ul>
        <li><a title="Startseite" href="#oben"><img src="Bilder/logo/farbe/Logos-01.png" alt="Logo" name="logo" /></a></li>
        <li><img src="Bilder/logo/farbe/Logos-02.png" alt="Logo" name="logo" /></li>
        <li><img src="Bilder/logo/farbe/Logos-03.png" alt="Logo" name="logo" /></li>
        <li><img src="Bilder/logo/farbe/Logos-04.png" alt="Logo" name="logo" /></li>
        <li><img src="Bilder/logo/farbe/Logos-05.png" alt="Logo" name="logo" /></li>
        <li><img src="Bilder/logo/farbe/Logos-06.png" alt="Logo" name="logo" /></li>
        <li><img src="Bilder/logo/farbe/Logos-07.png" alt="Logo" name="logo" /></li>
        <li><img src="Bilder/logo/farbe/Logos-08.png" alt="Logo" name="logo" /></li>
        <li><img src="Bilder/logo/farbe/Logos-09.png" alt="Logo" name="logo" /></li>
        <li><img src="Bilder/logo/farbe/Logos-10.png" alt="Logo" name="logo" /></li>
        <li><img src="Bilder/logo/farbe/Logos-11.png" alt="Logo" name="logo" /></li>
        <li><img src="Bilder/logo/farbe/Logos-12.png" alt="Logo" name="logo" /></li>
        <li><img src="Bilder/logo/farbe/Logos-13.png" alt="Logo" name="logo" /></li>
        <li><img src="Bilder/logo/farbe/Logos-14.png" alt="Logo" name="logo" /></li>
        <li><img src="Bilder/logo/farbe/Logos-15.png" alt="Logo" name="logo" /></li>
        <li><img src="Bilder/logo/farbe/Logos-16.png" alt="Logo" name="logo" /></li>
        <li><img src="Bilder/wappen/Lilie2.png" alt="Lilie" name="Lilie" /></li>
    </ul>
</div   

Und das CSS schaut so aus:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

#BilderReihe {
    display:block;
    vertical-align: middle;
    margin:0em;
    padding:0em;
    height:6em;
    text-align:center;
    background-color:#003366;
    overflow:hidden;
    border:none;
}

#BilderReihe ul {
    display:block;
    margin:0em;
    padding:0em;
    border:none;
}

#BilderReihe li {
    float:left;
    list-style:none;
}

#BilderReihe img {
    margin:0em;
    padding:0em;
    height:6em;
    border:none;}

Die Bilder werden "nur" in der richtigen Größe angeziegt, wenn ich ihnen die 6em zuweise, welches gleichzeitig die Höhe des Umgebene DIVs ist. Eigentlich hatte ich dort 100% stehen, das klappt aber nur, wenn die Grafik(en) ohne eine Liste eingebunden sind. Seit dem ich jene in der Liste stehen habe, klappt es nur mit den 6em.

Schön wäre es nun, wenn sich all meine Bilder automatisch aus einem Verzeichnis geladen werden, denn dann muss man am Script nichts ändern, wenn Bilder hinzu kommen oder wegfallen.

Dann sollten sich jene "durch das DIV bewegen", also zum Beispiel von der rechten zur linken Seite. Die sollte auch weiter gehen, wenn der Besucher einen Link benutzt oder ähnliches. Falls dies nicht geht, dann bräuchte man zusätzlich wohl die "Pfeile" zum blättern, die nun aber leider viel zu Groß angeziegt werden (da ich ja eben die 6em angeben musste).

Doch so ist der "Übergang" zwischen den Bildern ja ziemlich hart. Ist es Möglich, dass man ein Art Bild auf die "Grenze" zwischen den Bildern legt und dieses Bild eine gewissen Transparenz hat oder wie "Milchglas" ausschaut, damit diese Bereich weicher ineinander übergehen?

Hoffe ihr habt Tipps, Tricks, Tutorialts oder eine gute Idee zu diesem Problem.

Liebe Grüße und eine Gute Nacht
Muckel

Testbild, am Donnerstag den 04.03.2010 um 18:12:03

Du musst jCarousel mitteilen, welche UL du gerne durchblättern würdest. Ändere <ul> in <ul id="mycarousel> .

Wenn du anstatt #BilderReihe img #Bilderreihe li img schreibst werden nur die Bilder in der Liste auf 6em gesetzt. Allerdings scheint jCarousel die Pfeile automatisch einzufügen, so dass sie gar nicht mehr im Quelltext stehen müssen.

Wenn du die Knöpfe zum Blättern selbst einfügen willst, musst du den Aufruf von jCarousel wie folgt ändern:

1
2
3
4
5
6
7
8

jQuery(document).ready(function() {
    jQuery("#mycarousel").jcarousel({
        initCallback: mycarousel_initCallback,
        // This tells jCarousel NOT to autobuild prev/next buttons
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
});

Den Links um die Knöpfe wird dann folgende ID zugewiesen:

1
2

        <a href="#" id="mycarousel-prev">Vor</a>
        <a href="#" id="mycarousel-next">Zurück</a>