Question

I am trying to implement a “show/hide EXIF data” button inside Shadowbox. Here’s the code to generate the div containing the exif data, and to use fadetoggle() to show and hide it:

Shadowbox.init({
    onFinish: function (rawr) {
        $("#sb-body-inner").prepend("<div id='sb-exif'>This is some exif data.</div>");
        $("#sb-nav-exif").click(function () {
            $("#sb-exif").fadetoggle(250, "linear");
        });
    }
});

The code for the actual button is as follows (from shadowbox.js):

<a id="sb-nav-exif" title="EXIF Data"></a>

Can anyone suggest why this might not be working? I’m very new to jQuery… Thanks!

Answer 1

It’s really simple. Because the name of the method is fadeToggle with camelcasing, not fadetoggle.

I’m guessing that if you had a look at the browser console you’d see an error like this:

Uncaught TypeError: Object [object Object] has no method 'fadetoggle'

EDIT (in response to your comment)

You’re binding the click event after each photo is loaded and the fadeToggle actions get stacked. Try using the onFinish and onClose events of the shadowbox plugin, to unbind the click event when the image changes or is closed, like this:

Shadowbox.init({
    onFinish: function (rawr) {
        $("#sb-body-inner").prepend("<div id='sb-exif'>This is some exif data.</div>");
        $("#sb-nav-exif").click(function () {
            $("#sb-exif").fadeToggle(250, "linear");
        });
    },
    onChange: function() {
        $("#sb-nav-exif").unbind('click');
    },
    onClose: function() {
        $("#sb-nav-exif").unbind('click');
    }
});

You need both because content is loaded, and the onFinish event is called both when you open a new image and when you are navigating using the next/previous controls.

I suggest trying this alternative though, to avoid binding and unbinding the click event over and over again.

Shadowbox.init({
    onFinish: function (rawr) {
        $("#sb-body-inner").prepend("<div id='sb-exif'>This is some exif data.</div>");
    }
});

// this way you only bind it once
$('#sb-container').on('click', "#sb-nav-exif", function() {
    $("#sb-exif").fadeToggle(250, "linear");
});