Question

I’m using the PrettyPhoto jQuery plugin for an image gallery, and I’d like to make an API call with a basic text link using the following function to navigate to the next image in a series:

$.prettyPhoto.changePage('next');

Since I’ll be making this call frequently throughout the site, I’d like to create a basic Javascript function “next” so that for each onclick instance, I can simply write “onclick=next();” rather than typing out the whole thing– i.e. onClick=”$.prettyPhoto.changePage(‘next’);”– each time. I’ve tried to write the function as follows, but it doesn’t seem to be working:

$(document).ready(function(){
    function next() {
        $.prettyPhoto.changePage('next');
    };
});

What am I doing wrong here? I’m obviously a novice at JS programming, but any direction here would be most appreciated; and please let me know if I should provide any more information.

Answer 1

There is no need to wrap your function in the document ready. Apart from that, you would be putting the next function in the global space which is something you should try to avoid. You could do something like:

$.nextPhoto = function() { $.prettyPhoto.changePage('next');}

and call it with

$.nextPhoto();

which puts it in the jQuery namespace but the better approach would be to use jquery event handlers .click() and bind the prettyPhoto function directly to the links rather than use inline javascript