How to Create flexible Image Frame?

Question

I want to create PNG Frame on top of the Image , which come dynamically so the Image Height and width different for all the Image.

http://thejourneyhomebook.com/photos/index.html

this is the final result which I want to achieve. Is this possible using jQuery.

It will be fine to use more images and divs.

thanks

Answer 1

Yes it is possible.

You would have 8 divs per image.

HTML:

<div class="imageContainer">
  <div class"tl"></div>
  <div class"t"></div>
  <div class"tr"></div>
  <div class"l"></div>
  <div class"r"></div>
  <div class"bl"></div>
  <div class"b"></div>
  <div class"br"></div>
  <img src="myImage" />
</div>

CSS:

.imageContainer{
  position:relative;
}

.imageContainer div { 
 position:absolute;
 z-index:2;
}

.imageContainer .tl, .imageContainer .tr, .imageContainer .bl, .imageContainer .br { 
 z-index:3;
}

.imageContainer .t, .imageContainer .tl, .imageContainer .tr{
 top: -20px;
}

.imageContainer .b, .imageContainer .bl, .imageContainer .br{
 bottom: -20px;
}


.imageContainer .l, .imageContainer .tl, .imageContainer .bl{
 left: -20px;
}

.imageContainer .r, .imageContainer .tr, .imageContainer .br{
 right: -20px;
}

All you have to do now is to place an image sprite and set the width and the height. Set the width and the height of the top left right and bottom with jQuery

GL

Answer 2

You'll need a few more wrappers around the image (Ghommey's solution), and with sufficient styling you'll get something like the 9-slice scaling in flash.

You could also use the CSS3 approach, described in the post - but it will work only with state-of-the-art browsers.

Answer 3

Your example page has only three different sizes of fixed-size images, which makes it seem simple. In order to support any possible image size, you're going to need more markup, as illustrated in Ghommey's answer.

Your best bet would probably be to just use a tested-and-tried solution.

Answer 4

I wrote a jQuery plugin to do this a while back. I just added it to Google Code a few minutes ago. Hope it works for you!

http://code.google.com/p/jquery-imageframe/