cargar imagen aleatoriamente

[_rulo]

Hola a todos,

Estoy usando como background para una web una imagen que carga en el fondo.
Quiero que al entrar cargue de manera aleatoria, o sea que no siempre sea el mismo fondo el que aparece.

coloque este código:

Código:

$(document).ready(function(){
	      bgImageTotal=19;
          randomNumber = Math.round(Math.random()*(bgImageTotal-1))+1;
          imgPath=('imagenes/background/'+randomNumber+'.jpg');
          $('#bgimg').attr('src', ('url('+imgPath+')'));
      });

Me funciona perfecto en safari y chrome, pero IE y en Firefox no me funciona.
El div bgimg esta asociado también a otro script que permite que la imagen se adapte al tamaño de la ventana. Es un plugin de jquery.

Este es el plugin que activo desde el html.

Código:

(function($){	

	$.fn.fullscreenr = function(options) {
		if(options.height === undefined) alert('Please supply the background image height, default values will now be used. These may be very inaccurate.');
		if(options.width === undefined) alert('Please supply the background image width, default values will now be used. These may be very inaccurate.');
		if(options.bgID === undefined) alert('Please supply the background image ID, default #bgimg will now be used.');
		var defaults = { width: 1280,  height: 800, bgID: 'bgimg' };
		var options = $.extend({}, defaults, options); 
		$(document).ready(function() { $(options.bgID).fullscreenrResizer(options);	});
		$(window).bind("resize", function() { $(options.bgID).fullscreenrResizer(options); });		
		return this; 		
	};	
	$.fn.fullscreenrResizer = function(options) {
		// Set bg size
		var ratio = options.height / options.width;	
		// Get browser window size
		var browserwidth = $(window).width();
		var browserheight = $(window).height();
		// Scale the image
		if ((browserheight/browserwidth) > ratio){
		    $(this).height(browserheight);
		    $(this).width(browserheight / ratio);
		} else {
		    $(this).width(browserwidth);
		    $(this).height(browserwidth * ratio);
		}
		// Center the image
		$(this).css('left', (browserwidth - $(this).width())/2);
		$(this).css('top', (browserheight - $(this).height())/2);
		return this; 		
	};
})(jQuery);

El problema es que uno anula al otro en esos browsers.
Cómo puedo hacer para que funcionen ambos?

Mil gracias

[caricatos]

Tema movido desde javascript

[mayid]

Respecto al primer script, yo revería esto:

$('#bgimg').attr('src', ('url('+imgPath+')'));

Lo haría así:

$('#bgimg').attr('src', imgPath);

Es mas, no usaría jquery para esto. Usaría PHP.

<img src="imagenes/background/<?php $numero_aleatorio = mt_rand(0,18); echo $numero_aleatorio+1; ?>.jpg" alt="" />

[_rulo]

mayid, gracias por la respuesta.

probé la opción en php y no me funciono.
no conozco mucho php. el código lo inserto así no más?
te pregunto de curioso.

La otra opción, la de jquery, me anduvo para safari, chrome y firefox. Aun no probe ie

Dejo el link de la web en cuestión, en ese archivo aplique el jquery que me pasaste.
http://qubo.com.uy/index_2.html


Mil gracias

[mayid]

Chequea que en PHP esto sea valido: mt_rand(0,18)

En cuanto a esta linea... supongo que es buena: $numero_aleatorio+1

Que error te da específicamente? Deberías verlo en pantalla. Y... te fijaste en el codigo fuente a ver que imprime PHP.

Ahora, si tu script jquery funciona... bien, podes obviar esto. Pero lo recomiendo. Arreglalo. Me parece más elegante que la opción en jquery.