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.

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 rel="stylesheet" type="text/css" href="{WB_URL}/modules/jqueryadmin/plugins/Colorbox/4/colorbox.css" media="screen" />
<!-- custom -->// ----- insert your custom code here -----
<!-- position: body -->
<script type="text/Javascript">
	jQuery("#content a img").each(function() { 
   		jQuery(this).unwrap(); 
	});
	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 +'" />');
	});
	jQuery("a[rel='csingle']").colorbox({
				opacity: "0.7",
				maxWidth:"90%",
				maxHeight:"90%",
				current: "Bild {current} von {total}"								
			   });
</script>
<!-- end custom -->

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