JQuery - Funktion gesucht

Samuelll · 24.12.2009

Hallo,

habe bisher bei den JQuery-Funktionen die ich bisher so finden konnte immer nur Bilderanzeigen gesehen, wo nur ein bild gleichzeitig zu sehen war.

Ich möchte erreichen, dass eine Reihe von Bildern die in einem Ordner hinterlegt sind "aus dem oberen Rand" eines Div Containers heraus kommt ... den Container durchläuft .... und am Endes des Divs wieder "in den Endbereich" hineinläuft.

Habt ihr einen Tip für ein Plugin oder wie eine bestehende Fkt. angepasst werden muss ?

Bin ganz neu in diesem Bereich und habe bisher noch keine Ahnung von JavaScript.

Danke füreure Hilfe !

sokie · 24.12.2009

AW: JQuery - Funktion gesucht

reicht es dennn nicht, die Bilder in einen gemeinsamen container zusammen zu fassen, und den dann entsprechend zu animieren?

Samuelll · 24.12.2009

AW: JQuery - Funktion gesucht

Die Bilder ändern sich öfters .. darum soll die Anzeige abhängig vom Ordnerinhalt angezeigt werden.
Und die Animation währe das Durchlaufen des Div-Containers, dass ich so in der Form auch noch bei keinem Standard JQuery gefunden habe.

Tim · 24.12.2009

AW: JQuery - Funktion gesucht

Es geht dir also nicht um die Animation, sondern das dynamische Auslesen des Ordnerinhalts.

Dafür solltest du dich mit PHP auseinandersetzen. PHP bietet die gewünschten Funktionen, jQuery übernimmt dann nur noch deine Animation.

Die Funktionen opendir, readdir und closedir sollten dir bei deinem Vorhaben helfen.

Samuelll · 24.12.2009

AW: JQuery - Funktion gesucht

Sorry, ich glaube da ist ein Missverständnis im Zusammenhang mit dem Post von SOKIE entstanden.

Es geht mir bei JQuery einzig darum ein Bild in an den Grenzen eines div in die Box hinein bzw.hinaus laufen zu lassen, das Bild dann durch die Box durchlaufen zu lassen (von oben nach unten).
Es soll also eine Endlosschlange von Bildern durch die Div-Box laufen. Parallel wären entsprechend immer zb 4 Bilder zusehen, die hinein, hinaus oder hindurch laufen.

Alle Beispiele die ich bisher mit JQuery gesehen haben, haben aber zur selben Zeit immer nur EIN Bild angezeigt. Bei mir wären es aber zb 4 gleichzeitig auf die dieser Effekt angewendet wird.
Praktisch ein vertikaler Slider !

saila · 25.12.2009

AW: JQuery - Funktion gesucht

Stichwort: jQuery - jcarusell.
Wenn du was anderes meinst - melden.

Samuelll · 25.12.2009

AW: JQuery - Funktion gesucht

Danke. Das Stichwort war schonmal nicht schlecht.

Ideal wäre es nun noch, wenn die Bilder nicht als Gruppen durchlaufen, sondern alle, automatisch in gleichmäßiger Geschwindigkeit als Endlosband.

saila · 25.12.2009

AW: JQuery - Funktion gesucht

Doku lesen jCarousel - Riding carousels with jQuery

Samuelll · 25.12.2009

AW: JQuery - Funktion gesucht

Ich hasse diese Aussage !!!
Aber du hast natürlich recht

Hatte nur die Beispiele überflogen und dort lediglich einen Bilderwechsel von 3 Bildern auf einmal gefunden. Dies entsprach allerdings nicht meinem Suchziel.

Bei meiner Suche würde bei 3 Bildern eines gerade ins Div hinein laufen, eines hinaus laufen und eines dazwischen hindurch laufen.
Aber, wenn du also sagst, dass müsste damit machbar sein, werd ich mir gern mal die Doku ausführlich anschauen

Danke dir also für den Link.

Samuelll · 27.12.2009

AW: JQuery - Funktion gesucht

Sooo .. nun hab ich es soweit, dass nur noch die Animation nicht passt.

Edit :
Animation is nun auf ca 3 Sekunden. Damit wird das Bild langsam hinein gefahren.
Danach Stoppt die Animation allerdings kurz.
Hat noch jemand einen Tip wie ich den Stop noch heraus bekomme ?

Versuche einen kontinuierlichen Bildfluss zu erreichen.

Hat jemand eine Idee wie ich das noch hingebogen bekomme ?

danke abermals im Voraus

saila · 27.12.2009

AW: JQuery - Funktion gesucht

Quellcode (insbesonder jQuery)?

Samuelll · 27.12.2009

AW: JQuery - Funktion gesucht

