Prosty image resizer

[wojtek123]

Wersja: 1.0.4
Strona: reksio-cs.pl
Autor: Sru
Poziom instalacji: Przedszkolny
Czas instalacji: ~48 sekund

Jest to prosty imageresizer oparty o jquery. Jest to kompromis między dwoma modami, jednym resizującym wszystkie obrazy(np. logo) a drugim którego instalacja jest długa i czasochłonna.

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

Kod: Zaznacz cały

 
<script type="text/javascript">
(function( $ ) {
 
  $.fn.aeImageResize = function( params ) {
 
    var aspectRatio = 0
      // Nasty I know but it's done only once, so not too bad I guess
      // Alternate suggestions welcome :)
      , isIE6 = $.browser.msie && (6 == ~~ $.browser.version)
      ;
 
    // We cannot do much unless we have one of these
    if ( !params.height && !params.width ) {
      return this;
    }
 
    // Calculate aspect ratio now, if possible
    if ( params.height && params.width ) {
      aspectRatio = params.width / params.height;
    }
 
    // Attach handler to load
    // Handler is executed just once per element
    // Load event required for Webkit browsers
    return this.one( "load", function() {
 
      // Remove all attributes and CSS rules
      this.removeAttribute( "height" );
      this.removeAttribute( "width" );
      this.style.height = this.style.width = "";
 
      var imgHeight = this.height
        ,       imgWidth = this.width
        ,       imgAspectRatio = imgWidth / imgHeight
        ,       bxHeight = params.height
        ,       bxWidth = params.width
        ,       bxAspectRatio = aspectRatio;
                                
      // Work the magic!
      // If one parameter is missing, we just force calculate it
      if ( !bxAspectRatio ) {
        if ( bxHeight ) {
          bxAspectRatio = imgAspectRatio + 1;
        } else {
          bxAspectRatio = imgAspectRatio - 1;
        }
      }
 
      // Only resize the images that need resizing
      if ( (bxHeight && imgHeight > bxHeight) || (bxWidth && imgWidth > bxWidth) ) {
 
        if ( imgAspectRatio > bxAspectRatio ) {
          bxHeight = ~~ ( imgHeight / imgWidth * bxWidth );
        } else {
          bxWidth = ~~ ( imgWidth / imgHeight * bxHeight );
        }
 
        this.height = bxHeight;
        this.width = bxWidth;
      }
    })
    .each(function() {
 
      // Trigger load event (for Gecko and MSIE)
      if ( this.complete || isIE6 ) {
        $( this ).trigger( "load" );
      }
    });
  };
})( jQuery );
</script>
 

Następnie w szablonie overeal_header.html przedz

Kod: Zaznacz cały

</head>

dodajemy

Kod: Zaznacz cały

 
<!-- IF S_VIEWTOPIC -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- INCLUDE img_resize.html -->
<script type="text/javascript">
$(function() {
  $( ".post img" ).aeImageResize({ height: 700, width: 700 });
});
</script>
<!-- ENDIF -->

DEMO: http://reksio-cs.pl/webmastering-f105/p ... 17376.html

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