Something I’ve come to love about the JQuery JavaScript library is that, no matter what client-side scripting challenges arise these days, my first thought is “I bet there’s an easy way to do this with JQuery!”. I recently worked on a website where the client wanted rounded corners on a lot of the site’s elements, including images. A quick Google search found this jquery.corner plugin; which was, as most JQuery plugins are, extremely simple to implement and adapt for my own project.
The corner plugin has a bunch of ways to add corner effects to div elements, but unfortunately you can’t apply it directly to an image. Back to Google, I found a way to make it work with images: wrap it in a div and apply the corner code to the div element. This is good, but not best for our purposes. We still have to apply styles to make the divs match the size of their child image elements.
Objective:
To loop through all divs of a certain class, and automatically resize them to match their child image elements.
We’ll put this code inside our $(document).ready(function(){ … }) block so it runs as soon as the document is ready to run code.
We want to apply this code to all divs of a certain class, we’ll say class=”round-corners” in this example. To loop through every div of this class and run code on it, we use the wonderful JQuery.each function.
First, select images with a parent div element of this class (“round-corners”):
$(‘div.round-corners > img’)
and run the JQuery.each function to loop through:
$(‘div.round-corners > img’).each(function(id){ … })
Within this loop we want to select the image, and set the height and width of its parent div element. An easy way to do this is with the .height and .width functions. These functions are both accessors and modifiers, as is the case with many functions in JQuery.
Select the parent element of the selected image:
$(this).parent(‘div.round-corners’)
get the height of the image we’ve selected:
$(this).height()
so the whole line to set the height will look like this:
$(this).parent(‘div.round-corners’).height( $(this).height() );
Repeat for the width property with the .width function.
That should do it. Let’s take a look at the source for the whole page:
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.corner.js"></script><script type="text/javascript">$(document).ready(function(){ $('div.round-corners > img').each(function(id){ $(this).parent('div.round-corners').height( $(this).height() ).width( $(this).width() ); })$('.round-corners').corner();})</script><div class="round-corners"><img src="P3040004.JPG" alt="P3040004.JPG" /></div>
<div style="height: 130px; background-color: rgb(255, 0, 0);" class="round-corners">This is just a regular div with no image inside, but it will have round corners too!</div>
<div class="round-corners"><img src="bluehills.jpg" alt="bluehills.jpg" /></div>
An idea for improving this script would be to use the .wrap function to automatically wrap the images in divs
Have fun rounding corners, and please use them responsibly.
