Wir verwenden Cookies zur Verbesserung der Benutzerfreundlichkeit und zum Verfolgen der Besucherströme mit Matomo (Piwik).
Mehr Infos auf der Datenschutzseite. Du kannst die Cookie-Erlaubnis jederzeit am Ende der Seite widerrufen.
websitebaker testseite
Private Testseite WB 2.11.0 (Rev.79)

auto-link

Automatisch Bildern in WebsiteBaker einen Link zu sich selbst geben (um eine Lightbox zu nutzen)


 
1. Simple Bilder
 
2. Bild mit vorhandenem Link

   
3. Normaler Text- 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.

Durch das Plugin werden alle Bilder innerhalb des Div "#content" angesprochen und ihnen wird die Klasse "csingle" der Colorbox zugewiesen. Dieses sollte jeder für sich im Preset anpassen.

Im Preset sollte die Reihenfolge der Aufrufe beachtet werden. Erst Auto-Link, dann Colorbox (siehe unten).
Beispiel-Aufruf im Preset
Hier wurde nur Colorbox und auto-link für das Preset ausgewählt und in den custom-Teil verschoben.
<!-- position: head -->

<script type="text/javascript" src="{WB_URL}/modules/jqueryadmin/plugins/Colorbox/jquery.colorbox.min.js"></script>

<!-- 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" type="text/css" />

<!-- custom -->
<!-- position: body -->
<script type="text/Javascript">

    // 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> <!-- end custom -->

Hinweis:
Das Plugin lädt eine leere "empty-auto-link.js".
Ohne dies würde das Plugin bei erneutem Auswählen des Presets nicht mit einem Haken versehen werden.