Ich benutze die Colorbox-Plugin und ich versuche, eine Sammlung von Elementen zu gruppieren. Ich mache etwas vergleichbar die grundlegenden gruppierten Fotos in der Beispiele (klicken Sie auf eines der gruppierten Fotos). Anstatt Bilder zu verwenden, würde ich gerne eine html div .
Die Beispiele html/js sehen etwa so aus.
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>Außerdem möchte ich die Colorbox auslösen, wenn auf eine Schaltfläche geklickt wird. Hier ist, was ich jetzt habe, es ist Art von schlampig und ich habe das Gefühl, es ist ein sauberer Weg, dies mit einigen der nativen Colorbox-Funktionalität zu tun.
Zusammenfassend kann man sagen, dass ich gerade den Inhalt der Colorbox manuell durch ein Click-Event ersetze.
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>Es scheint nur, da es eine Möglichkeit gibt, Bilder mit dem rel-Attribut zu gruppieren, sollte ich in der Lage sein, HTML-Elemente zusammen zu gruppieren. Nicht wirklich sicher, wo es aber zu gehen.
Jede Anregung/Anleitung wird sehr geschätzt. Danke!
UPDATE:
Die oben beschriebene Technik, die ich verwende, funktioniert nicht wirklich. Wenn Sie die Colorbox schließen und versuchen, sie wieder zu öffnen, ist das Div, das #login1 ersetzt, immer noch da. ( ejemplo - Klicken Sie auf die Schaltfläche Mitglieder-Login)
