Fancybox внутри содержимого Ajax

Question

Я использую ajax для представления контента на моем сайте. При нажатии в меню он открывает содержимое внутри #content div. Вот мой код AJAX.

$(document).ready(function() {
    $('.menu li a').click(function(){
        var toLoad = $(this).attr('href')+' #content';
        $('#content').animate({"width": "0px"},'normal',loadContent);
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent());
        }
        function showNewContent() {
            $('#content').animate({"width": "0px"},'fast');
            $('#content').animate({"width": "664px"},'fast');
        }
        return false;
    });
});

Я хочу использовать эффект лайтбокса Fancybox (http://fancybox.net) внутри моего содержимого ajax. Ниже приведен код, необходимый обычно для Fancybox.

    <script type="text/javascript" src="js/fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("a#example4").fancybox({
                'opacity'       : true,
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic',
            });
        });
    </script> 

Как я могу заставить это работать? Аякс звонить?

Answer 1

В обработчике обратного вызова load должен быть указатель на функцию showNewContent() сразу вызовет функцию. Попробуйте это.

$(document).ready(function() {
    $('.menu li a').click(function(){
        var toLoad = $(this).attr('href')+' #content';
        $('#content').animate({"width": "0px"},'normal',loadContent);
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent);
        }
        function showNewContent() {
            $("#example4").fancybox({
                'opacity'       : true,
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic',
            });
        }
        return false;
    });
});

Answer 2

Во-первых, эта строка неверна

$('#content').load(toLoad,'',showNewContent());

Это говорит о вызове showNewContent() и назначает все, что он возвращает этому событию.

Это должно быть

$('#content').load(toLoad,'',showNewContent);

Теперь написано, чтобы назначить ссылку на эту функцию и запустить ее, когда это необходимо.

Теперь, чтобы ответить на ваш вопрос, вам нужно позвонить $("a#example4").fancybox({...}); после загрузки содержимого, что означает, что вы должны поставитьэто в функции showNewContent.