Fancybox 未加载答案

【问题标题】：Fancybox is not loadingFancybox 未加载
【发布时间】：2012-11-27 22:34:56
【问题描述】：

Fancybox 不适合我，但我想不通。我想我按要求做了一切。代码资料：

    <script src="/wp-content/themes/ase/js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="/wp-content/themes/ase/js/transition.js" type="text/javascript"></script>
    <script src="/wp-content/themes/ase/fancybox/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script>
    <script src="/wp-content/themes/ase/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
    <link href="/wp-content/themes/ase/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript">
        $('.fancybox').fancybox();
    </script>

稍后：

<a href="/wp-content/gallery/uber-uns/armatur-1.png" class="fancybox" rel="fancybox">/wp-content/gallery/uber-uns/armatur-1.png</a>


<a href="/wp-content/gallery/uber-uns/armatur-2.png" class="fancybox" rel="fancybox">/wp-content/gallery/uber-uns/armatur-2.png</a>


<a href="/wp-content/gallery/uber-uns/armatur-3.png" class="fancybox" rel="fancybox">/wp-content/gallery/uber-uns/armatur-3.png</a>

链接是绝对的，因为它们是由 WordPress 创建的。我的错在哪里？

【问题讨论】：

尝试将$('.fancybox').fancybox(); 包裹在$(document).ready(function(){...}); 中
我们能看到整个 html 吗？也许，这可能是因为您在 a 标签之前执行脚本。尝试将 $('.fancybox').fancybox() 脚本移动到 a 标签的定义下方
这成功了！谢谢！ :-)

标签： jquery wordpress fancybox

【解决方案1】：

如果你尝试怎么办：

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

【讨论】：

它不能解决问题，但如果我这样做，我不会被重定向到图像。它没有发生任何可见的事情。

【解决方案2】：

在 Firefox 或 Safari 或 IE 中使用 Firebug 或开发工具来查看您遇到的 javascript 错误。

而使用 Wordpress，您需要正确地将脚本排入队列，而不是简单地将它们链接到 header.php，尤其是。用于依赖 jQuery 的 jQuery 库和其他脚本。您的主题可能已经在加载主 jQuery 库。

如果 transition.js 依赖于 jQuery - 可能是 - 在 functions.php 中加载它

见http://codex.wordpress.org/Function_Reference/wp_enqueue_script

作为该文档中的一个示例，它位于您主题的 functions.php 中：

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_template_directory_uri() . '/transition.js',
        array('jquery')
    );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

【讨论】：