Colorbox Href dynamisch setzen

Ich bin ein großer Fan der jQuery Colorbox und setze sie sehr häufig ein. Die Colorbox ist sehr flexibel, kann sehr gut überall integriert werden und kann fast alle Arten von Inhalten ohne Probleme darstellen.

Normalerweise verwendet die Colorbox die URL aus dem Link, d.h. in diesem Fall würde die URL seite.html geöffnet werden:

<a href="seite.html">Link</a>
<script>
$('a').colorbox();
</script>

Man kann die URL für mehrere Links statisch auf eine andere URL setzen, in diesem Fall würde bei beiden Links die andereseite.html geöffnet werden:

<a href="seite1.html">Link 1</a>
<a href="seite2.html">Link 2</a>
<script>
$('a').colorbox({href: 'andereseite.html'});
</script>

In meinem Fall hatte ich folgendes vor: Für Benutzer ohne JavaScript, bzw. für welche, die den Link in einem neuen Fenster oder Tab öffnen wollen, soll auf die normale Version der Seite verlinkt werden. Und falls JavaScript aktiviert ist und auf den Link geklickt wird, so soll eine Popup-Version der Seite aufgerufen werden. In diesem Fall kann man an href eine Funktion übergeben, die dynamisch die URL setzt. d.h. beim ersten Link wird andereseite1.html geöffnet, beim zweiten andereseite2.html:

<a href="seite1.html" data-cboxhref="andereseite1.html">Link 1</a>
<a href="seite2.html" data-cboxhref="andereseite2.html">Link 1</a>
<script>
$('a').colorbox({href: function() {
return $(this).attr('data-cboxhref');
}});
</script>