Блог

Главная - Вопросы по программированию - Fancybox не будет работать

Fancybox не будет работать

#javascript #jquery #html #fancybox

#javascript #jquery #HTML #fancybox

Вопрос:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

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

<body>
<a id = "single_image" href = "images/decoration/bottom4.jpg"><img src="images/decoration/bottom4.jpg" alt=""/></a>
<script type="text/javascript">
    $(document).ready(function(){
        $("a#single_image").fancybox();
    });
</script>
</body>
</html>

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

Комментарии:

1. Какие-либо ошибки в консоли?

2. В зависимости от версии fancybox jQuery 1.4 может быть недостаточно современным. Вы также захотите удалить пробелы в объявлениях атрибутов.

Ответ №1:

Обязательно используйте приведенные здесь инструкции http://fancyapps.com/fancybox /

Рабочий код:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="../../fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="../../fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

</head>

<body>
<a class="fancybox" rel="group" href="images/decoration/bottom4.jpg"><img src="images/decoration/bottom4.jpg" alt="" /></a>

<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body>
</html>