how to run my own jQuery function correctly?

Question

I've got this code that's changing a picture and additional link with it.

var imgSwap(pic, link){
    $("#sampleimg")
        .load(function () {   
           $(this).hide();
           $('#indexPic').removeClass('loading');
           $(this).fadeIn(500);
           })
        .error(function () {})
        .attr({src : picArray[5]});
    $("a.frontlink").attr("href", linkArray[0]);
    $('#indexPic').addClass('loading');
}

$("#arcade-button").click(function () { imgSwap(picArray[0], linkArray[0])});

The code works when I run the hole thing after each button, but not when I try to call my own function and optional-parameters. Can't seem to find the flaw... A little help anyone ?

Answer 1

Try:

function imgSwap(pic, link){
    $("#sampleimg").load(function () {   
        $(this).hide();
        $('#indexPic').removeClass('loading');
        $(this).fadeIn(500);
    }).attr({src: pic});
    $("a.frontlink").attr("href", link);
    $('#indexPic').addClass('loading');
}

instead of

var imgSwap(pic, link){ /* further code */ }

Notice also that you name your parameters pic and link but use picArray[5] and linkArray[0] in the function body (thus hardcoding it).

And I think you don't have to provide an empty error function if you don't want that anything happens.

Answer 2

Its in a var right now, if you want to call it on your own you'd probably have to call it like instantiating a new object ex: new imgSwap(pic,link); Calling imgSwap(pic,link) in another way will treat it like an object and not execute the code inside.

Or just change it to be a function like @Felix said.