Guten Abend zusammen,
habe mir nun das Beispiel angeschaut und es funktioniert soweit auch. Im head musste dazu folgendes eingefügt werden:
Code:
<!-- jQuery library -->
<script type="text/javascript" src="lib/jquery-1.2.3.pack.js"></script>
<!-- jCarousel library -->
<script type="text/javascript" src="lib/jquery.jcarousel.pack.js"></script>
<!-- jCarousel Austausch im Content -->
<script type="text/javascript">
function mycarousel_itemLoadCallback(carousel, state)
{
// Since we get all URLs in one file, we simply add all items
// at once and set the size accordingly.
if (state != 'init')
return;
jQuery.get('dynamic_ajax.txt', function(data) {
mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, data);
});
};
function mycarousel_itemAddCallback(carousel, first, last, data)
{
// Simply add all items at once and set the size accordingly.
var items = data.split('|');
for (i = 0; i < items.length; i++) {
carousel.add(i+1, mycarousel_getItemHTML(items[i]));
}
carousel.size(items.length);
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(url)
{
return '<img src="' + url + '" width="75" height="90%" alt="" />';
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
itemLoadCallback: mycarousel_itemLoadCallback
});
});
</script>
Und dort wo die Bilder eingefügt werden sollen, habe ich eben die Liste eingefügt:
Code:
<ul id="mycarousel" class="jcarousel-skin-ie7">
<!-- The content will be dynamically loaded in here -->
</ul>
Lieder bekomme ich am Anfang aber folgende Fehlermeldung:
jCarousel: Not width/height set for items. This will cause an infinite loop. Aborting...
Und weiß leider nicht, worauf sich das bezieht. Denn für die Bild(er) sind ja die Werte angegeben, wie man oben sehen kann.
Um die Liste der Bilder auszugeben bezieht sich das Script ja auf eine Textdatei. Ich würde aber gerne ein Verzeichnis dafür angeben, so dass sich dann alle Bilder aus diesem Verzeichnis geladen werden. In meinem Fall wäre das folgendes Verzeichnis:
denn so müsste man das Script nicht mehr ändern, egal ob Bilder hinzu kommen oder weg fallen.
Ein zweites Problem habe ich mit den "Pfeilen" zum blättern. Jene werden wohl über css eingefügt, denn in der Beispiel *.htm Datei waren sie nicht eingebunden. Habe dazu dieses beides in der skin.css gefunden:
Code:
.jcarousel-skin-ie7 .jcarousel-next-horizontal {
position: absolute;
top: 43px;
right: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(next-horizontal.gif) no-repeat 0 0;
}
.jcarousel-skin-ie7 .jcarousel-prev-horizontal {
position: absolute;
top: 43px;
left: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(prev-horizontal.gif) no-repeat 0 0;
Jeweil ergänzt mit einer anderen "Image Position", damit man den Pfeil wohl in der anderen "farbe" sieht. Doch damit habe ich noch so meine Probleme.
Denn in meinem Layout ist es so, dass ich eben das div BilderReihe habe. In jenem sollen die Bilder erscheinen (was soweit auch klappt). Das erste und letzte Bild soll wiederum die Grafik zum blättern sein. Am Anfang hatte ich jene "von Hand" eingefügt:
HTML:
<a href="#"><img src="Bilder/buttons/pfeile/blaettern/zurueck.gif" alt="zurueck" name="zurueck" /></a>
<a href="#"><img src="Bilder/buttons/pfeile/blaettern/vor.gif" alt="vorwaerts" name="vorwaerts" /></a>
Gibt man den Links noch eine class mit alignleft bzw. alignright, dann floaten sie in die entsprechende Richtung. Danach hatte ich dann die Bilder ebenfalls von Hand eingefügt.
Die Bilder habe ich nun durch das DIV mit der ul Liste aus dem Beispiel ausgetauscht.Es werden dann zwar auch die Bilder aus dem JavaScript eingefügt, aber das Blätter funktioniert nicht. Jenes klappt erst, wenn ich auch das *.css dazu nehme, welches bei dem Beispiel auch dabei war. Doch jenes setzt die Pfeile leider nach ganz außen und belässt sie nicht in dem DIV BilderReihe, wo sie eigentlich mit hingehören.
Zu sehen ist das Problem auch auf der
Testseite. Nun habe ich der *.txt Datei erstmal die 16 Bilder von Hand hinzugefügt, um das Karusell zu testen und musste dabei feststellen, dass leider auch das Blättern nicht funktioniert und leider nicht alle Bilder angeziegt werden. Leider ist das ganze mal wieder auf englisch, was nicht gerade meine stärke ist
Hoffe daher, dass ihr mir weiter helfen könnt. Ziel ist also, dass die Bilder aus einem Verzeichnis in dem vorhandenen DIV ausgegeben werden. (Das klappt ja soweit auch, zumindest für die ersten sechs Bilder.) Dann hätte ich gerne innerhalb von meinem DIV. Die Bilder sollten dann automatisch wandern, auch wenn man andere Links der Seiten anklickt.
Doch schon das blättern des Beispiels klappt zurzeit leider nicht. Wenn ich aus dem beigefügten Skin die Breitenangaben auskommentiere, dann werden zumindest die anderen Bilder angeziegt. Doch dann sind leider die "Schaltflächen" nicht mehr aktiv...
Habt ihr eine Idee für diese Schwierigkeiten oder kennt ihr ein Tutorial / Beispiel welches besser passt oder einen guten Suchbegriff?
Vielen Dank
Muckel
Habe noch vergessen: mein Aufbau von Hand schaut so aus:
HTML:
<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>
<a title="Startseite" href="#oben"><img src="Bilder/logo/farbe/Logos-01.png" alt="Logo" name="logo" /></a>
<img src="Bilder/logo/farbe/Logos-02.png" alt="Logo" name="logo" />
<img src="Bilder/logo/farbe/Logos-03.png" alt="Logo" name="logo" />
<img src="Bilder/logo/farbe/Logos-04.png" alt="Logo" name="logo" />
<img src="Bilder/logo/farbe/Logos-05.png" alt="Logo" name="logo" />
<img src="Bilder/logo/farbe/Logos-06.png" alt="Logo" name="logo" />
<img src="Bilder/logo/farbe/Logos-07.png" alt="Logo" name="logo" />
<img src="Bilder/logo/farbe/Logos-08.png" alt="Logo" name="logo" />
<img src="Bilder/logo/farbe/Logos-09.png" alt="Logo" name="logo" />
<img src="Bilder/logo/farbe/Logos-10.png" alt="Logo" name="logo" />
<img src="Bilder/logo/farbe/Logos-11.png" alt="Logo" name="logo" />
<img src="Bilder/logo/farbe/Logos-12.png" alt="Logo" name="logo" />
<img src="Bilder/logo/farbe/Logos-13.png" alt="Logo" name="logo" />
<img src="Bilder/logo/farbe/Logos-14.png" alt="Logo" name="logo" />
<img src="Bilder/logo/farbe/Logos-15.png" alt="Logo" name="logo" />
<img src="Bilder/logo/farbe/Logos-16.png" alt="Logo" name="logo" />
<img src="Bilder/wappen/Lilie2.png" alt="Lilie" name="Lilie" />
</div>
Die Bilder werden nebeneinander angezeigt. Die "Schaltflächen" zum evtl. blättern sind rechts und links davon. Das Ergebnis ist auf dem Bild im Anhang zu sehen. Um den "Zwischenraum" zu entfernen, habe ich versucht, die Bilder in eine Liste zu packen, was leider schief ging, da die Bilder dann zu groß sind. Dabei habe ich versucht diese Liste zu beeinflussen:
Code:
#BilderReihe ul {
display:block;
margin:0em;
padding:0em;
border:none;
}
#BilderReihe li {
float:left;
list-style:none;
}
#BilderReihe img {
height:100%;
margin:0em;
padding:0em;
border:none;}
Bei einem height:100%; für die Bilder, sind sie viel zu groß. Doch auch 50% verändern daran nichts. Gebe ich dort aber 6em an, welches auch die Höhe des umgebenen DIVs ist, dann passt es. Woran liegt es, dass sich die Prozentangaben nicht/anders auswirken? Gebe ich aber allen drei "Objekten" (ul, li und img) ein height:100%, dann wird zwar die Größe richtig, aber ich sehe dann nur noch zwei Bilder. Auf dem zweiten Bild ist das Ergebnis zu sehen, wenn ich eben die Höhe von 6em (=Höhe wie bei dem umgebenen div) angebe.
Würde dieses Problem auch gerne verstehen und hoffe, dass ihr mir weiterhelfen könnt.
Liebe Grüße und vielen Dank
Muckel
