Question

我正在使用colorbox在弹出窗口中预览产品，但我也想在颜色框中使用Cloud Zoom。由于某种原因我无法弄清楚，cloudzoom在colorbox内部无法工作，在常规浏览器窗口中调用时工作正常。在发布之前我搜索了一下，但这两个脚本并没有太多关联。 PERHAPS，我需要在调用colorbox后使用onComplete：function（），但我不知道该怎么做。

这是我创建的测试页面的代码，其中云缩放在页面上正常工作，但在加载到colorbox时没有。这是一个link with all the files（js，css），如果你想自己尝试一下。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="./js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="./js/cloud-zoom.1.0.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('a.items').colorbox({ width:"80%", height:"90%", href:function(){ return this.href + " #prodpreview"; }});
});
</script>
<link rel="stylesheet" type="text/css" href="./css/cloud-zoom.css" />
<link rel="stylesheet" type="text/css" href="./css/colorbox.css" />
</head>
<body>

<a href="test.php" class="items">Test</a>

<div id="prodpreview" style="margin-top:20px;">
<a href="https://www.google.com/images/srpr/logo3w.png" class="cloud-zoom" id="zoom1" rel="position:'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position:relative; display:block;">
<img src="https://www.google.com/images/srpr/logo3w.png" width="150"/>
</a>
</div>
</body>
</html>

Answer 1

试试这个：

在html中用

替换锚标记

<a href="#" class="items">Test</a>

并在脚本中编写像这样的jquery颜色框代码

$(document).ready(function() {
    $('a.items').colorbox({ 
         width:"80%", 
         height:"90%", 
         href:"#prodpreview",
         inline:true,
         onComplete:function(){
            $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
         }
    });
});

希望这能解决您的问题。

Answer 2

另一种方法是使用ColorBox的iFrame选项，它基本上在ColorBox中打开一个新的html环境。事情应该没事。

请注意，此方法需要您了解如何将适当的图像添加到iframed内容，大小等等。

要考虑的事情。

问候，KJM

在colorbox窗口中使用javascript / jquery脚本

2 个答案: