Mostrar unas imágenes u otras

esebayolo · #1 (**permalink**) 18/04/2012, 02:00

Hola estoy usando Sliderman(http://www.devtrix.net/sliderman/) para una presentación de imágenes y quería que si las resolución de la pantalla es inferior a 1280xloquesea se mostrasen otras imágenes más pequeñas que tengo en la misma carpeta.

Lo he intentando hacer así pero no me funciona:
- En el head

Código:

<script type="text/javascript">
	function changeImages() {
		var ancho = screen.width;
		if (parseInt(ancho) < parseInt(1280)) {
			document.getElementById("img1").src="fotos/vacaloura001mini.jpg";
			document.getElementById("img2").src="fotos/vacaloura002mini.jpg";
			document.getElementById("img3").src="fotos/vacaloura003mini.jpg";
			document.getElementById("img4").src="fotos/vacaloura004mini.jpg";
			document.getElementById("img5").src="fotos/vacaloura005mini.jpg";
		}else {
			document.getElementById("img1").src="fotos/vacaloura001.jpg";
			document.getElementById("img2").src="fotos/vacaloura002.jpg";
			document.getElementById("img3").src="fotos/vacaloura003.jpg";
			document.getElementById("img4").src="fotos/vacaloura004.jpg";
			document.getElementById("img5").src="fotos/vacaloura005.jpg";
		}
	}
</script>

-En el body:

Código:

<body onload="javascript:changeImages()">
....
....
....
<div id="SliderName_2">
                <img id="img1" src="fotos/vacaloura001.jpg" alt="Vacaloura" title="Vacaloura" />
                <img id="img2" src="fotos/vacaloura002.jpg" alt="Vacaloura" title="Vacaloura" />
                <img id="img3" src="fotos/vacaloura003.jpg" alt="Vacaloura" title="Vacaloura" />
                <img id="img4" src="fotos/vacaloura004.jpg" alt="Vacaloura" title="Vacaloura" />
                <img id="img5" src="fotos/vacaloura005.jpg" alt="Vacaloura" title="Vacaloura" />
                <div id="SliderNameNavigation_2"></div>
                <script type="text/javascript">
					<!--effectsDemo2 = 'rain,stairs,fade';-->
					effectsDemo2 = 'fade';
					var demoSlider_2 = Sliderman.slider({container: 'SliderName_2', width: 1225, height: 539, effects: effectsDemo2,
					display: {
						autoplay: 3000,
						autostart: false,
						first_slide: true,
						loading: {background: '#000000', opacity: 0.5, image: 'fotos/loading.gif'},
						buttons: {hide:true, opacity:1, prev:{className:'SliderNamePrev_2', label:''},next:{className:'SliderNameNext_2', label:''}},
						navigation: {container: 'SliderNameNavigation_2', label: '<img src="fotos/clear.gif" />'}
						}
					});
                </script>
            </div>
....
....
....

Estoy haciendo algo mal? o existe alguna forma más sencilla de hacerlo?

Gracias.

esebayolo · #2 (**permalink**) 18/04/2012, 04:42

Ya lo he solucionado. he modificado el código:

Código:

...
...
<img id="img5" src="fotos/vacaloura005.jpg" alt="Vacaloura" title="Vacaloura" />
                <div id="SliderNameNavigation_2"></div>
                <script type="text/javascript">
					<!--effectsDemo2 = 'rain,stairs,fade';-->
					effectsDemo2 = 'fade';
					var ancho = screen.width;
					if (parseInt(ancho) < parseInt(1280)) {
						var w = 950;
						var h = 418;
					} else {
						var w = 1225;
						var h = 539;
					}
					var demoSlider_2 = Sliderman.slider({container: 'SliderName_2', width: w, height: h, effects: effectsDemo2,
					display: {
						autoplay: 3000,
...
...
...