Question

I have a one page site that displays a portfolio. Basically it consists of a a list of images that are displayed as a slideshow with sudoslider

Once a new slideshow (an image in this case) is loaded, the description of the image should be updated.

For some reason or another, the description is displayed twice, as you can see at this version which is created via wordpress. The weird thing is that I have a static version of this website that does not seem to produce this problem, while the html/javascript/css structure is exactly the same (as far as I am not overlooking something).

Relevant pieces of code:

html-list:

<section id="portfolio">
    <ul id="portfolio-ontwerpen" class="noscript">
        <li>
            <figure><img width="800" height="569" src="http://haendehoch.nl/wp/wp-content/uploads/2013/01/klinch1.jpg" class="attachment-large wp-post-image" alt="klinch1" /></figure>
            <figcaption>Klinch poster</figcaption>
        </li>
        <li>
            <figure><img width="800" height="565" src="http://haendehoch.nl/wp/wp-content/uploads/2013/01/hh_grid.jpg" class="attachment-large wp-post-image" alt="hh_grid" /></figure>
            <figcaption>Grid</figcaption>
        </li>
    </ul>
</section>

javascript:

var sudoSlider = $("#portfolio").sudoSlider({
    afterAniFunc:   $("aside figcaption").text($(this).find('figcaption').text()); },
});

$(this) in this case refers to the current slideshow (the current list-item)

sudoslider description of the afterAniFunc (basically a function that is executed after the next slide animation has been finished)

afterAniFunc:false. Same as beforeAniFunc. It’s just runs after the animation (still any animation) has finished. beforeAniFunc does not execute multiple times if you use fade, but can still execute multiple times if you use continuous.

Answer 1

I’m not sure exactly how/why it’s happening, but you seem to be selecting multiple elements with the statement:

$(this).find('figcaption').text()

Selecting only the first element is providing the correct result for me:

$(this).find('figcaption').first().text()