3.x/Image resizer

Uit phpBB.nl Wiki
Ga naar: navigatie, zoeken

Het gebeurt maar wat vaak dat gebruikers van je forum foto's met de andere gebruikers willen delen. Geweldig natuurlijk, maar soms zijn die plaatjes wel erg groot. Soms zelfs zo groot, dat de layout van je forum er door wordt verstoord. Dat willen we natuurlijk niet. Daarom hebben we de resizer gemaakt, welke je als volgt op je forum installeert:

Functie aanmaken

Open:

  styles/*/template/overall_header.html

Vind:

  </head>

Voeg ervoor toe:

<script type="text/javascript">
//Image resize mod, created bij Ger, www.swordfactsbenelux.nl
function resizeimg()
{
  if (document.getElementsByTagName)
    {
      var img, imgs = document.getElementsByTagName('IMG'), i = imgs.length;
      while (i--)
      {
         img = imgs[i];
         if (img.width > 500 && img.src != 
"http://www.swordfactsbenelux.nl/forums/styles/sfb/imageset/site_logo.gif")
         {
            img.style.width = '500px';
            img.style.border = '1px dashed';
            img.onclick = function() 
            {
               var pop = window.open(this.src, 'fullscale');
                pop.focus();
            }
            img.style.cursor = 'pointer';
            img.title = 'Klik op de afbeelding om hem op ware grootte te bekijken';
            if (img.parentNode.nodeName == 'A')
            {
              img.parentNode.onclick = function() { return false; }
            }
         }
      }
   }
}
</script>

Opmerkingen

Grenswaarde

Je kunt zelf bepalen vanaf welke breedte je de plaatjes wil laten resizen. In bovenstaand voorbeeld is dat vanaf 500 pixels. Je wijzigt dit door in de regel

 if (img.width > 500

de 500 te vervangen door de door jou gewenste waarde.

Iets verder naar beneden zie je ook:

 img.style.width = '500px';

Dat is de breedte waarnaar je het plaatje wilt resizen. In dit voorbeeld is dat ook 500 pixels, wederom kun je de 500 vervangen door wat je zelf prettig vind.

Voorkomen dat je boardlogo ook wordt geresized

We willen natuurlijk niet dat het forumbrede logo waar je zo hard aan hebt gewerkt ook wordt geresized. Daarom moeten we die uitsluiten. Dat doen we met de regel

  && img.src != "site_logo.gif"

De url van dit plaatje moet je vervangen door die van je eigen site_logo.

Functie aanroepen

Nu moeten we er nog voor zorgen dat de functie wordt aangeroepen. Om dit bij alle stijlen goed te laten gaan, moeten we even een "smerig" trucje uithalen: we zorgen ervoor dat als de muis op de pagina staat, de resize-functie wordt uitgevoerd. Dit doen we in hetzelfde bestand: overall_header.html

Find:

   <body

Inline Add:

   onmouseover="resizeimg()"

Bij op SubSilver2 gebaseerde stijlen moet het er dan ongeveer zo uitzien:

  <body onmouseover="resizeimg()" class="{S_CONTENT_DIRECTION}">

En bij op ProSilver gebaseerde stijlen ongeveer zo:

  <body onmouseover="resizeimg()" id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

Het gaat er dus om dat

  onmouseover="resizeimg()" 

in de <body> tag staat.


Internet Explorer 6 probleem oplossen (alleen voor op SubSilver2 gebaseerde stijlen)

Hoewel Internet Explorer 6 verouderd is en zich niet aan veel webstandaarden houdt, kunnen we er helaas nog niet omheen; ongeveer de helft van de mensen gebruikt het nog. In Internet Explorer 6 leveren grote afbeeldingen problemen op bij het antwoorden in een topic (alleen bij op SubSilver2 gebaseerde stijlen). Zelfs na het resizen van de afbeeldingen, blijft de pagina opgerekt. Dit willen we natuurlijk niet. Daarom moet onderstaande codewijziging doorgevoerd worden om Internet Explorer 6 de pagina goed weer te laten geven, zonder daarmee weer problemen te laten ontstaan bij andere browsers (met dank aan Tazmanian):

Open

styles/*/template/posting_topic_review.html

Find:

	<td class="row1"><div style="overflow: auto; width: 100%; height: 300px;">

	<table class="tablebg" width="100%" cellspacing="1">

Replace with:

        <td class="row1"><div style="overflow: auto; width: auto; height: 300px;">

	<table class="tablebg" width="99%" cellspacing="1">


Sla overall_header.html en posting_topic_review.html op, vernieuw je template in het beheerderspaneel en je hebt je image resizer!

Links