Thumbnails via JavaScript für Links

If you've problems with unsupported - non official ;-) - functionalities use this forum please.
Post Reply
Skipy
Posts: 87
Joined: Mon 26. Dec 2005, 22:10
Location: Germany
Contact:

Thumbnails via JavaScript für Links

Post by Skipy »

Hallo Leute,

ich habe mich mal wieder an ein Erweiterung für PHPWCMS gewagt :-) Dieses Mal versuche ich mich mit regulären Ausdrücken :) .

Die Idee ist simpel und viele von euch kennen so etwas wahrscheinlich. Man ist auf einer Seite, fährt mit dem Mauszeiger über einen Link und dann bekommt man bereits eine Vorschau angezeigt, was sich nach einem Klick auf diesen Link einem bietet. Das sieht dann in etwa so aus: Image Bzw. fahrt einfach mit eurer Maus über einen dieser Links hier. Im Forum ist es ja auch eingebaut ;-) Ich finde das Genial. Es gibt jetzt einige Anbieter, die diese Vorschaugrafiken für Geld erzeugen, andere machen es (bis zu einer bestimmten Anzahl) Umsonst. So zum Beispiel http://thumber.de/beispiele.php.
Einzige Vorraussetzung: Mann muss sich registrieren unter http://thumber.de/anmelden.php.


Die gehen sogar noch einen Schritt weiter und bieten ein JavaScript sowie eine CSS-Datei an. Damit muss man nur noch an den gewünschten Link als Attribut die vordeffinierte Klasse "thumber" hängen, und schon müsste alles funktionieren :-).
Ich habe es mal getestet, und es funktioniert sehr gut. Jetzt würde ich das Ganze gerne automatisieren.
Dazu soll auf meiner Webseite an ALLE Links auf EXTERNE SEITEN diese Klasse angehängt werden, bzw. überschrieben werden.

Mein Ansatz war folgender:
- ausgearbeite Skripte von Thumber.de nehmen und auf PHPWCMS anpassen
- in /templates/inc_script/frontend_render/ eine PHP-Datei hinerlegen, die bei allen externen Links die Klasseneinfügung bzw. Klassenersetzung vornimmt.

Das Ganze ist meiner Meinung nach noch ausbaufähig und vor allem die regulären Ausdrücke gehören noch etwas aufgepeppt :-)
Würde mich sehr freuen, wenn jemand mal drüber schauen könnte und mir sagt, was er davon hält.

Das Hauptskript unter /templates/inc_script/frontend_render/ mit den regluären Ausdrücken hänge ich hier auch nochmal an:

Code: Select all

<?php
	/**
	 * Diese Funktion nimmt folgende Parameter entgegen und fuegt das Attribut class="thumber" 
	 * zum Link hinzu, bzw. ersetzt gegebenenfalls eine vorhandene Klasse durch diese.
	 * 
	 * Verwendet wird hierfuer das Skript-Paket von http://thumber.de/misc/downloads/linkpreview.zip
	 * Um dieses Paket erfolgreich verwenden zu können, muss die Seite auf der es zum Einsatz kommen soll
	 * kostenlos bei thumber.de registriert sein. Das geht ganz schnell unter: http://thumber.de/anmelden.php
	 * 
	 * @param $aTeil1 Alle Parameter die vor dem eigentlichen Link stehen
	 * @param $aLink Der eigentliche Link
	 * @param $aTeil2 Alle Parameter die nach dem eigentlichen Link stehen
	 * @param $aInhalt Der komplette Code, der zwischen den beiden <a> und </a> Tags steht
	 * @return String mit dem neuen regulaer durchsuchten Link-Tag
	 * 
	 * @version 1.0
	 * @author Steven
	 * @copyright GNU
	 **/
	function macheLinkBeiBedarfMitThumb( $aTeil1, $aLink, $aTeil2, $aInhalt){
						
		/* Handelt sich es um einen Link auf die eigene Seite? Dann abbrechen
		 * 
		 * Dieser regulaere Ausdruck bedarf noch der Verbesserung. Gibt es eine Moeglichkeit
		 * Links auf interne Seiten irgendwie anders abzufangen?
		 */
		if ( preg_match('=^(.*)schwann-evangelisch.de(.*)$=msi', $aLink) || 
				preg_match('=^/(.*)$=msi', $aLink) || preg_match('=^(index|content)(.*)$=msi', $aLink)){
			return "<a $aTeil1 href='$aLink' $aTeil2>$aInhalt</a>";
		}

		/* Sicherheitshalber abbrechen, wenn irgendwelche anderen ReplacementTags mit geschweiften Klammern im weg sind
		 * 
		 * Gibt es noch anderes zu beachten?
		 */
		if ( preg_match('=\{(.*)\}=msi', $aLink) ){
			return "<a $aTeil1 href='$aLink' $aTeil2>$aInhalt</a>";
		}
		
		/*
		 * Die Attribute vor und nach href innerhalb des Links zusammenfuegen und Leerzeichen entfernen
		 */
		$aTeil1 = trim($aTeil1);
		$aTeil2 = trim($aTeil2);
		
		$bearbeiteteAttribute2 = "";
		if ( strlen($aTeil1) > 0 )
			$bearbeiteteAttribute2 .= $aTeil1." " ;
		if ( strlen($aTeil2) > 0 )
			$bearbeiteteAttribute2 .= $aTeil2;	
		trim($bearbeiteteAttribute2);		

		
		//Eventuell vorhandene Klassen-Bezeichner herausfiltern und ersetzen
		$neueCSSKlasse = "thumber";
		if ($bearbeiteteAttribute2 = preg_replace( '=(class\=("(\S*)"|\'(\S*)\')|(\S*))=i', "class=\"$neueCSSKlasse\"", $bearbeiteteAttribute2)){
			
		}else{
			$bearbeiteteAttribute2 = trim ($bearbeiteteAttribute2. " class=\"$neueCSSKlasse\"");
		}
		
		/*
		 * Spätestens beim ersten gefundenen Link, müssen das die JavaScriptdatei und die CSS-Datei von Thumber.de eingebunden werden.
		 * Quelltext und Bilder hierfuer heruntergeladen unter: http://thumber.de/misc/downloads/linkpreview.zip
		 */
		$GLOBALS['block']['css']['linkPreview'] = 'specific/linkpreview.css';
		$GLOBALS['block']['custom_htmlhead']['linkPreview.js'] = ' <script src="'.TEMPLATE_PATH.'inc_js/linkpreview.min.js" type="text/javascript"></script>';
		
		
		// Rueckgabe des frisch generierten Links. Die Attribute vor und nach dem Attribut href werden zusammengefasst vor href zurueckgegeben
		return "<a $bearbeiteteAttribute2 href='$aLink'>$aInhalt</a>";
	}

  $content["all"] = preg_replace('=<a ([^<>]*)href\="(\S+)"([^>]*)>(([^<>]*|<img[^>]*>)*)</a>=msie','macheLinkBeiBedarfMitThumb("$1", "$2", "$3", "$4");',$content["all"]);

?>

Jetzt warte ich auf Rückmeldungen und Vorschläge :)
Viele Grüße,
Skipy
Attachments
root.zip
komplettes Script mit allen benötigten Dateien
(34.46 KiB) Downloaded 462 times
Post Reply