3

我正在使用colorbox 插件，并且正在尝试对一组元素进行分组。我做了一些与示例中的基本分组照片类似的事情（单击任何分组照片）。我不想使用图像，而是使用 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 元素组合在一起。虽然不太确定该去哪里。

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

更新：

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

4

1 回答 1

0

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

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

同时删除这三行，

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

从

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

这个功能。

于 2010-07-16T07:32:37.663 回答