我在同一页面中找到了多个颜色框的解决方案这个堆栈帖子
function useColorboxTheme() {
var selectedTheme = $(this).attr("data-theme");
$(".colorboxTheme").attr("disabled", "disabled");
$("#" + selectedTheme).removeAttr("disabled");
}
function defaultColorboxTheme() {
$(".colorboxTheme").attr("disabled", "disabled");
$(".colorboxTheme.default").removeAttr("disabled");
}
$(document).ready(function(){
$("a.colorbox").colorbox({
onOpen: useColorboxTheme,
onClosed: defaultColorboxTheme,
iframe:true,
innerWidth:940,
innerHeight:375,
loop: true,
slideshow: false,
slideshowAuto: true,
slideshowSpeed: 2500,
slideshowStart: "start slideshow",
slideshowStop: "stop slideshow",
});
});
这个小片段效果很好，但它只能让您通过不同的 css 文件设置不同的颜色框样式。但所有 colorboxes 仍然坚持 js 中相同的行为选项。我想为每个实例使用不同的 css 和不同的 js 设置。可能的？
我想出了一种方法来做到这一点，也许有人可以想出一种更简单的方法，但这效果很好。
在 html 文档中：
<head>
<link id="colorboxHtml" rel="stylesheet" type="text/css" href="styles/colorboxHtml.css">
<link id="colorboxYoutube" rel="stylesheet" type="text/css" href="styles/colorboxYoutube.css">
</head>
<body>
<section>
<a class="html" href="includes/colorboxHtml.html">Web page in colorbox
</a>
</section>
<section>
<a class="youtube" href="http://www.youtube.com/embed/8C0NfQrky6I">Youtube in colorbox
</a>
</section>
<!--footer-->
<script src='scripts/colorboxHtml.js'></script>
<script src='scripts/colorboxYoutube.js'></script>
<script>
$(document).ready(function(){
jQuery(".html").colorboxHtml({iframe:true, innerWidth:"80%", innerHeight:500});
jQuery(".youtube").colorboxYoutube({iframe:true, innerWidth:640, innerHeight:390});
});
</script>
</body>
现在我们需要创建自定义 js 和 css 文件：
- 获取 colorbox.css 文件并查找/替换“colorbox”的每个实例，并将其替换为（本例中的第一个）“colorboxHtml”
- 在同一文件中查找/替换“xbox”的每个实例并将其替换为“xbox”
- 将文件另存为 colorboxHtml.css
- 获取 colorbox.js 文件，并对 colorbox 和 xbox 执行与 css 文件中相同的查找/替换操作
- 将文件另存为 colorboxHtml.js
- 冲洗并重复您想要的每个其他颜色盒实例
现在我们不仅可以为每个实例设置不同的样式，而且可以完全控制每个实例的 javascript 功能！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
