Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá,
Estou tentando fazer com que várias imagens de uma página redimensionem de acordo com o tamanho da janela, porém não estou conseguindo muito bem.
O site já está no ar: http://www.gamarteemolduras.com.br/
As imagens também mudam quando passa o cursor por cima.
O jquery:
$(document).ready(function(){
$('#imagens ul li img').imgResize();
});
(function($) {
$.fn.extend({
imgResize: function(options) {
var defaults = {
autoCenter: false, //future
animate: false,
speed: 1000,
maxWidth: 10000, //future
maxHeight: 10000, //future
minWidth: 0, //future
minHeight: 0 //future
};
var options = $.extend(defaults, options);
return this.each(function() {
var o = options;
var obj = $(this);
//get all images inside obj
var items = $('img', obj);
//this fixed safari issues with loading js before page load as opposed to just the resize(obj); declaration
$(window).load(function() {
resize(obj);
});
$(window).bind('resize', function() {
resize(obj);
});//end window bind resize
//resize the image, based on windows width and height
function resize(obj){
var windowH = $(window).height();
var windowW = $(window).width();
var theImage = new Image();
theImage.src = obj.attr("src");
var imgwidth = theImage.width;
var imgheight = theImage.height;
if((imgwidth > windowW)||(imgheight > windowH)) {
if(imgwidth > imgheight){
var newwidth = windowW;
var ratio = imgwidth / windowW;
var newheight = imgheight / ratio;
theImage.height = newheight;
theImage.width= newwidth;
if(newheight > windowH) {
var newnewheight = windowH;
var newratio = newheight/windowH;
var newnewwidth =newwidth/newratio;
theImage.width = newnewwidth;
theImage.height= newnewheight;
}
}
else{
var newheight = windowH;
var ratio = imgheight / windowH;
var newwidth = imgwidth / ratio;
theImage.height = newheight;
theImage.width= newwidth;
if(newwidth > windowW) {
var newnewwidth = windowW;
var newratio = newwidth/windowW;
var newnewheight =newheight/newratio;
theImage.height = newnewheight;
theImage.width= newnewwidth;
}
}
}
if((o.animate == true)&&(!$.browser.msie))
obj.stop(true).animate({
'width':theImage.width+'px',
'height':theImage.height+'px'
},o.speed);
else
obj.css({
'width':theImage.width+'px',
'height':theImage.height+'px'
});
}
});//return this each /main code above thisQuem puder ajudar, já agradeço :)
Ninguém??
Carregando comentários...