auto-link
Automatisch Bildern in WebsiteBaker einen Link zu sich selbst geben (um eine Lightbox zu nutzen)
2. Bild mit vorhandenem Link
Erklärung:
- Normale Bilder erhalten einen Link zu sich selbst (inkl. Title-Attribut).
- Bildern, die bereits mit Link angelegt wurden, wird der Link entfernt, danach werden sie wie
normale Bilder behandelt (siehe oben).
- Normale Textlinks sind nicht betroffen.
- Bildern, die bereits mit Link angelegt wurden, wird der Link entfernt, danach werden sie wie
normale Bilder behandelt (siehe oben).
- Normale Textlinks sind nicht betroffen.
Durch das Script werden alle Bilder innerhalb des Div "#content" angesprochen und ihnen wird die Klasse "csingle" der Colorbox zugewiesen.
Die Reihenfolge der Aufrufe sollte beachtet werden. Erst Auto-Link, dann Colorbox.
Beispiel-Aufruf
Hier wurde nur Colorbox und auto-link für das Preset ausgewählt und in den custom-Teil verschoben.
<!-- Change the CSS Folder to the Theme you need in the default.preset under /jqueryadmin/plugins/Colorbox/ -->
<link href="{WB_URL}/modules/jqueryadmin/plugins/Colorbox/4/colorbox.css" media="screen" rel="stylesheet" />
<script src="{WB_URL}/modules/jqueryadmin/plugins/Colorbox/jquery.colorbox.min.js"></script>
<script>
// Entfernt vorhandenen Bild-Link. Kann weggelassen werden.
$("#content a img").each(function() {
$(this).unwrap();
});
// Liest Bild-Adresse und Bild-Titel aus, erstellt Bild-Link mit class csingle.
$("#content img").each(function() {
var imgSrc = $(this).css("border","0").attr("src");
var imgTitle = $(this).attr("title");
$(this).wrap('<a rel="csingle" title="' + imgTitle + '" href="' + imgSrc + '" />');
});
// Nur was aus dem Colorbox-Preset gebraucht wird. Class csingle.
$("a[rel='csingle']").colorbox({
opacity: "0.7",
maxWidth:"90%",
maxHeight:"90%",
current: "Bild {current} von {total}"
});
</script>