Large Images

  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

http://files.nytrovil.com/gif/ozzu_sh_2.gif

This could probably be solved by a quick script that checked the width of an image and then desided if it should display it or just post the URL.

Kinda nice that there is no strech though :)
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Hmm, yes I am aware of this one, but am still debating on how it should be fixed. Normally in the old theme it would just create horizontal scrollbars on the bottom instead of displaying over other content. The old theme uses tables though.

The other alternative to overwriting content on the right, would be to simply get cut off (ie, anything extending into the menu would be hidden).

I am not sure I can force the div that the image belongs into from not shrinking further (as its currently doing), as that would probably be what I would prefer to do. I just do not think its possible, hopefully I am wrong.

Would appreciate ideas.
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

Well after looking around at screen sizes and resolutions I have found that it would require javascript. Im not sure how to do it in javascript though (This would be making the image a link if its width is greater then the main content of the post). It would require an array of the each image and the width. Then it would have to check find the width of the screen so it can calculate the width of the div. Then check it agents the size of the image.

So first you would need to make a script in php the would read every post in the topic that is going to be displayed. Then create an array for the javascript to work with.

Code: [ Select ]
var ImageSourceArray=new Array("/images/image1.gif","/images/image2.gif","/images/image3.gif")
for (i=0;i<=ArraySize;i++) // Im not sure how to calc the size of an array in javascript
{
The_Image = new Image();
The_Image.src = ImageSourceArray[i];

if(The_Image.width >= (Calc to find the width of the content area dynamicly, for those that dont have the window full sized)) {
document.write(The_Image.src);
} else {
document.write("<img src=\""+The_Image.src+"\">");
}
  1. var ImageSourceArray=new Array("/images/image1.gif","/images/image2.gif","/images/image3.gif")
  2. for (i=0;i<=ArraySize;i++) // Im not sure how to calc the size of an array in javascript
  3. {
  4. The_Image = new Image();
  5. The_Image.src = ImageSourceArray[i];
  6. if(The_Image.width >= (Calc to find the width of the content area dynamicly, for those that dont have the window full sized)) {
  7. document.write(The_Image.src);
  8. } else {
  9. document.write("<img src=\""+The_Image.src+"\">");
  10. }



Screen Width Code
Code: [ Select ]
var screenW = 640, screenH = 480;
if (parseInt(navigator.appVersion)>3) {
screenW = screen.width;
screenH = screen.height;
}
else if (navigator.appName == "Netscape"
  && parseInt(navigator.appVersion)==3
  && navigator.javaEnabled()
  )
{
var jToolkit = java.awt.Toolkit.getDefaultToolkit();
var jScreenSize = jToolkit.getScreenSize();
screenW = jScreenSize.width;
screenH = jScreenSize.height;
}

document.write(
"Screen width = "+screenW+"<br>"
+"Screen height = "+screenH
)
  1. var screenW = 640, screenH = 480;
  2. if (parseInt(navigator.appVersion)>3) {
  3. screenW = screen.width;
  4. screenH = screen.height;
  5. }
  6. else if (navigator.appName == "Netscape"
  7.   && parseInt(navigator.appVersion)==3
  8.   && navigator.javaEnabled()
  9.   )
  10. {
  11. var jToolkit = java.awt.Toolkit.getDefaultToolkit();
  12. var jScreenSize = jToolkit.getScreenSize();
  13. screenW = jScreenSize.width;
  14. screenH = jScreenSize.height;
  15. }
  16. document.write(
  17. "Screen width = "+screenW+"<br>"
  18. +"Screen height = "+screenH
  19. )


That was just thrown together, im not sure if that s possble. I was first programming as for a back end where you have to store all information to output later where it needs to be, but I guess in javascript you can run scripts anywhere on the page.


New idea sort of. Can you do this?

Code: [ Select ]
<img src="Javascript:CheckImageSize("http://www.webpage/image.gif");" />


Never mind that wouldnt do a thing.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

This seems to work for Opera & Mozilla based browsers.

Code: [ Select ]
.message img{
    max-width: 90%;
}
  1. .message img{
  2.     max-width: 90%;
  3. }


This does the same for Internet Explorer if the .message elements have an overflow of hidden

Code: [ Select ]
.message{
    overflow: hidden;
}
.message img{
    width: expression(
        parseInt(this.offsetWidth) > parseInt(this.parentNode.offsetWidth) ? '90%' : (this.offsetWidth + 'px'));
}
  1. .message{
  2.     overflow: hidden;
  3. }
  4. .message img{
  5.     width: expression(
  6.         parseInt(this.offsetWidth) > parseInt(this.parentNode.offsetWidth) ? '90%' : (this.offsetWidth + 'px'));
  7. }


Could cause tiny images to be produced if anyone ever wraps them in other elements though. :?
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

I will try what Joebert said first. I would prefer the most simpliest solution.

You have good ideas though Spoof, and may have to resort to something like that if I cannot figure out another way.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

I applied what Joebert says and everything seems great in FF and Opera now.

However, the fix for IE doesn't exactly work right. The image isn't resizing at all and it just forces everything to the bottom of the page.
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

If you have that CSS in there you will have to make the images links. I cant read the text in the image. http://www.ozzu.com/programming-forum/image-from-mysql-table-just-binary-data-help-t68427.html I know I can right click and view image but maybe not all will?

FF
1280x800
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Yeah if the images shrink down they will be distorted. I would prefer not to add all of that Javascript if I can, so that is why I think resizing the image if the browser's resolution is too small is the best way to go. It makes the image distorted, but it doesn't break the design.
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

Well you can just make the image a link in the backend. Doent matter if the image is a 1x1 or a 1600x1200. Just put a link around all images to the source. That shouldnt cause any problems. Unless the poster wants to put another link around it.

Another thing you can do is make a "zoom" feature such as the one on template monster. when you hover over an image it makes a larger one in a movable div that is fixed to the mouse.

Not sure if you want to do this, just more work lol.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

SpooF wrote:
Well you can just make the image a link in the backend. Doent matter if the image is a 1x1 or a 1600x1200. Just put a link around all images to the source. That shouldnt cause any problems. Unless the poster wants to put another link around it.


Yeah exactly. If it wasn't for the fact it would cause that other problem it would be very easy to do. To do this I would have to write in programming to detect if the image is being linked elsewhere manually.

I think the best way would be to have some kind of zoom feature like you mentioned with TM.
  • UniquelyYoursPC
  • Web Master
  • Web Master
  • User avatar
  • Posts: 2997
  • Loc: Canada "A"

Post 3+ Months Ago

i think there is a add on for this.. it makes the photo 150x150 and tells the real size on the bottem then you can clikc the link for the full size one.

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 9 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.