websitebaker testseite
Private Testseite WB 2.10.0 (Rev.66)

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.
    jQuery("#content a img").each(function() {
           jQuery(this).unwrap();
    });
    
    // Liest Bild-Adresse und Bild-Titel aus, erstellt Bild-Link mit class csingle.
    jQuery("#content img").each(function() {
           var imgSrc = jQuery(this).css("border", "0").attr("src");
           var imgTitle = jQuery(this).attr("title");
        jQuery(this).wrap('<a rel="csingle" title="' + imgTitle + '" href="' + imgSrc + '" />');
    });
    
    // Nur was aus dem Colorbox-Preset gebraucht wird. Class csingle.
    jQuery("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.

 
Wir verwenden Cookies zur Verbesserung der Usability. (Snippet Cookie Permission for WebsiteBaker)