jQuery Plugin Abgerundete Ecken

D

DiDiJo

Erfahrenes Mitglied
Hi Leute,

ich hab hier einge Probleme mit meinem jQuery-Gedrisse.

Hier --> http://w00cdc12.dd18032.kasserver.com/test.php versuche ich ein Bild mit abgerundeten Ecken einzufaden und ich kriege es einfach nicht auf die Reihe.

In dem Beispiel sind 2 jQuery Dateien eingebunden, die beide eigentlich für die abgerundeten Ecken sorgen sollten.
Bsp.: für Curvycorners:
http://www.curvycorners.net/includes/examples/demo1.html

Bsp.: für die jQuery.Corners
http://plugins.jquery.com/project/corners

Beide Beispiele laufen nicht ... und es ist vollkommen egal ob ich das DIV von vornerein eingeblendet ist oder nicht.

Kann mir mal jemand erklären was ich falsch mache ?

Hier nochmal der Code von meiner Seite:
HTML: 
script src="http://code.jquery.com/jquery-latest.js" type="text/javascript" language="javascript"></script>
<script src="http://w006fa4e.dd18032.kasserver.com/js/wp/curvycorners.js" type="text/javascript" language="javascript"></script>
<script src="http://w006fa4e.dd18032.kasserver.com/js/wp/jQuery.corners.js" type="text/javascript" language="javascript"></script>

<script type="text/javascript" language="javascript">

$(function(){
 	
	$("#roundedCorners").fadeIn(1200,function() {
		$("#roundedCorners").corners();
	});	
	
	
	var settings = {
      tl: { radius: 20 },
      tr: { radius: 20 },
      bl: { radius: 20 },
      br: { radius: 20 },
      antiAlias: true
    }

    curvyCorners(settings, "#roundedCorners");

	
});


</script>
</head>

<body>

<div id="roundedCorners" style="display:none;">
	<img src="http://www.pictures-of-cars.com/American-Muscle-Car.jpg" alt="" />               
</div>

</body>

Wenn Ihr ein PlugIn kennt was defenitiv ordentlich funktioniert könnt ihr mir auch gerne die anderen PlugIns ans Herz legen ... ich wollt emich nicht unbedingt auf die oben eingebunden beschränken
 
Zuletzt bearbeitet:
Moin,

das scheint wohl nicht am Faden zu liegen, sondern daran, dass dies wohl mit Bildern generell nicht zu Klappen scheint.

Hier mal ein Workaround mit den curvyCorners:

Code: 
<script type="text/javascript" >

$(document).ready(function(){
	var settings = {
      tl: { radius: 20 },
      tr: { radius: 20 },
      bl: { radius: 20 },
      br: { radius: 20 },
      antiAlias: true
    }
    curvyCorners(settings, "#roundedCorners");
    $('#roundedCorners').fadeIn('slow');
});

</script>
...anstatt das Bild per <img> anzuzeigen, wird es als Hintergrundbild des <div>'s genutzt...und hat runde Ecken, auch beim einfaden :)
 
Hey,

danke für die Hilfestellung ... ich werd jetzt mal diesen Workaround übernehmen auch wenn ich die Lösung als Hintergrundgrafik nicht ganz so berauchend finde ... aber im Moment störts mich noch nicht ;)

Sollte jemand doch noch ein gut laufendes PlugIn für Bilder kennen, kann er mir gerne mal den Namen mitteilen.

DiDi
 
Naja, dieses notieren als Hintergrundgrafik ist natürlich je nach Einzelfall ein ziemlicher Aufwand, man muss ja bspw. die Breite & Höhe extra notieren, nicht immer ist die unbedingt bekannt.
Falls dies deine Zurückhaltung zu dem Workaround begründen sollte, soetwas kann man natürlich automatisieren....so dass du dein Markup wie bisher behältst(mit dem <img> im <div>), und es per JS in das abgeändert wird, was meinem Workaround entspricht :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück