phpBB2Refugees.com Logo
Not affiliated with or endorsed by the phpBB Group

Register •  Login 

Continue the legacy...

Welcome to all phpBB2 Refugees!Wave Smilie

This site is intended to continue support for the legacy 2.x line of the phpBB2 bulletin board package. If you are a fan of phpBB2, please, by all means register, post, and help us out by offering your suggestions. We are primarily a community and support network. Our secondary goal is to provide a phpBB2 MOD Author and Styles area.

Dynamic resizing of pictures


 
Search this topic... | Search MOD Requests... | Search Box
Register or Login to Post    Index » MOD Requests  Previous TopicPrint TopicNext Topic
Author Message
Holger
Board Member



Joined: 19 Jan 2009

Posts: 509
Location: Hanover


flag
PostPosted: Mon Sep 21, 2009 2:13 pm 
Post subject: Dynamic resizing of pictures

Hi, I have a small snippet that dynamically resizes the images within the attachment mod and the IMG-tags. It resizes the images so that they dont break the layout of the forum, no matter how small the monitor is. When clicking on the image it expands (and breaks the layout). When clicking again it gets small again.
But it only works in IE.
I would need a more global script for more browsers.

Does anybody here know about such a script?

/Holger
Back to top
Holger
Board Member



Joined: 19 Jan 2009

Posts: 509
Location: Hanover


flag
PostPosted: Mon Sep 21, 2009 2:14 pm 
Post subject: Re: Dynamic resizing of pictures

Holger wrote:
Hi, I have a small snippet that dynamically resizes the images within the attachment mod and the IMG-tags. It resizes the images so that they dont break the layout of the forum, no matter how small the monitor is. When clicking on the image it expands (and breaks the layout). When clicking again it gets small again.
But it only works in IE.
I would need a more global script for more browsers.

Does anybody here know about such a script?

/Holger


Code:
<img name="tstimg" width="450" height="1">
<script>
var oimg_width=new Array();
var oimg_height=new Array();
var imgMaxWidth=document.images['tstimg'].width;
var imgLength;
setTimeout("resize_image()",3000);

function resize_image() {
   if (document.images('postimg') && imgMaxWidth>449) {
      if (document.images('postimg').length) {
         imgLength=document.images('postimg').length;
         if (imgLength>0 && imgMaxWidth>0) {
            for (var i=0; i<imgLength && i<10; i++) {
         var imager = document.images('postimg')(i);
               imager.id=i;
               if (imager.width>imgMaxWidth) {
                  update_img(imager);
               } else {
                  imager.onload=update_img;
               }
            }
         }
      } else {
         var imager = document.images('postimg');
         imager.id=0;
         if (imager.width>imgMaxWidth) {
            update_img(imager);
         } else {
            imager.onload=update_img;
         }
      }

   }
}

function revert(evt) {
   var elem = (evt) ? evt.target : ((window.event) ? window.event.srcElement : "")
   var temp;

   temp=elem.width;
   elem.width=oimg_width[elem.id];
   oimg_width[elem.id]=temp;

   temp=elem.height;
   elem.height=oimg_height[elem.id];
   oimg_height[elem.id]=temp;
   elem.onclick=revert;

}
function update_img(evt) {
   var elem = (evt) ? (evt.target ? evt.target : evt) : ((window.event) ? window.event.srcElement : "")
   if (elem.width>imgMaxWidth) {
      oimg_width[elem.id]=elem.width;
      oimg_height[elem.id]=elem.height;
      elem.style.cursor= document.all ? 'hand' : 'pointer';
      elem.title="Klicka på bilden för att se den i originalstorlek!";
     elem.onclick=revert;
      elem.width=imgMaxWidth;
     elem.height=elem.height * imgMaxWidth/elem.width;
   }
}
</script>

It also shows up in bbcode.tpl:
Code:
<!-- BEGIN img --><img src="{URL}" name='postimg' border="0" /><!-- END img -->
Back to top
Sylver Cheetah 53
Board Member



Joined: 17 Dec 2008

Posts: 426
Location: Milky Way


flag
PostPosted: Wed Sep 30, 2009 12:21 pm 
Post subject: Re: Dynamic resizing of pictures

OPEN
templates/SubSilver/viewtopic_body.tpl

FIND
Code:
         <table width="100%" cellspacing="0" cellpadding="2" border="0" align="center">
}


BEFORE, ADD
Code:
<script>
window.onload = resizeimg;
function resizeimg()
{
   if (document.getElementsByTagName)
   {
      for (i=0; i<document.getElementsByTagName('img').length; i++)
      {
         im = document.getElementsByTagName('img')[i];
         if (im.width > 600)
         {
            im.style.width = '600px';
            eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + " ','fullscale','width=400,height=400,scrollbars=1,resizable=1'); pop.focus();\")");
            eval("im.onclick = pop" + String(i) + ";");
            if (document.all) im.style.cursor = 'hand';
            if (!document.all) im.style.cursor = 'pointer';
            im.title = 'Click pentru a vedea imaginea la dimensiunea complet&#259;';
         }
      }
   }
}

</script>

_________________
Image link
My Forum || My Blog

phpBB2 forever! icon_smile.gif
Back to top
Display posts from previous:   
Register or Login to Post    Index » MOD Requests  Previous TopicPrint TopicNext Topic
Page 1 of 1 All times are GMT
 
Jump to:  

Index • About • FAQ • Rules • Privacy • Search •  Register •  Login 
Not affiliated with or endorsed by the phpBB Group
Powered by phpBB2 © phpBB Group
Generated in 0.0304 seconds using 15 queries. (SQL 0.0020 Parse 0.0008 Other 0.0276)
phpBB Customizations by the phpBBDoctor.com
Template Design by DeLFlo and MomentsOfLight.com Moments of Light Logo