Habe bisher nur das Beispiel "Sepzial Circular" genommen und es um wenige Parrameter ergänzt :

Code:

cript type="text/javascript">

var mycarousel_itemList = [
    {url: 'http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg', title: 'Flower1'},
    {url: 'http://static.flickr.com/75/199481072_b4a0d09597_s.jpg', title: 'Flower2'},
    {url: 'http://static.flickr.com/57/199481087_33ae73a8de_s.jpg', title: 'Flower3'},
    {url: 'http://static.flickr.com/77/199481108_4359e6b971_s.jpg', title: 'Flower4'},
    {url: 'http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg', title: 'Flower5'},
    {url: 'http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg', title: 'Flower6'},
    {url: 'http://static.flickr.com/58/199481218_264ce20da0_s.jpg', title: 'Flower7'},
    {url: 'http://static.flickr.com/69/199481255_fdfe885f87_s.jpg', title: 'Flower8'},
    {url: 'http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg', title: 'Flower9'},
    {url: 'http://static.flickr.com/70/229228324_08223b70fa_s.jpg', title: 'Flower10'}
];

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
{
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    var idx = carousel.index(i, mycarousel_itemList.length);
    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
    carousel.remove(i);
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
    return '<img src="' + item.url + '" width="75" height="75" alt="' + item.title + '" />';
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        wrap: 'circular',
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback},
        vertical: true,
        scroll: 1,
        auto : 1,
        animation : 3000.0
    });
});

</script>

saila · 27.12.2009

AW: JQuery - Funktion gesucht

Bei animate die Angabe 3000.0 Punkt 0 ist unnötig. Und du kannst animate noch erweitern. Siehe hierzu: Effects/animate - jQuery JavaScript Library

Samuelll · 27.12.2009

AW: JQuery - Funktion gesucht

Danke dir soweit.

Werd mich mal weiter schlau machen .. und auch mal schauen wie ich die Laufrichtung des automatischen Bildlaufs umkehren kann.

.0 is ne Angewohnheit von CSS

Danke bis zur nächsten Frage

saila · 27.12.2009

AW: JQuery - Funktion gesucht

Auch in CSS macht .0 keinen Sinn

Samuelll · 27.12.2009

AW: JQuery - Funktion gesucht

Nicht ?
Also Border 0.1em ist definitiv was anderes als Border 0 oder Border 1.0
Somit macht 0.1 bestimmt einen Sinn ;-)

So hab ich eine saubere Schreibweise. Immer mit Nachkommestelle.
Ich find das macht Sinn.

saila · 27.12.2009

AW: JQuery - Funktion gesucht

Samuelll schrieb:
Nicht ?
Also Border 0.1em ist definitiv was anderes als Border 0 oder Border 1.0
Somit macht 0.1 bestimmt einen Sinn ;-)

Wenn dann:

Code:

.class {
 border: 1em solid #000000; /* 1.0 ist somit unnötig */
}

/* oder */
.class-a {
 border: .01em solid #000000; /* die 0 vor Punkt - auch unnötig */
}

Samuelll · 27.12.2009

AW: JQuery - Funktion gesucht

Ich halte die 0 dabei für sauerer. Aber wir müssen ja hier nicht einer Meinung sein. Machen wir es halb beide weiterhin anders.

Ist hier an dieser Stelle eh Offtopic.

saila schrieb:

Wenn dann:

Code:

.class {
 border: 1em solid #000000; /* 1.0 ist somit unnötig */
}

/* oder */
.class-a {
 border: .01em solid #000000; /* die 0 vor Punkt - auch unnötig */
}

Danke für die Vervollständigung des CSS-Codes. Das so ausführlich zu schreiben, war für mich an dieser Stelle wiederum unnötig.
Aber, wie ich an deinem Code sehe, wusstest du ja was ich meinte ;-)

Auch wenn wir uns bzgl. CSS uneinig sind, abermals danke für Deine Hilfe mit JQuery.

saila · 27.12.2009

AW: JQuery - Funktion gesucht

Bei CSS ist es im Grunde egal ob mit oder ohne 0 bei Dezimal. Allerdings kann dies bei JavaScript und jQuery schon anderst aussehen. Da du eine Art Counter mit den 3000 startest, könnte z.b. die .0 oder .4 schon ein Problemchen darstellen. In welcher Art und Weise - keine Ahnung - aber manchmal sind es eben gerade solch kleinen Dinge.

Und ob ich einen Code ausführlich oder nicht ausführlich schreibe in einem Tut-Forum ist eben nicht egal, weil andere mitlesen und für diese es dann eben einfacher zu verstehen ist

Samuelll · 27.12.2009

AW: JQuery - Funktion gesucht

Für JavaScript/JQuery werd ich es mir merken und die Nachkommastelle entfernen. Danke abermals für den Tip.