两个不同的Colorbox弹出窗口在同一页面上单独设置？
我在这个堆栈post的同一页面中找到了多个彩盒的解决方案
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文件以不同方式设置颜色框的样式。 但是所有的彩盒仍然在js中使用相同的行为选项。 我想为每个实例使用不同的css和不同的js设置。 可能？
我想办法做到这一点，或许有人可以想出一个更简单的方法，但这很好用。
在html doc中：
Web page in colorbox Youtube in colorbox
现在我们需要创建自定义js和css文件：
- 获取colorbox.css文件并查找/替换“colorbox”的每个实例，并将其替换为本示例中的第一个“colorboxHtml”
- 在同一个文件中查找/替换“cbox”的每个实例并将其替换为“cboxh”
- 将文件另存为colorboxHtml.css
- 获取colorbox.js文件，并像在css文件中那样对colorbox和cbox执行相同的查找/替换
- 将文件另存为colorboxHtml.js
- 为您想要的每个其他颜色盒实例冲洗和重复
现在我们不仅可以对每个实例进行不同的设置，还可以完全控制每个实例的javascriptfunction！