Получение Fancybox для работы

Я должен ослепнуть здесь, я пытался целыми веками, чтобы запустить Fancybox! Я прочитал и перечитал документацию и даже скопировал точный код, который они использовали, и все же FancyBox отказывается вызывать ...Получение Fancybox для работы

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN:UK"> 
<head> 
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> 
<meta name="description" content="" /> 
<meta name="keywords" content="" /> 
<meta name="robots" content="index,follow" /> 
<link type="text/css" rel="stylesheet" href="styles/style.css" /> 
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen" /> 
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.6"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$(".various").fancybox({ 
maxWidth : 800, 
maxHeight : 600, 
fitToView : false, 
width  : '70%', 
height  : '70%', 
autoSize : false, 
closeClick : true, 
openEffect : 'none', 
closeEffect : 'none' 
}); 
}); 
</script> 
<title>Title</title> 
</head> 

<body> 

<div id="wrapper"> 
<div class="menu"> 
    <div id="box1_and_2"> 
     <a class="various" data-fancybox-type="iframe" href="http://fancyapps.com/fancybox/demo/iframe.html"> 
     <div id="box1" class="link"> 
      <img src="images/box1.jpg" alt="" class="fade" /> 
      <div class="info"> 
       <p>Title</p> 
       <img src="images/info.png" alt="" /> 
      </div> 
     </div>

Большое спасибо!

источник

2012-06-06 HedKandiMan

Ошибки в консоли? – Jivings

есть еще одна ошибка на странице? – Rooster

Вы проверили журналы JS, чтобы узнать, есть ли ошибки? – halfer

Вы вызываете fancybox js перед вызовом jquery. Также рекомендуется добавить любые дополнительные скрипты перед закрывающим тегом body. Я тестировал это, и он работает. :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN:UK"> 

    <head> 
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" 
    /> 
    <meta name="description" content="" /> 
    <meta name="keywords" content="" /> 
    <meta name="robots" content="index,follow" /> 
    <link type="text/css" rel="stylesheet" href="styles/style.css" /> 
    <link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.6" 
    type="text/css" media="screen" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
    <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.6"></script> 
    <title>Title</title> 
</head> 

<body> 
    <div id="wrapper"> 
     <div class="menu"> 
      <div id="box1_and_2"> 
       <a class="various" data-fancybox-type="iframe" href="http://fancyapps.com/fancybox/demo/iframe.html"> 
    <div id="box1" class="link"> 
     <img src="images/box1.jpg" alt="" class="fade" /> 
     <div class="info"> 
      <p>Title</p> 
      <img src="images/info.png" alt="" /> 
     </div> 
    </div> 
    <script type="text/javascript"> 
$(document).ready(function() { 
$(".various").fancybox({ 
maxWidth : 800, 
maxHeight : 600, 
fitToView : false, 
width  : '70%', 
height  : '70%', 
autoSize : false, 
closeClick : true, 
openEffect : 'none', 
closeEffect : 'none' 
}); 
}); 
</script> 
    </body> 
    </html>

источник

2012-06-06 15:56:46 Blainer

oooooooooooooh Я глупый Гектор! Знал, что это будет нечто тривиальное. Большое спасибо за вашу помощь! – HedKandiMan

Получение Fancybox для работы

ответ

Смежные вопросы