Question

I’m able to swap an image in a div on each tab change according to a data attribute in each tab’s html. But I also want to change another div for the photographer’s credit, and I’m not doing something right, even though it should be easy. jsfiddle here: http://jsfiddle.net/8muBm/56/

$("#tabs").tabs({
    select: function($event, ui) { /* Extract the image from the active tab: */
        var img = $(ui.panel).data("image");

        /* Animate the header out, set the background css, then animate back in: */

        $("#headerwrapper").animate({
            opacity: 'toggle'
        }, function() {
            $(this).css("background-image", "url(" + img + ")").animate({
                opacity: 'toggle'
            });

            /* credit changer */

            $("#photocredit").text($(this).attr("data-credit"));

        });
    }
});

Answer 1

I think your $(this) is pointing to the div “headerwrapper” tag.

Try:

$("#tabs").tabs({
    select: function($event, ui) { /* Extract the image from the active tab: */
    var img = $(ui.panel).data("image");

    /* Animate the header out, set the background css, then animate back in: */

    $("#headerwrapper").animate({
        opacity: 'toggle'
        }, function() {
            $(this).css("background-image", "url(" + img + ")").animate({
                opacity: 'toggle'
            });

            /* credit changer */

            $("#photocredit").text($(ui.panel).data("credit"));

        });
    }
});