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>
Kod: Zaznacz cały
</head>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 -->Wartości height: 700, width: 700 mozna zmienić na takie, na jakie mają być resizowane obrazki.
