Question

我正在使用colorbox plugin而我正在尝试对元素集合进行分组。我在examples中执行 simliar 基本分组照片的操作（单击任何分组的照片）。我不想使用图片，而是使用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" alt="100 Trade Jack" /></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" width="104" height="55" 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元素组合在一起。不知道该去哪里。

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

UPDATE：

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

Answer 1

我认为照片组的Next-Previous功能不适用于htmls组我看到了你的榜样。如果要显示关闭之前可用的内容，请在重新打开彩色框时执行以下操作：

制作<div id="cBoxHack" style="display: none">并从ID login1 的div中删除 style =“display：none”。

同时删除这三行，

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

来自

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

这个功能。

在Colorbox中对元素集合进行分组

JS

HTML

JS

HTML

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

UPDATE：

1 个答案: