JQuery Cycle - Before callback parameters

Question

I can't seem to figure out how to use the parameters of the Before callback of Jquery Cycle.

jQuery('#slider_accueil').cycle({ 
    fx:     'fade',
    timeout: 5000,
    after: onAfter,
    before: onBefore,
    startingSlide: 0,
    next: '.next_btn_slider',
    prev: '.prev_btn_slider'
});

function onBefore(currSlideElement, nextSlideElement, options, forwardFlag){
    jQuery('.indicator').removeClass('current')
}

I want to do something in the container of the next element, but nextSlideElement sends back loads of data, and nothing of it that I can relate to the next element in line (was looking for some kind of id or class, that I could not find)

So here's the heart of the question: How to I target the next element being slided to with the onBefore function above?

EDIT: Heres an image of the nextSlideElement put into the console via console.dir(nextSlideElement)

enter image description here

EDIT 2: Here is the code, I'm trying to add a class to the thumbnail related to each slide (1 with 1, 2 with 2, etc.)

<!--Slider sur l'accueil-->
<div id="sliderAccueil">

    <!--Contrôles du slider (next/previous)-->
    <div style="display:none;"></div>
    <img class="prev_btn_slider" src="http://www.x.com/wp-content/themes/Sandbox/images/slider_previous.png" alt="Image Précédente" />
    <img class="next_btn_slider" src="http://www.x.com/wp-content/themes/Sandbox/images/slider_next.png" alt="Image Suivante" />
    <div id="nav"></div>

    <!--Images du slider-->                
    <div id="slider_accueil">


        <div style="width:778px; height:384px; overflow:hidden;">
            <a href="http://www.x.com/">

                <!--Image-->
                                            <img src="http://www.x.com/wp-content/uploads/2011/09/slider1.jpg" alt="Assurer la Sécurité" />

                <!--Contenu rajouté-->
                <div>
                                                    <div class="maintext">
                                                                                                            <h2>Assurer la Sécurité</h2>
                                                                                                    <p>Assurer la Sécurité</p>
                                                        </div>
                    <div class="link">
                        <a href="http://www.x.com/">En savoir plus</a>
                        <a href="http://www.x.com/" class="call_slide"><img src="http://www.x.com/wp-content/themes/Sandbox/images/call_slider.png" alt="En savoir plus" /></a>
                    </div>
                                                </div>

            </a>
        </div>



        <div style="width:778px; height:384px; overflow:hidden;">
            <a href="http://www.x.com/">

                <!--Image-->
                                            <img src="http://www.x.com/wp-content/uploads/2011/09/slider_item_bilan_travaux.jpg" alt="Bilan des travaux" />

                <!--Contenu rajouté-->
                <div>
                                                    <div class="maintext">
                                                                                                            <h2>Special stuff</h2>
                                                                                                    <p>Bilan des travaux</p>
                                                        </div>
                    <div class="link">
                        <a href="http://www.x.com/">En savoir plus</a>
                        <a href="http://www.x.com/" class="call_slide"><img src="http://www.x.com/wp-content/themes/Sandbox/images/call_slider.png" alt="En savoir plus" /></a>
                    </div>
                                                </div>

            </a>
        </div>



        <div style="width:778px; height:384px; overflow:hidden;">
            <a href="http://www.x.com/">

                <!--Image-->
                                            <img src="http://www.x.com/wp-content/uploads/2011/09/slider_item_poutrelles.jpg" alt="Des travaux inusités à 300 pieds au-dessus de l’eau" />

                <!--Contenu rajouté-->
                <div>
                                                    <div class="maintext">
                                                                                                            <h2>Travaux</h2>
                                                                                                    <p>Des travaux inusités à 300 pieds au-dessus de l’eau</p>
                                                        </div>
                    <div class="link">
                        <a href="http://www.x.com/">En savoir plus</a>
                        <a href="http://www.x.com/" class="call_slide"><img src="http://www.x.com/wp-content/themes/Sandbox/images/call_slider.png" alt="En savoir plus" /></a>
                    </div>
                                                </div>

            </a>
        </div>



        <div style="width:778px; height:384px; overflow:hidden;">
            <a href="">

                <!--Image-->
                                            <img src="http://www.x.com/wp-content/uploads/2011/10/slider-1961-05-05.jpg" alt="Photos d’archive" />

                <!--Contenu rajouté-->
                <div>
                                                    <div class="maintext">
                                                                                                            <h2 style="margin-bottom:0;">Photos d’archive</h2>
                                                                                                </div>
                    <div class="link">
                        <a href="">En savoir plus</a>
                        <a href="" class="call_slide"><img src="http://www.x.com/wp-content/themes/Sandbox/images/call_slider.png" alt="En savoir plus" /></a>
                    </div>
                                                </div>

            </a>
        </div>



        <div style="width:778px; height:384px; overflow:hidden;">
            <a href="http://www.x.com/">

                <!--Image-->
                                            <img src="http://www.x.com/wp-content/uploads/2011/09/slide_reseau_sociaux.jpg" alt="Branché sur les réseaux sociaux" />

                <!--Contenu rajouté-->
                <div>
                                                    <div class="maintext">
                                                                                                            <h2>Réseaux Sociaux</h2>
                                                                                                    <p>Branché sur les réseaux sociaux</p>
                                                        </div>
                    <div class="link">
                        <a href="http://www.x.com/">En savoir plus</a>
                        <a href="http://www.x.com/" class="call_slide"><img src="http://www.x.com/wp-content/themes/Sandbox/images/call_slider.png" alt="En savoir plus" /></a>
                    </div>
                                                </div>

            </a>
        </div>


    </div><!--#slider_accueil-->

    <!--Thumbnails contrôlant le slider-->
    <div id="thumbnails_slider_accueil">

        <ul>


            <li id="li_thumb1">
                <a id="thumb1" class="thumb_slider_accueil">
                                                    <div class="indicator"></div>
                    <div class="thumbnail" style="background:url(http://www.x.com/wp-content/uploads/2011/09/slider1-150x150.jpg) center center">
                        <p>Assurer la Sécurité</p>
                    </div>
                    <div class="clear"></div>
                                                </a>
            </li>


            <li id="li_thumb2">
                <a id="thumb2" class="thumb_slider_accueil">
                                                    <div class="indicator"></div>
                    <div class="thumbnail" style="background:url(http://www.x.com/wp-content/uploads/2011/09/slider_item_bilan_travaux-150x150.jpg) center center">
                        <p>Bilan des travaux</p>
                    </div>
                    <div class="clear"></div>
                                                </a>
            </li>


            <li id="li_thumb3">
                <a id="thumb3" class="thumb_slider_accueil">
                                                    <div class="indicator"></div>
                    <div class="thumbnail" style="background:url(http://www.x.com/wp-content/uploads/2011/09/slider_item_poutrelles-150x150.jpg) center center">
                        <p>Des travaux inusités à 300 pieds au-dessus de l’eau</p>
                    </div>
                    <div class="clear"></div>
                                                </a>
            </li>


            <li id="li_thumb4">
                <a id="thumb4" class="thumb_slider_accueil">
                                                    <div class="indicator"></div>
                    <div class="thumbnail" style="background:url(http://www.x.com/wp-content/uploads/2011/10/slider-1961-05-05-150x150.jpg) center center">
                        <p>Photos d’archive</p>
                    </div>
                    <div class="clear"></div>
                                                </a>
            </li>


            <li id="li_thumb5">
                <a id="thumb5" class="thumb_slider_accueil">
                                                    <div class="indicator"></div>
                    <div class="thumbnail" style="background:url(http://www.x.com/wp-content/uploads/2011/09/slide_reseau_sociaux-150x150.jpg) center center">
                        <p>Branché sur les réseaux sociaux</p>
                    </div>
                    <div class="clear"></div>
                                                </a>
            </li>
                                </ul>

    </div><!--#thumbnails_slider_accueil-->
    <div class="clear"></div>
</div><!--#sliderAccueil-->

A part of it is in french, but the code is the same thing over languages

before: null, // transition callback (scope set to element to be shown): function(currSlideElement, nextSlideElement, options, forwardFlag) — MahdeTo, Dec 28 '11 at 14:33
Can you post the html of the next slide element you are trying to modify? In this example I can add a class/remove a class with nextSlideElement no problem. http://jsfiddle.net/mt93D/ — mrtsherman, Dec 28 '11 at 16:13
A chunk of code has been added, so you can see where I'm going. — Fredy31, Dec 28 '11 at 18:31

score 1 · Accepted Answer · answered May 07 '12 at 19:10

You should be able to use this form to get the indicator element for the next slide. The jquery selector allows you to scope it by $(selector,[scope])

function onBefore(currSlideElement, nextSlideElement, options, forwardFlag){
    $('.indicator', nextSlideElement).removeClass('current');
}

JQuery Cycle - Before callback parameters

1 Answers1