[jquery] jcarousel vertoont raar gedrag - Softwareontwikkeling

vrijdag 28 november 2008 10:44

Acties:

0 Henk 'm!

Topicstarter

Beste mensen,
Ik wil op een site gebruik maken van jCarousel maar dan met de autoscroll functie. Dit lukt op zich aardig alleen een probleempje.

Ik heb een lijst van 5 artikelen die op volgorde voorbij zouden moeten komen. Maar om een of andere reden begint hij bij Artikel 1. Daarna springt hij naar artikel 4. Vervolgens naar artikel 5 en dan weer terug naar 1.
Dit is wat er uit mijn firebug console log komt:

JavaScript:

<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1">
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal" jcarouselindex="4">
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-5 jcarousel-item-5-horizontal" jcarouselindex="5">
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1">
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal" jcarouselindex="4">
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-5 jcarousel-item-5-horizontal" jcarouselindex="5">

Ik heb het voorbeeld vrijwel letterlijk overgenomen van de site en toch gedraagt het element zich anders.

Hieronder is mijn implementatie:

HTML:

<html>
    <head>
        <script type="text/javascript" language="javascript" src="jcarousel/lib/jquery-1.2.3.pack.js"></script>
        <script type="text/javascript" language="javascript" src="jcarousel/lib/jquery.jcarousel.pack.js"></script>
        <link rel="stylesheet" type="text/css" href="jcarousel/lib/jquery.jcarousel.css" >
        <link rel="stylesheet" type="text/css" href="jcarousel/skins/tango/skin.css"> 

        <script type="text/javascript">

            function mycarousel_initCallback(carousel)
            {
                // Disable autoscrolling if the user clicks the prev or next button.
                carousel.buttonNext.bind('click', function() {
                    carousel.startAuto(0);
                });

                carousel.buttonPrev.bind('click', function() {
                    carousel.startAuto(0);
                });

                // Pause autoscrolling if the user moves with the cursor over the clip.
                carousel.clip.hover(function() {
                    carousel.stopAuto();
                }, function() {
                    carousel.startAuto();
                });
            };

            jQuery(document).ready(function() {
                jQuery('#mycarousel').jcarousel({
                    auto: 1,
                    wrap: 'last',
                    initCallback: mycarousel_initCallback,
                    itemVisibleInCallback: function(jcarousel, index){
                        console.log(index);
                }
            });
             
            });
             
        </script>
    </head>
    
    <body>
        <div style="padding-bottom:10px"> 
            <ul id="mycarousel" class ="jcarousel-skin-tango">
                <li>
                    <p class="kopKlein" style="width:120px">Artikel 1</p>
                    <p class="tekstVak" style="width:120px">
                        <b>Lees alles over onze nieuwe content rotator</b>
                        <a href="http://site/news/news_item/7">read more&gt;</a>
                    </p>
                </li>
                <li>
                    <p class="kopKlein" style="width:120px">Artikel 2</p>
                    <p class="tekstVak" style="width:120px">

                        <b>Blaat je </b>
                         <a href="http://site/news/news_item/5">read more&gt;</a>
                    </p>
                </li>
                <li>
                    <p class="kopKlein" style="width:120px">Artikel 3</p>
                    <p class="tekstVak" style="width:120px">
                        <b>Dit gaat nergens over </b>

                         <a href="http://site/news/news_item/6">read more&gt;</a>
                    </p>
                </li>
                <li>
                    <p class="kopKlein" style="width:120px">Artikel 4</p>
                    <p class="tekstVak" style="width:120px">
                        <b>test head</b>
                         <a href="http://site/news/news_item/4">read more&gt;</a>

                    </p>
                </li>
                <li>
                    <p class="kopKlein" style="width:120px">Artikel 5</p>
                    <p class="tekstVak" style="width:120px">
                        <b>Interesting subhead</b>
                         <a href="http://site/news/news_item/2">read more&gt;</a>
                    </p>

                </li>
            </ul>
        </div>

    </body>

</html>

In eerste instantie had ik het in mijn site getest maar omdat ik bang was dat er misschien ergens anders nog scripts lopen heb ik het helemaal apart gezet en hoopte ik dat dat het probleem zou oplossen maar dat is niet het geval.
Zou iemand mij op weg kunnen helpen?

vrijdag 28 november 2008 11:12

Acties:

0 Henk 'm!

Noork

Hier gaat alles goed met bovenstaande code en zelfde jquery/carousel versies. Dit is je gehele code?

vrijdag 28 november 2008 11:16

Acties:

0 Henk 'm!

Jigs

Topicstarter

Noork schreef op vrijdag 28 november 2008 @ 11:12:
Hier gaat alles goed met bovenstaande code en zelfde jquery/carousel versies. Dit is je gehele code?

Ja, dat is de gehele code.
Je krijgt dus artikel 1 t/m 5 in de juiste volgorde tezien?
Welke browser gebruik je?

vrijdag 28 november 2008 11:19

Acties:

0 Henk 'm!

Noork

De volgorde is hier juist. Alleen het autoscrollen gaat uiteraard wel wat chaotisch, het gaat snel, en springt steeds heen en weer.

Gebruik hier de laatste FF3.

vrijdag 28 november 2008 11:22

Acties:

0 Henk 'm!

Jigs

Topicstarter

Noork schreef op vrijdag 28 november 2008 @ 11:19:
De volgorde is hier juist. Alleen het autoscrollen gaat uiteraard wel wat chaotisch, het gaat snel, en springt steeds heen en weer.

Gebruik hier de laatste FF3.

Daar heb ik het over.
Hij springt keihard van 1 naar 4. Vervolgens gaat hij langzaam naar 5 en springt hij terug naar 1.
Mijn vraag is dus hoe ik dat onder controle kan krijgen.

vrijdag 28 november 2008 11:25

Acties:

0 Henk 'm!

Noork

Jigs schreef op vrijdag 28 november 2008 @ 11:22:
[...]

Daar heb ik het over.
Hij springt keihard van 1 naar 4. Vervolgens gaat hij langzaam naar 5 en springt hij terug naar 1.
Mijn vraag is dus hoe ik dat onder controle kan krijgen.

Hier scrollt alles op eenzelfde snelheid. Snelheid is gewoon aan te passen.
Jouw stukje werkt exact zoals dit voorbeeld: http://sorgalla.com/proje...examples/static_auto.html

Waarbij daar de snelheid op 2 seconden is ingesteld, en bij jou op 1.

vrijdag 28 november 2008 11:32

Acties:

0 Henk 'm!

Jigs

Topicstarter

Noork schreef op vrijdag 28 november 2008 @ 11:25:
[...]

Hier scrollt alles op eenzelfde snelheid. Snelheid is gewoon aan te passen.
Jouw stukje werkt exact zoals dit voorbeeld: http://sorgalla.com/proje...examples/static_auto.html

Waarbij daar de snelheid op 2 seconden is ingesteld, en bij jou op 1.

Ja,daar komt hij oorspronkelijk ook vandaan. Maar Ik wil dat hij 1 item per keer springt en niet ineens van 1 naar vier. En dat krijg ik in mijn verhaal niet voor elkaar. Misschien moet ik ook even mijn css posten. Dan zie je misschien beter wat er gebeurt:

Cascading Stylesheet:

.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 5px;
    background: #F3F3F3;
    /*background: #F0F6F9;*/
    border: 1px solid #346F97;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 170px;
    /*width: 245px;*/
    /*padding: 20px 40px;*/
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    /*width:  245px;*/
    width:  150px;
    height: 230px
    /*height: 75px;*/
}


.jcarousel-skin-tango .jcarousel-item {
    /*width: 150px;*/
    width: 150px;
    height: 210px;
    /*height:70px;*/
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-right: 10px;
    margin-left: 10px
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    /*
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-horizontal.png) no-repeat 0 0;*/
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    /*background-position: -32px 0;*/
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    /*background-position: -64px 0;*/
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    /*cursor: default;
    background-position: -96px 0;*/
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    /*position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev-horizontal.png) no-repeat 0 0;
    */
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
    /*background-position: -32px 0;*/
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    /*background-position: -64px 0;*/
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    /*cursor: default;
    background-position: -96px 0;*/
}

vrijdag 28 november 2008 11:51

Acties:

0 Henk 'm!

Noork

Jigs schreef op vrijdag 28 november 2008 @ 11:32:
[...]
Ja,daar komt hij oorspronkelijk ook vandaan. Maar Ik wil dat hij 1 item per keer springt en niet ineens van 1 naar vier. En dat krijg ik in mijn verhaal niet voor elkaar.

De volgorde is dus gewoon prima, alleen scrollt hij steeds met 3 tegelijk. Dit is gewoonweg zo omdat dit de default is. Dit had je kunnen zien als je de jcarousel.js had geopend. Staat wellicht ook in de documentatie. Je kunt dit oplossen door gewoon "scroll: 1" toe te voegen in "jQuery('#mycarousel').jcarousel({ ".

Zie ook hier, http://sorgalla.com/projects/jcarousel/, bij het kopje Configuration.

[ Voor 6% gewijzigd door Noork op 28-11-2008 11:52 ]

vrijdag 28 november 2008 12:00

Acties:

0 Henk 'm!

Jigs

Topicstarter

*ouch*

je hebt gelijk ja. Wie zet dat ding ook default op 3.

Maar goed. Hij doet het nu bijna. Nog één klein probleempje, namelijk dat hij als hij bij artikel 5 is eerst een tikje naar links schuift en vervolgens gaat hij terug naar 1. Het gaat niet in 1 spontane beweging.