Hi all. I creating gallery, and I want to create frame around the picture.
But this picture must be scalable. Width and height of this frame generated by width and height of image.
And must to have possibility to change height of frame through the JavaScript.
Thanks.
PS: First of all, I must to have possibility to make frame narrow through the JavaScript.
This can be quite tricky to pull off.
If you are using modern browsers that support CANVAS, check out this demo that does what you are looking for: CANVAS Demo
Otherwise you will need to create 8 images (4 corners, and 4 sides) where the sides are made in such a way as they can be tiled to adjust to whatever size you need.
The next trick is how you build the frame. You could by hand create DIVs/Tables around your pictures to create this affect but that would be very bulky and not very clean. Your best bet would be to use jQuery (or your favorite lib) to hook into all images on the page with a CSS class (e.g. "fancyFrame"), and wrap them as needed with HTML markup that makes use of the images you created above via CSS.
You can use A List Apart's Drop Shadow technique which uses CSS and PNGs to create automatically resizeable drop shadow for images. You can modify technique to create a resizeable frame.
You would need four divs and four images. The corners would need to be cut at 45 degree angles with transparency:
Narrowing the frame with Javascript is the easiest part, really. Once you have your HTML/CSS set up so that it already scales you can just set the width with Javascript like this:
var photo = document.getElementById('photoFrame');
photo.width = '200px';
The only way to "narrow" your frame for any possible image size you place in it , besides using server side programming to generate images on the fly (which can be slow) IMHO is to use supplemented with excamvas (which helps convert canvas into VML usable by IE).
You would have to calculate width & and height of your image and add frame thickness to it, and generate a canvas that has width and height of diagonal between two furthest corners (in order to be sure you are able to spin image inside as much as you like).
You can now add angle to canvas (rotate it) and "paint"/"load" your images on it (taking into consideration that some of your images are patterns you need to repeat). Coordinates will be calculated from top-left corner of canvas relative to canvas itself only (meaning that the fact it has an angle will not affect it).
There is a nice diveintohtml5 article that explains canvas drawing you should check.
Writing a javascript or jQuery script to do all this on the fly is no small task, but it can be done.
If I was you I would make sure I can reuse (repeat) images, and then I will do it like that:
<div id="frame">
<div id="top-left"></div>
<div id="top"></div>
<div id="top-right"></div>
<div id="left"></div>
<div id="imageSpace"></div>
<div id="right"></div>
<div id="bottom-left"></div>
<div id="bottom"></div>
<div id="bottom-right"></div>
</div>
where: #top-left, #top-right, #bottom-left, #bottom-right are using corner images as backgrounds and have both width and height set.
And #top, #right, #bottom, #left are using repeated image for their backgrounds.
Check attached image where I put lines where you should cut original frame-image.
This method will allow you to change width of #top / #bottom and #left / #right to increase the size of your frame.
Funny, I had to do this exact thing when I worked at ImageKind.com. For reference, if you go to the frame shop there, such as this one, go to Step 4 (Add Mats) and click Adjust Width, there's a slider that does more or less what you're describing.
I originally had a couple of nested DIVs with big opposing L-shaped frame pieces as background images. A little Firebug inspection shows they've changed it to be a table. More efficient I'm sure, as the side pieces can tile.