gpt4 book ai didi

jquery - 在彩盒窗口中使用 javascript/jquery 脚本

转载 作者:行者123 更新时间:2023-12-01 04:59:47 24 4
gpt4 key购买 nike

我正在使用 colorbox 在弹出窗口中预览产品,但我还想使用 Cloud Zoom颜色框内。由于某种我无法弄清楚的原因,cloudzoom 在颜色框内无法工作,在常规浏览器窗口中调用时工作正常。我在发布之前进行了一些搜索,但是关于这两个脚本的信息并不多。也许,我需要在调用 colorbox 之后使用 onComplete:function() 但我不知道该怎么做。

这是我创建的测试页面的代码,其中云缩放在页面上工作正常,但在加载到颜色盒时却无法正常工作。这是 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>

最佳答案

试试这个:

在 html 中将 anchor 标记替换为

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

并在脚本中编写像这样的jquery colorbox代码

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

希望这能解决您的问题。

关于jquery - 在彩盒窗口中使用 javascript/jquery 脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11247832/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com