foamcow
Members
-
Joined
-
Last visited
-
I'd go with something that resized the images using ImageMagick/GD, such as the suggested PHPThumb. If you're using Javascript then all you are doing is scaling the image. You're still downloading the large file and you are going to make it look bad. If you are using TinyMCE then perhaps also the imagemanager plugin which has some resizing/cropping tools built in. I *think* you can also set restrictions on image size in the config of imagemanager, but I'm not certain on this. If you really must use jQuery (and I think you're wrong for doing it this way but hey ho) then try this (untested) $(function(){ $('.imageselector').each(function(){ if($(this).width>200){ $(this).addclass('resizedimg'); }) }) }) and some css for the new class name .resizedimg { width:200px } Like I said, untested but the principle is just to check the width of the image then add a class to it if it's over 200px.
-
Why do you need to use Javascript at all? <img src="JUSTANIMG.JPG" width="200"> or <img src="JUSTANIMG.JPG" style="width:200px;"> Will both make your image 200 pixels wide. If you leave out the height attribute it will resize in proportion. Of course, the image will still be big, just squashed down. A better solution would be to resize the image before it is delivered to the browser using something like ImageMagick or GD but this would be done server side with PHP rather than client side with Javascript. Better still, resize it with ImageMagick when it's uploaded and insert the resized version into the forum post. You should also check that you aren't sizing image UP and only making large images a more managable size.
-
Or this. I've added some heights but you might be able to remove these. It kind of hinges on whether you think the height will vary and whether the right hand box must be the same height as the left. This will work if you know the heights won't change. I've included some colours so you can see where things are. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Hello, Im Greg</title> <style type="text/css" media="screen"> body { background-color:#000; font-family:helvetica, arial, sans-serif; } #wrapper { width:884px; margin:0 auto; } #container { width:590px; height:360px; /* remove if possible when other elements are in */ padding:10px 20px; background-color:#d6d6d6; float:left; } #container h1 { text-align:right; font-size:48px; padding:10px 0; margin-bottom:10px; } #container ul { list-style:none; background-color:#dedede; margin:0; padding:0; } #container li { margin-bottom:10px; } #container li a { display:block; height:70px; /* remove if possible when other elements are in */ padding-left:58px; border:1px solid red; } #sidebox { float:right; width:220px; height:360px; /* remove if possible when other elements are in */ padding:10px; margin-left:10px; background-color:#dedede; } #footer { float:left; width:864px; height:30px; /* remove if possible when other elements are in */ padding:10px; background-color:#ccc; margin-top:10px; } </style> </head> <body> <div id="wrapper"> <div id="container"> <h1>Hello, I'm Greg</h1> <ul> <li><a href="#">Visit my iPhone UI Dev Blog</a></li> <li><a href="#">Email me</a></li> <li><a href="#">Portfolio</a></li> </ul> </div> <!-- end #container --> <div id="sidebox"> <p>iPhone image</p> </div> <!-- end #sidebox --> <div id="footer"> <p>Footer</p> </div> <!-- end #footer --> </div> <!-- end #wrapper --> </body> </html>
-
I think that you need to think about this a slightly different way which will hopefully make it all clearer. First off, forget "slicing" as you would do with tables. Although you may not have done this, from the image you posted you have created photoshop slices. Forget them. Instead, begin by considering HOW your document is structured. Forgetting the right hand block with the iPhone and the footer, let's concentrate on the main area. When I look at that I see (see the attached image for how I see the document's structure): A container A heading An unordered list So think about the HTML to create that. Perhaps something like. <div id="container"> <h1>Hello, I'm Greg</h1> <ul> <li><a href="#">Visit my iPhone UI Dev Blog</a></li> <li><a href="#">Email me</a></li> <li><a href="#">Portfolio</a></li> </ul> </div> <!-- end #container --> Once you have a framework for the document you can look for "hooks" onto which you can attach CSS styling rules and background images. So you might create a background graphic for the #container div and set its width. Then another background for the ul element, setting the width again. Then, perhaps add some id attributes to the 3 list items so you can assign background images for the icons rather than placing images into the HTML. Once you have that styled, it's a block and you can build the rest of the page around it. Again, think of each part of the document as HTML elements. If you think about the document structure first, it will become easier. This is the antithesis of table based layout where you build the document structure to accomodate the visual design. It doesn't work out in every case and sometimes you might need to alter your elements to get a particular design to work but by and large you should be considering the structure and what each element is before anything else.
