jQuery-为图像滚动设置“活动”类

Question

I have content loading dynamically (using new WP_query loop in WordPress) for a jQuery carousel or image-scroll function -- where the image-scroll is a li list of images, styled to look like a strip of images.

When the image-scroll works properly, one of the images in the li tag has a class of active, which expands the image and makes it look like it's in front of the other images,

... and as the user clicks through this strip of images, the active class changes/moves to the targeted li tag, expanding that image.

What's happening is that none of the li tags are active when the page loads - since the content is dynamic through the WP loop (I didn't want all of the li tags to start with the active class, so I didn't add it to the loop),

...and so the images are just lined up in a consistent strip w/o one of the images being expanded (or having that active class).

It is only if the user happens to click on one of the images that it expands,

...but i need one of the images to be expanded (to have the class of active) before the user clicks so I need the active class added as/after the page loads.

I have tried through the jQuery code to target one of the li tags to add the active class, using filter() or closest() after the page loads, but that didn't work.

Or maybe I should write a new script to add the active class?

Any help much appreciated!

I have the abbreviated html and the jQuery function below.

_Cindy

ps as the code indicates, I also have corresponding article titles that scroll with the images, so perhaps I need to adjust the jQuery there, too.

    <div class="articles-scroll">

<ul class="images-scroll">
    <li><!-- I need only one of these tags to have a class of active to start -->

        <a href="#">
            <span class="set-image-border" style="float: none;">
               <img class="setborder" src="image-set-by-new-wp_query">
            </span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="set-image-border">
               <img class="setborder" src="image-set-by-new-wp_query">
            </span>
        </a>
    </li>
</ul>

<div class="clear-float"></div>

<!-- in this section of html one of the article titles is active to coordinate with the active li image above to produce a corresponding clickable title, this works, but once again, only when user clicks on an image to begin the jQuery image-scroll function -->

        <div class="wrapper">

<ul class="images-content">
    <li>
            <div class="article-header">
                <h2>
                    <a href="link-set-by-new-wp_query">
                </h2>
            </div>
        </div>
    </li>
    <li>
        <div class="wrapper">
            <div class="article-header">
                <h2>
                    <a href="link-set-by-new-wp_query">
                </h2>
            </div>
        </div>
    </li>
</ul>

</div>


    jQuery(".images-scroll li a").click(function() {
    jQuery(this).parent().parent().find("li").removeClass("active");
// tried the following instruction as well as on next line, but no go
// jQuery(this).parent().parent().closest("li").addClass("active");
    jQuery(this).parent().addClass("active");
    jQuery(this).parent().parent().parent().find(".images-content > li").removeClass("active");
    jQuery(this).parent().parent().parent().find(".images-content > li").eq(jQuery(this).parent().index()).addClass("active");
    var step = ((-250)*(jQuery(this).parent().index()-1))-60;
    //alert(step);
    jQuery(this).parent().parent().css("margin-left", step+"px");
    return false;
});

Answer 1

The reason why the code you wrote didn't work is that you have it inside a click handler, so nothing happens until you click one of the targeted elements. If you want something to happen on page load you can use $(document).ready() (can be shortened as $() ) or $(window).load() . Just add the following lines below or above your existing code.

jQuery(function(){
    var $listItems = jQuery('.images-scroll li');
    $listItems.first().addClass('active');
    // Second list item
    $listItems.eq(1).addClass('active');
    // Third list item
    $listItems.eq(2).addClass('active');
});

Also, please note that (unless it conflicts with a different plugin), writing $ is shorter than jQuery , and it should do the same.