using two fancybox methods together

Question

So I have the code for fancybox:

$(".fancybox").fancybox({
    beforeShow: function () {
        var alt = this.element.find('img').attr('alt');
        this.inner.find('img').attr('alt', alt);
        this.title = alt;
    }
});

and

$(document).ready(function () {
    $(".fancybox").fancybox({
        helpers: {
            overlay: {
                locked: false
            }
        }
    });
});

when I try to use them both I get a syntax error:

$(document).ready(function () {
    $(".fancybox").fancybox({
        helpers: {
            overlay: {
                locked: false
            }
        }
        beforeShow: function () {
            var alt = this.element.find('img').attr('alt');
            this.inner.find('img').attr('alt', alt);
            this.title = alt;
        }
    });
});

and when I use them separately neither of the fancybox functions work.

<script>
 $(document).ready(function () {
        $(".fancybox").fancybox({
            helpers: {
                overlay: {
                    locked: false
                }
            }
        });
    });
</script>
<script>
    $(".fancybox").fancybox({
        beforeShow: function () {
            var alt = this.element.find('img').attr('alt');
            this.inner.find('img').attr('alt', alt);
            this.title = alt;
        }
    });
</script>

How can I use them both?

Answer 1

You're missing a comma in your object properties on line 7 between helpers: { ... } and beforeShow: function() { ... }

$(document).ready(function () {
    $(".fancybox").fancybox({
        helpers: {
            overlay: {
                locked: false
            }
        }, // <-- this comma right here is missing in your code
        beforeShow: function () {
            var alt = this.element.find('img').attr('alt');
            this.inner.find('img').attr('alt', alt);
            this.title = alt;
        }
    });
});