CODEWITHSUNDEEP
imagejquery-pluginsrounded-corners
SunnyOz
SunnyOz

Reputation: 575

jquery.corner.js plugin, I can't get it to work on images

I have the code corect for jquery to make rounded corners.. I have tested it with just a background color, and it works fine.

However, I want to apply the corners to images. It just won't work for me!

I have created an example page where I have the image with the class, right next to a div with the same class but only has a background color.. The image won't work, but the colored 'box' will.

I have tried coding it three different ways, and it still wont work. (I don't need all three ways of coding to work.. just one will do! ;'D )

Here is my Fiddle link: http://jsfiddle.net/SunnyOz/g46Gx/

Here is the test page online: http://www.webau.net/TC/example/corner_test.htm

Here is the 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; }

Here is the 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>

Here is the internal Javascript code:

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

My external JS references are: 

<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>

.

I am assuming that I have left out something really simple.. but I just can't see it. Any help will be greatly appreciated.

Thanks, SunnyOz

Upvotes: 1

Views: 1193

Answers (1)

Chris
Chris

Reputation: 18876

This does it, but there are also a TON of plugins that make these kinds of things a lot easier to use like imgr. Also- using this as a reference may be very helpful to you. Cheers!

<!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>

Upvotes: 1

Related Questions