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.

auto-link

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

 
3. Normaler Text- Link
 

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.

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>


Ähnliche Seiten:
clickEcho
Anzeige durch Droplet MoreLikeThis