I am creating a photogrpahy website:
<!-- m --><a class="postlink" href="http://fboyd.coe.uga.edu/~prich/photography/nature/flowers/flowers.htm">http://fboyd.coe.uga.edu/~prich/photogr ... lowers.htm</a><!-- m -->
As you can see, the image changes as you roll over each thumbnail; the dimensions vary between horizontal and verticle images, and some pages are going to have panoramas.
The problem:
I would like to also include an array of picture frames for people to test around the current image. I've tried different ways of doing this, all to no avail due to the fact that I need to be able to do so without specifying the dimensions of the frame (because the pictures being framed will all be changing dimensions). I thought perhaps I could use use the background-image property, but apparently, that can't be changed. I tried Big Baer's tutorial (<!-- m --><a class="postlink" href="http://www.bigbaer.com/css_tutorials/css.border.image.frame.styles.htm">http://www.bigbaer.com/css_tutorials/cs ... styles.htm</a><!-- m -->) on creating frames around pictures but can't get the frame to resize correctly (and it renders differently in each browser). I looked at a number of drop-shadow examples on A List Apart,
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/cssdropshadows/">http://www.alistapart.com/articles/cssdropshadows/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/cssdrop2/">http://www.alistapart.com/articles/cssdrop2/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/onionskin/">http://www.alistapart.com/articles/onionskin/</a><!-- m -->
but still have the problem of not being able to resize the picture frame around the picture correctly. Does anyone have any suggestions of how I might be able to do this? I would prefer to be able to do it with just one image per frame as more multiplies the array of pictures by however many pieces are needed (although I readily accept multi-image solutions that work). One of the problems I have is that I can't just "add" a certain number of pixels to offset the picture by since the relative thickness of each picture frame border is different. Basically, I need to resize the image from the inside, non-frame part of the picture. Any ideas?Right now you've got Javascript errors on your page. Look at it with the Javascript Console open in Firefox.Thanks for that. I'll have to look at those errors. I didn't realize they were there. Any ideas on how to create a picture frame? Did I explain myself understandably?I think I understand what you want but since the JS is an integral part of the page I can't see anything but the thumbnails. You're talking about framing the enlargement, not the thumbnails, right?Yes, I am talking about framing the large picture in the middle of the page, so users can see what different frames (e.g. wooden, metal, elaborate, simple, etc.) would look like with a given picture. The thumbnails are fine for now.
Sorry about the js errors. now I understand why what you said earlier was important to this discussion. You've probably got js turned off and wouldn't want to turn it on (esp. if it is faulty). And if it's turned off, you can't see the effect. In essence, it's a simple image-swap effect姊æ you roll over a thumbnail, the main picture in the middle of the page shows a larger image of that thumbnail. I'd like to provide a row of picture frames and do the same thing with them, swaping the image around the main picture as a user clicks on or rolls over a pic frame thumbnail.
Does that makes sense? I hope I'm explaining it ok. Thanks for the input.Yes. I can do something like that with IE but I can't find a way to do it in FF because I can't get FF to stretch a div to fit the image that's in it.Yeah, I had the same problem. I could get the image to stretch (using Big Baer's method) in both IE and Safari (although the same code stretched them differently), but not in FF. Since Mozilla is usu. Any clues why this is? (I understand that Mozilla is usu. rendering things the "right" way so is it actually a mistake that IE and Safari are stretching the div?). Perhaps there is a better way to do this using JS, but I'm not real savvy with JS, so I'm not quite sure. Again, any ideas are welcome.One idea I had (and failed at) was to use four different images for each picture and make them the borders of the image (e.g using a picture for a border instead of a default color and thicknes). Not only could I not get this to work, but I read in a lot of different places that border properties tend to give problems and render differently in different browsers. Is there something along these lines that might work that I am overlooking (b/c if we were to make the image the border, we wouldn't have to worry about resizing the image, or something to that effect)?I was using three divs; container, upper-left, lower-right.
<div id="c">
<div id="u">
<div id="l"><img></div>
</div>
</div>
Setting the width of the container div with Javascript should make everything work fine but I couldn't find a pure CSS solution.There isn't a pure css solution that I know of. I had a similar issue, what I ended up doing is loading picture information using php and setting some css properties via JS with what I was given from php.
A way to make your life easier is to set up a couple basic sizes that all the pictures adhere to; mine are a 4x3 ratio which makes scaling simpler. Trying to keep all your images to certain WxH ratios and/or sizes would also enable you to get a few frame images (frame small, medium, large, etc...) to simply place a frame around it via an image.
Hope this helps!
<!-- m --><a class="postlink" href="http://fboyd.coe.uga.edu/~prich/photography/nature/flowers/flowers.htm">http://fboyd.coe.uga.edu/~prich/photogr ... lowers.htm</a><!-- m -->
As you can see, the image changes as you roll over each thumbnail; the dimensions vary between horizontal and verticle images, and some pages are going to have panoramas.
The problem:
I would like to also include an array of picture frames for people to test around the current image. I've tried different ways of doing this, all to no avail due to the fact that I need to be able to do so without specifying the dimensions of the frame (because the pictures being framed will all be changing dimensions). I thought perhaps I could use use the background-image property, but apparently, that can't be changed. I tried Big Baer's tutorial (<!-- m --><a class="postlink" href="http://www.bigbaer.com/css_tutorials/css.border.image.frame.styles.htm">http://www.bigbaer.com/css_tutorials/cs ... styles.htm</a><!-- m -->) on creating frames around pictures but can't get the frame to resize correctly (and it renders differently in each browser). I looked at a number of drop-shadow examples on A List Apart,
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/cssdropshadows/">http://www.alistapart.com/articles/cssdropshadows/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/cssdrop2/">http://www.alistapart.com/articles/cssdrop2/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/onionskin/">http://www.alistapart.com/articles/onionskin/</a><!-- m -->
but still have the problem of not being able to resize the picture frame around the picture correctly. Does anyone have any suggestions of how I might be able to do this? I would prefer to be able to do it with just one image per frame as more multiplies the array of pictures by however many pieces are needed (although I readily accept multi-image solutions that work). One of the problems I have is that I can't just "add" a certain number of pixels to offset the picture by since the relative thickness of each picture frame border is different. Basically, I need to resize the image from the inside, non-frame part of the picture. Any ideas?Right now you've got Javascript errors on your page. Look at it with the Javascript Console open in Firefox.Thanks for that. I'll have to look at those errors. I didn't realize they were there. Any ideas on how to create a picture frame? Did I explain myself understandably?I think I understand what you want but since the JS is an integral part of the page I can't see anything but the thumbnails. You're talking about framing the enlargement, not the thumbnails, right?Yes, I am talking about framing the large picture in the middle of the page, so users can see what different frames (e.g. wooden, metal, elaborate, simple, etc.) would look like with a given picture. The thumbnails are fine for now.
Sorry about the js errors. now I understand why what you said earlier was important to this discussion. You've probably got js turned off and wouldn't want to turn it on (esp. if it is faulty). And if it's turned off, you can't see the effect. In essence, it's a simple image-swap effect姊æ you roll over a thumbnail, the main picture in the middle of the page shows a larger image of that thumbnail. I'd like to provide a row of picture frames and do the same thing with them, swaping the image around the main picture as a user clicks on or rolls over a pic frame thumbnail.
Does that makes sense? I hope I'm explaining it ok. Thanks for the input.Yes. I can do something like that with IE but I can't find a way to do it in FF because I can't get FF to stretch a div to fit the image that's in it.Yeah, I had the same problem. I could get the image to stretch (using Big Baer's method) in both IE and Safari (although the same code stretched them differently), but not in FF. Since Mozilla is usu. Any clues why this is? (I understand that Mozilla is usu. rendering things the "right" way so is it actually a mistake that IE and Safari are stretching the div?). Perhaps there is a better way to do this using JS, but I'm not real savvy with JS, so I'm not quite sure. Again, any ideas are welcome.One idea I had (and failed at) was to use four different images for each picture and make them the borders of the image (e.g using a picture for a border instead of a default color and thicknes). Not only could I not get this to work, but I read in a lot of different places that border properties tend to give problems and render differently in different browsers. Is there something along these lines that might work that I am overlooking (b/c if we were to make the image the border, we wouldn't have to worry about resizing the image, or something to that effect)?I was using three divs; container, upper-left, lower-right.
<div id="c">
<div id="u">
<div id="l"><img></div>
</div>
</div>
Setting the width of the container div with Javascript should make everything work fine but I couldn't find a pure CSS solution.There isn't a pure css solution that I know of. I had a similar issue, what I ended up doing is loading picture information using php and setting some css properties via JS with what I was given from php.
A way to make your life easier is to set up a couple basic sizes that all the pictures adhere to; mine are a 4x3 ratio which makes scaling simpler. Trying to keep all your images to certain WxH ratios and/or sizes would also enable you to get a few frame images (frame small, medium, large, etc...) to simply place a frame around it via an image.
Hope this helps!