Fancybox 1.3.4 просто не будет работать

Question

Привет, я пытаюсь реализовать fancybox 1.3.4, и я просто не могу заставить его работать. Вот мой код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery    /1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>
<script src="/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<script src="/fancybox/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css"   media="screen" />
<script type="text/javascript">

$(document).ready(function() {

/* This is basic - uses default settings */

$(".image").fancybox();

/* Using custom settings */

$(".iframe").fancybox({
    'hideOnContentClick': false
});


$("a[href$=.jpg],a[href$=.png],a[href$=.gif]").fancybox();

$(".youtube").click(function() {
    $.fancybox({
        'padding': 0,
        'autoScale': false,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'title': this.title,
        'width': 680,
        'height': 495,
        'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
        'type': 'swf',
        'swf': {
            'wmode': 'transparent',
            'allowfullscreen': 'true'
        }
    });

    return false;
});

Это изображение, которое я хочу открыть fancybox.В настоящее время это просто появляется в новой вкладке.Я использую firebug и вижу, что загружаются все скрипты и таблицы стилей.

 <a class="image" href="http://localhost:2053/files/15-20/theme3/test%20Photo.jpg">test Photo</a>

Answer 1

Я предполагаю, что это была просто ошибка вырезать и вставить, но я собираюсь указать очевидное на всякий случай. Ваш путь к jquery содержит пробелы:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery    /1.4/jquery.min.js"></script>

Должно быть:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

Чтобы на 100% убедиться, что jquery загружен, откройте консоль Firebug и запустите этот фрагмент:

$().jquery;

Он должен ответить, напечатав номер версии.

Answer 2

Похоже, ваша функция document.ready не включает все ваши операторы селектора. Вы также можете пропустить закрывающий тег сценария.

Попробуйте добавить это в конец вашего скрипта:

    });
</script>

Полный скрипт:

    <script type="text/javascript">

$(document).ready(function() {

/* This is basic - uses default settings */

$(".image").fancybox();

/* Using custom settings */

$(".iframe").fancybox({
    'hideOnContentClick': false
});


$("a[href$=.jpg],a[href$=.png],a[href$=.gif]").fancybox();

$(".youtube").click(function() {
    $.fancybox({
        'padding': 0,
        'autoScale': false,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'title': this.title,
        'width': 680,
        'height': 495,
        'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
        'type': 'swf',
        'swf': {
            'wmode': 'transparent',
            'allowfullscreen': 'true'
        }
    });

    return false;
  });
});
</script>

Answer 3

Вы должны изменить src на

<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>

вместо того, что у вас здесь

<script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>

. Внимательно прочитайте, чтобы заметить разницу в атрибуте src двух примеров, сделайте так:измените все атрибуты src, и вы должны быть готовы.