prettyPhoto 仅适用于 Firefox，需要跨浏览器答案

【问题标题】：prettyPhoto only works in Firefox, needs to be cross browserprettyPhoto 仅适用于 Firefox，需要跨浏览器
【发布时间】：2014-06-02 10:31:03
【问题描述】：

我遇到了与 PrettyPhoto 灯箱的兼容性问题，我自己从 Github 集成了该灯箱。它在 Firefox 中运行良好，但我必须在 Internet Explorer、Safari 和 Chrome 中双击它。我的滑动操作或 css 转换存在冲突。有什么快速修复的想法吗？尝试单击视频缩略图或其上方的图像展开图标。链接是：

http://archibaldbutler.com/projects/PA-lightbox-demo/

奇怪的是它在 css 转换/滑动效果完成之前在所有浏览器中都可以工作，但是一旦页面不移动，你就不能点击这些灯箱图标，视频图标也是如此。我很困惑。

这些是视频缩略图仅供参考： http://archibaldbutler.com/projects/PA-lightbox-demo/img/bottle-thumbnail.png

这是图片弹出图标仅供参考： http://archibaldbutler.com/projects/PA-lightbox-demo/img/open.png

我尝试将我的 prettyPhoto 初始化脚本移动到我的文档末尾，以便它首先打开，但这并没有解决它。

我需要检测点击，我尝试在 Javascript 中编写“检测点击”功能，但无法正常工作：

$(document).ready(function () {
  $("a#youtube_video").bind('click', function () {
     alert("I am an alert box!");
  });
});

这会破坏我的网站。任何想法将不胜感激。

【问题讨论】：

视频后有错字吗？缺少“
嗨 Joakim，视频没有错字，问题比这更复杂。

标签： jquery browser lightbox prettyphoto

【解决方案1】：

$(document).ready(function () {
   $("a#youtube_video").on('click', function () {
       alert("I am an alert box!");
   });
});

【讨论】：

警报框功能现在可以使用，但这仍然没有解决我的跨浏览器问题。

【解决方案2】：

问题在于对象的样式。如果您在开发人员工具中看到，虽然您的图像位于 ID 为“youtube_video”的锚标记内，但它是绝对定位的。我猜是插件在定位它。

锚标签没有样式，它的子元素是绝对定位的。因此它位于文档的开头，宽度和高度为 0px。但是，当您单击 img 标签时，单击事件应传播到其父级并运行您的单击事件。在您的情况下，单击事件不会传播。有两个原因。

父元素（锚点）在物理上不在 img 标签后面，因此不会继承事件。
可能是插件在绑定img标签点击事件时，专门停止了点击事件向其父节点的传播。

尝试在浏览器开发者工具的控制台中运行此命令。它将专门触发锚标记上的点击事件，表明灯箱正在工作并正在绑定。

$('#youtube_video').trigger('click');

因此，您首先需要做的是修复样式并确保您的锚点和 img 标签位于正确的位置。如果修复后问题仍然存在，您可以更新问题。

【讨论】：

不同的浏览器有不同的渲染引擎，现在非常智能。因此，如果它在特定的浏览器上运行，则意味着渲染引擎可能在运行时修复了一些问题。并且其他渲染引擎无法在运行时修复它。
只要我添加一个css position:absolute到锚标签，链接和图像就会消失。我认为这是因为 css 是用 Javascript 生成的。我一直在努力寻找解决方法，但到目前为止没有运气
您需要弄清楚这一点。我无法帮助您访问受限。也尝试在没有主滑块的情况下运行 prettyPhoto，它可能会干扰点击事件。

【解决方案3】：

为了想法。首先，尝试调试，您的代码中什么不起作用？使用 chrome 开发工具或 firefox 下的 firebug 或任何 JS 调试器工具（存在大量工具）或 Explorer 下的 IE WebDev Toolbar。

原始代码在您尝试的每个浏览器中都可以使用？

对于绑定使用“ON”，在它之前，取消绑定所有东西并使用所有“防止”的东西来避免双击 jquery 故障。

这个灯箱不能用其他插件或简单的 css3/html5 过渡效果替换吗？（或者用智能小脚本代替第三方插件？）

更新：我的调试器说：

"NetworkError: 404 Not Found - http://archibaldbutler.com/projects/PA-lightbox-demo/style/loading-2.gif"


"NetworkError: 404 Not Found - http://archibaldbutler.com/projects/PA-lightbox-demo/style/grab.png"

还有一些 html 结构中的 url 错误：

ref="//cloud.

（缺少 http：？）

对于最后的提示，我更喜欢为这些类型的网站使用原型/样板或引导程序。试试看，有很多功能，而且没有搞砸。

【讨论】：

【解决方案4】：

有人帮我找到了解决办法，这里是js供参考，虽然我不太明白：S

$(document).ready(function(){
    /*       console.log();
   //$('.ms-slide-layers').find('a').css({height:'100px'});
   $('.ms-slide-layers').find('a').each(function(){
     //$(this).css({zIndex:'9999', position:'absolute', backgroundColor:'#000'})
     $(this).find('img').on('click', function(e){
       console.log('here');
     });
   });
   $('.ms-view').on('click', function(e){
     console.log('leave');
   });*/
   $("a[rel^='prettyPhoto']").prettyPhoto();
    });

【讨论】：