prettyPhoto仅适用于Firefox，需要跨浏览器-Java 学习之路

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

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

奇怪的是它在css转换/滑动效果完成之前适用于所有浏览器，但是一旦页面不移动，你就无法点击这些灯箱图标，视频图标也是如此 . 我很困惑 .

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

这是图像弹出图标FYI：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!");
  });
});

这打破了我的网站 . 任何想法将不胜感激 .

4 回答

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

锚标签没有样式，其子元素绝对定位 . 因此，它位于文档的开头，宽度和高度为0px . 但是，当您单击img标记时，click事件应传播到其父项并运行您的click事件 . 在您的情况下，不会传播click事件 . 这有两个原因 .
- 父元素（锚）在物理上不在img标记之后，因此不会继承该事件 .
- 绑定img标记点击事件时可能是插件，特别是停止点击事件传播到其父节点 .
尝试在浏览器的开发人员工具的控制台中运行此命令 . 它将专门触发锚标记上的click事件，显示灯箱正在工作和绑定 .
```
$('#youtube_video').trigger('click');
```
所以你首先需要做的是修复样式并确保你的锚和img标签处于正确的位置 . 如果修复后问题仍然存在，您可以更新问题 .
回复于 2024-05-02T12:27:13+08:00

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

回复于 2024-05-02T12:27:13+08:00

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

您尝试的每个浏览器中都有原始代码吗？

对于绑定使用“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：？）

对于最终提示，我更喜欢在这些类型的站点中使用原型/样板或引导程序 . 尝试一下，很多功能都存在，并没有搞砸 .
回复于 2024-05-02T12:27:13+08:00

有人帮我找到了解决方案，这里有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();
    });

回复于 2024-05-02T12:27:13+08:00

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

4 回答

相关问题