3.x/Image resizer: verschil tussen versies

Uit phpBB.nl Wiki
Ga naar: navigatie, zoeken
(Functie aanroepen)
(Vernederlandst)
Regel 84: Regel 84:
 
<pre>styles/*/template/posting_topic_review.html</pre>
 
<pre>styles/*/template/posting_topic_review.html</pre>
  
'''''Find:'''''
+
'''''Vind:'''''
 
<pre> <td class="row1"><div style="overflow: auto; width: 100%; height: 300px;">
 
<pre> <td class="row1"><div style="overflow: auto; width: 100%; height: 300px;">
  
 
<table class="tablebg" width="100%" cellspacing="1"></pre>
 
<table class="tablebg" width="100%" cellspacing="1"></pre>
  
'''''Replace with:'''''
+
'''''Verander in:'''''
 
<pre>        <td class="row1"><div style="overflow: auto; width: auto; height: 300px;">
 
<pre>        <td class="row1"><div style="overflow: auto; width: auto; height: 300px;">
  

Versie van 22 jun 2008 om 16:42

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

Vind:

   <body

Voeg in dezelfde regel erna toe:

   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

Vind:

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

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

Verander in:

        <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