PrettyPhoto 根据文档不工作答案

【问题标题】：PrettyPhoto Not Working According to DocumentationPrettyPhoto 根据文档不工作
【发布时间】：2013-04-19 22:11:23
【问题描述】：

我遵循了他们网站上的所有文档，但我无法让它发挥作用。

我将脚本加载复制到我的脑海中，在正文关闭之前激活脚本，并将 prettyPhoto 钩子放在我的链接上。

但是当我点击链接时，没有任何动画，它只是打开链接指向它自己页面的全尺寸图像。

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</head>




<body>



<a href="superlow.jpg" rel="prettyPhoto"> sldjflkdjsf </a>


<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>


</body>
</html>

【问题讨论】：

您的控制台有错误吗？我的意思是在你点击链接之前。
如何检查错误？我什么都没看到？

标签： jquery prettyphoto

【解决方案1】：

在我看来，要么您的脚本未找到，要么可能是编码问题。

您确定您的两个脚本都已加载吗？因为您的代码在 Safari 上对我有用。注意：对于此类问题，请始终参考您的浏览器类型和版本。

并且您的文档（设置为 charset=ISO-8859-1）与您的脚本和 css（设置为 utf-8）之间存在文档编码不匹配，这可能会导致问题。将它们都设为 utf-8。

只要这两件事都是正确的，你的例子应该可以工作。

【讨论】：

是的，我正在使用 safari。我刚刚修复了字符集问题，但仍然存在问题：- 刚刚 Retcon
如果您使用 Safari，请激活“开发”菜单，然后右键单击页面以检查文档。检查资源或控制台错误。
好的，我发现了这个：资源解释为文档，但传输的 MIME 类型为 image/jpeg。
一个网站说这可能是因为图片标题周围没有引用，但它们是......所以我不确定为什么会发生这种情况。我能做什么？
最终添加一个以保持一致性。但是“资源解释为文档”不应导致 javascript 问题，图像的标题也与它有任何关系。我只能建议您完全重新启动 Safari。我看到 javascript 有时会被搞砸，需要用空缓存重新启动。除此之外，代码本身没有任何问题，这在 Safari 5 和 6 上都对我有用。

【解决方案2】：

所有主流浏览器都支持 rel 属性。

注意：Opera 或 Safari 不支持值“搜索”。

参考：http://www.w3schools.com/jsref/prop_link_rel.asp

如果你用 'rel' 计算元素，你会发现零 (0)。

$("a[rel^='prettyPhoto']").length 将返回零

这就是我认为的问题

只需使用 class 而不是 rel.. 它会起作用 :)

【讨论】：

【解决方案3】：

试试这个

用 xhref 替换你的锚标记的 href

$(document).ready(function() {
    $('a[xhref]').each(function() {
       $(this).attr('href', $(this).attr('xhref'));
    });
    $("a[rel^='prettyPhoto']").prettyPhoto();
});

即使是显示任何类型的问题替换

$(document).ready(function(){       with 

$(window).bind('load', function(){

解决问题

【讨论】：

【解决方案4】：

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $("a[data-rel='prettyPhoto']").prettyPhoto();            
    });
</script>

这适用于我刚刚添加的

data-rel 而不是 rel

【讨论】：