Prosty image resizer phpBB3(jquery).

Jest to najprostszy sposób na zmianę dużych obrazów na małe, bez motania w bazie, w kodzie php. Wszystko tylko dzięki jQuery.
Ważne! Zmienia tylko rozmiar obrazów w poście, nie psuje innych obrazów np. dużego logo.

Instrukcja:
W styles/twojstyl/templates/ tworzymy plik img_resize.html i dodajemy do niego:

Kod: Zaznacz cały

1.  


2. <script type="text/javascript">


3. (function( $ ) {


4.  


5.   $.fn.aeImageResize = function( params ) {


6.  


7.     var aspectRatio = 0


8.       // Nasty I know but it's done only once, so not too bad I guess


9.       // Alternate suggestions welcome :)


10.       , isIE6 = $.browser.msie && (6 == ~~ $.browser.version)


11.       ;


12.  


13.     // We cannot do much unless we have one of these


14.     if ( !params.height && !params.width ) {


15.       return this;


16.     }


17.  


18.     // Calculate aspect ratio now, if possible


19.     if ( params.height && params.width ) {


20.       aspectRatio = params.width / params.height;


21.     }


22.  


23.     // Attach handler to load


24.     // Handler is executed just once per element


25.     // Load event required for Webkit browsers


26.     return this.one( "load", function() {


27.  


28.       // Remove all attributes and CSS rules


29.       this.removeAttribute( "height" );


30.       this.removeAttribute( "width" );


31.       this.style.height = this.style.width = "";


32.  


33.       var imgHeight = this.height


34.         ,       imgWidth = this.width


35.         ,       imgAspectRatio = imgWidth / imgHeight


36.         ,       bxHeight = params.height


37.         ,       bxWidth = params.width


38.         ,       bxAspectRatio = aspectRatio;


39.                                


40.       // Work the magic!


41.       // If one parameter is missing, we just force calculate it


42.       if ( !bxAspectRatio ) {


43.         if ( bxHeight ) {


44.           bxAspectRatio = imgAspectRatio + 1;


45.         } else {


46.           bxAspectRatio = imgAspectRatio - 1;


47.         }


48.       }


49.  


50.       // Only resize the images that need resizing


51.       if ( (bxHeight && imgHeight > bxHeight) || (bxWidth && imgWidth > bxWidth) ) {


52.  


53.         if ( imgAspectRatio > bxAspectRatio ) {


54.           bxHeight = ~~ ( imgHeight / imgWidth * bxWidth );


55.         } else {


56.           bxWidth = ~~ ( imgWidth / imgHeight * bxHeight );


57.         }


58.  


59.         this.height = bxHeight;


60.         this.width = bxWidth;


61.       }


62.     })


63.     .each(function() {


64.  


65.       // Trigger load event (for Gecko and MSIE)


66.       if ( this.complete || isIE6 ) {


67.         $( this ).trigger( "load" );


68.       }


69.     });


70.   };


71. })( jQuery );


72. </script>


73.  

Następnie w szablonie overeal_header.html przedz

Kod: Zaznacz cały

1. </head>

dodajemy

Kod: Zaznacz cały

1.  


2. <!-- IF S_VIEWTOPIC -->


3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


4. <!-- INCLUDE img_resize.html -->


5. <script type="text/javascript">


6. $(function() {


7.   $( ".post img" ).aeImageResize({ height: 700, width: 700 });


8. });


9. </script>


10. <!-- ENDIF -->

Wartości height: 700, width: 700 mozna zmienić na takie, na jakie mają być resizowane obrazki.
To wszystko. Efekt:

Nasty I know but it's done only once, so not too bad I guess
// Alternate suggestions welcome

Fajna czcionka