在 Colorbox 中对一组元素进行分组

Posted 2023-02-25

【中文标题】在 Colorbox 中对一组元素进行分组

【英文标题】：Group a collection of elements in Colorbox

【发布时间】：2010-07-10 19:18:09

【问题描述】：

我正在使用colorbox plugin，我正在尝试对一组元素进行分组。我对examples 中的基本分组照片类似 做了一些事情（单击任何分组照片）。我不想使用图片，而是使用 html div。

示例 html/js 看起来像这样。

js

$("a[rel='example1']").colorbox();

html

<p><a href="ohoopee1.jpg" rel="example1">Grouped Photo 1</a></p>
<p><a href="ohoopee2.jpg" rel="example1">Grouped Photo 2</a></p>

另外，我想通过单击按钮触发 Colorbox。这就是我现在所拥有的，它有点草率，我觉得有一种更简洁的方法可以使用一些原生 Colorbox 功能来做到这一点。

总而言之，我只是用点击事件手动替换颜色框的内容。

js

//Login popup
$('.loginButton').bind("click", function()
    $.colorbox(
            inline: true, 
            href: "#login1",
            width: "420px"
            );
);
//forgot password           
$("#forgot").click(function()
    $('cboxContentLoaded').html($("#login2").html());
);

html

<div style="display: none;">
    <div id="login1">
        <h2>Members Login <img src="images/logo_small.png"  /></h2>
        <dl>            
            <dt>Email:</dt>
            <dd><input class="xmlLogin" type="text" size="20" name="username" /></dd>
            <dt>Password:</dt>
            <dd><input class="xmlLogin" type="password" size="20" name="password" /></dd>
        </dl>
        <input type="image" src="./images/button.login.jpg"   class="subLogin" />
        <p id="forgot"><a href="#">Forgot Password?</a></p>
        <div id="errorMessage"></div>
    </div>
    <div id="login2">
        <p>Please Enter your Email Address and we will send you instructions on how to renew your password</p>
        <input type="text" id="resetPassEmail" />
        <input type="button" id="passRest" value="Reset Password" />
    </div>
</div>

似乎既然有一种方法可以使用 rel 属性对图像进行分组，我应该能够将 html 元素组合在一起。不过不太确定该去哪里。

非常感谢任何输入/指导。谢谢。

更新：

我使用的上述技术并没有真正起作用。当您关闭颜色框并尝试重新打开它时，替换 #login1 的 div 仍然存在。 (example - 点击会员登录按钮)

【参考方案1】：

我认为照片组的 Next-Previous 功能不适用于 html 组。 我看到了你的例子。如果您想在关闭之前显示可用的内容，在重新打开颜色框时，您需要做的是：

创建 <div id="cBoxHack" style="display: none"> 并从 id 为 login1 的 div 中删除 style="display: none"。

也去掉这三行，

$("#login1").show();
$("#login2").hide();
$("#login3").hide();

来自

$('.loginButton').bind("click", function()...

这个函数。