jquery.corner.js плагин, я не могу заставить его работать с изображениями

У меня есть код corect для jquery, чтобы сделать закругленные углы. Я тестировал его только с фоновым цветом, и он отлично работает.jquery.corner.js плагин, я не могу заставить его работать с изображениями

Однако, я хочу применить углы к изображениям. Это просто не сработает для меня!

Я создал страницу примера, где у меня есть изображение с классом, рядом с div с тем же классом, но имеет только цвет фона. Изображение не будет работать, но цветной «ящик» будет ,

Я пробовал кодировать его тремя разными способами, и он по-прежнему не работает. (Мне не нужно все три способа кодирования работать .. только один будет делать; D '!)

Вот мой Fiddle ссылка: http://jsfiddle.net/SunnyOz/g46Gx/

Вот тестовая страница онлайн: http://www.webau.net/TC/example/corner_test.htm

Вот CSS:

* { 
    border: 0 none; 
    } 

.content { 
    width: 900px; 
    background-color: #fff; 
    margin: 0 auto; 
} 

.innertube { 
    padding: 20px; 
} 

.imgBox, .imgBox img { width:493px; height:257px; margin:0; padding:0 } 

.divToHaveCorners, .divToHaveCorners img { width:493px; height:257px; margin:0; padding:0; display: block; }

Вот это HTML:

<div class="content"> 

    <div class="innertube"> 

    <br clear="all" /> 
    <br clear="all" /> 

    <img class="roundimg" src="http://webau.net/TC/example/images/motorcycle1.jpg" /> &nbsp;&nbsp;&nbsp; 
    <div class="roundimg" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div> 

    <br clear="all" /> 
    <br clear="all" /> 

    <div class="imgBox"><img src="http://webau.net/TC/example/images/motorcycle1.jpg" /></div> &nbsp;&nbsp;&nbsp; 
    <div class="imgBox" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div> 

    <br clear="all" /> 
    <br clear="all" /> 

    <img class="divToHaveCorners" src="http://webau.net/TC/example/images/motorcycle1.jpg" /> &nbsp;&nbsp;&nbsp; 
    <div class="divToHaveCorners" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div> 

    <br clear="all" /> 
    <br clear="all" /> 

    </div> 
</div>

Вот внутренний код Javascript:

$(document).ready(function(){ 
    $(".roundimg").corner("tl 50px").corner("br 50px"); 
    $(".imgBox").corner("15px"); 
    $('.divToHaveCorners').corner(); 
});

Мои внешние JS ссылки:

<script type="text/javascript" src="http://webau.net/TC/example/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="http://webau.net/TC/example/jquery.corner.js"></script>

Я предполагаю, что я упустил что-то действительно простое .. но я просто не вижу его. Любая помощь будет принята с благодарностью.

Спасибо, SunnyOz

источник

2013-03-09 SunnyOz

Это делает это, но есть также TON плагинов, которые делают такие вещи намного проще в использовании, как imgr. Кроме того, использование this в качестве справки может быть очень полезно для вас. Ура!

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#imgBox, #imgBoxPlain, #imgBox img { background-color: #701080; width:493px; height:257px; margin:0;padding:0;} 
</style> 
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="jquery.corner.js"></script> 
<script type="text/javascript"> 
$.fn.corner.defaults.useNative = false; 
    $(document).ready(function(){ 
     $("#imgBox").corner("15px"); 
     $("#imgBoxPlain").corner("15px"); 
    }); 
</script> 
</head> 
<body> 
<div class="content"> 
    <div class="innertube"> 
    <div id="imgBox"><img src="images/motorcycle1.jpg" /></div> 
    <div id="imgBoxPlain" style="width: 200px; height: 100px;">Hello World!</div> 
    </div> 
</div> 

</body> 
</html>

источник

2013-03-09 20:14:27 Chris

jquery.corner.js плагин, я не могу заставить его работать с изображениями

ответ

Смежные вопросы