Jump to content

Dynamic framing of images using Jquery and PHP


willothewisp

Recommended Posts

I'm completely stuck and I need help. I've been trying to create a picture framing utility (for photos etc). where the user can specify the size of their photo, then choose a coloured cardboard mount and a frame type to go around it. The site my client chose for me to create something similar to is this: http://www.ezeframe.co.uk/picture-frames

You can see that the user can specify their picture size, frame and mount, and see it taking shape on screen. Where I've come unstuck is the scaling. You can see in the above example that if someone changes their mount size or frame type, they change so that they remain in proportion to the picture size. I've been trying to make my system do the same and I'm failing! I'm sure it's my maths that's wrong but can't work out where.

What I've done so far (without scaling) can be seen on the clients live site here: www.vivarti.co.uk/bespoke-frames

I've done it mostly using CSS, Jquery and AJAX.

 

The way it works is that I have a fixed pixel area to work within. When the user alters the size of frame moulding, or the cardboard mount, it needs to scale the 'image area', mount and frame in proportion.

I've tried doing it using fixed pixel width, percentage width and every other way I can think of, but I still can't get it to work properly.

 

Is there a better way to do this kind of thing than using Jquery, or can anyone help me work out the maths to make my version scale? A tall order I know but I'm just hoping someone can help me!

Thanks in advance.

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.