jul
6
2009

Galeria de Images 3D en Mootools para tu Web :)

An article by miguelortega

mootols
Esta es una buena galeria para su web, esta está echa con javascript y css… Si esta medio fresona, por que a las fotos les agrega automaticamente un degradado(lamentablemente ese degradado solo funciona en Firefox, Chrome, Opera y demas, pero menos en el iexplorer.)

Pus ya a empesar..

El primer paso es agregar las librerias siguientes te dejo el link para descargarlas:
mootools-1.2.1-core-yc.js
mootools-1.2-more.js
pbb-magicwheel-1.0.js

1
2
3

	<script type="text/javascript" charset="utf-8" src="mootools-1.2.1-core-yc.js" ></script>
	<script type="text/javascript" charset="utf-8" src="mootools-1.2-more.js" ></script>
	<script type="text/javascript" charset="utf-8" src="pbb-magicwheel-1.0.js" ></script>

Estas son las librerias javascript que vamos a utiliazar!!! ahora agrega este codigo javascript:

	<script type="text/javascript" charset="utf-8">
	window.addEvent('domready', function(){
		var MyMW = new PBB_MagicWheel($('magicwheel'));
 
		var SLIDEuserIconWidth = new Slider($('SLIDEuserIconWidth'), $('KNOBuserIconWidth'), {
			range: [MyMW.options.iconMinWidth, MyMW.options.iconMaxWidth],
			steps: MyMW.options.iconMaxWidth,
			wheel: true,
			onChange: function(pos){
				MyMW.options.userIconWidth = pos;
				MyMW.checkSettings();
			}
		}).set(MyMW.options.userIconWidth);
 
		var SLIDEuserIconMinWidth = new Slider($('SLIDEuserIconMinWidth'), $('KNOBuserIconMinWidth'), {
			range: [MyMW.options.iconMinWidth, MyMW.options.iconMaxWidth],
			steps: MyMW.options.iconMaxWidth,
			wheel: true,
			onChange: function(pos){
				if(pos > MyMW.options.userIconWidth)
					this.set(MyMW.options.userIconWidth);
				else
					MyMW.options.userIconMinWidth = pos;
				MyMW.checkSettings();
			}
		}).set(MyMW.options.userIconMinWidth);
 
		var SLIDEuserWidth = new Slider($('SLIDEuserWidth'), $('KNOBuserWidth'), {
			range: [MyMW.options.minWidth, MyMW.options.maxWidth],
			steps: 100,
			wheel: true,
			onChange: function(pos){
				if(pos > MyMW.options.maxWidth - MyMW.options.userIconWidth)
					this.set(MyMW.options.maxWidth - MyMW.options.userIconWidth);
				else
					MyMW.options.userWidth = pos;
				MyMW.checkSettings();
			}
		}).set(MyMW.options.userWidth);
 
		var SLIDEuserHeight = new Slider($('SLIDEuserHeight'), $('KNOBuserHeight'), {
			range: [MyMW.options.minHeight, MyMW.options.maxHeight],
			steps: 100,
			wheel: true,
			onChange: function(pos){
				MyMW.options.userHeight = pos / MyMW.icons.length;
				MyMW.checkSettings();
			}
		}).set(MyMW.options.userHeight * MyMW.icons.length);
 
		var SLIDEuserSpeed = new Slider($('SLIDEuserSpeed'), $('KNOBuserSpeed'), {
			range: [-1000, 1000],
			steps: 200,
			wheel: true,
			onChange: function(pos){
				MyMW.options.userSpeed = pos / 1000;
				MyMW.checkSettings();
			}
		}).set(MyMW.options.userSpeed * 1000);
 
		var SLIDEuserIconOpacity = new Slider($('SLIDEuserIconOpacity'), $('KNOBuserIconOpacity'), {
			range: [0, 10],
			steps: 10,
			wheel: true,
			onChange: function(pos){
				MyMW.options.userIconOpacity = pos / 10;
				MyMW.checkSettings();
			}
		}).set(MyMW.options.userIconOpacity * 10);
 
		var SLIDEuserIconMinOpacity = new Slider($('SLIDEuserIconMinOpacity'), $('KNOBuserIconMinOpacity'), {
			range: [0, 10],
			steps: 10,
			wheel: true,
			onChange: function(pos){
				if(pos / 10 > MyMW.options.userIconOpacity)
					this.set(MyMW.options.userIconOpacity * 10);
				else
					MyMW.options.userIconMinOpacity = pos / 10;
				MyMW.checkSettings();
			}
		}).set(MyMW.options.userIconMinOpacity * 10);
 
		var SLIDEuserRefOpacity = new Slider($('SLIDEuserRefOpacity'), $('KNOBuserRefOpacity'), {
			range: [0, 10],
			steps: 10,
			wheel: true,
			onChange: function(pos){
				MyMW.options.userRefOpacity = pos / 10;
				MyMW.checkSettings();
			}
		}).set(MyMW.options.userRefOpacity * 10);
 
		$('add').addEvent('click', function(e){
			e.stop();
			MyMW.addIcon('new.png', 'new.png', 'Hey i\' the new icon !');
		});
	});
	</script>

Este codigo sirve para poder controlar las acciones qeu tiene con div para poder hacer que sea mas rapido o mas lento segun como te convenga.

Ahora vamos por los bonito de la vida, ponerle estilo al los div.

	<style type="text/css"><!--
	body {
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	background: #fff;
	overflow: hidden;
	background-color: #000000;
	}
 
	a:link, a:visited {
		color: #D33131;
	}
 
	a:hover {
		text-decoration: none;
	}
	/*
		Magic Wheel CSS
	*/
	.loading {
		background: url('../imagenes/spinner.gif') center center no-repeat;
	}
 
	#magicwheel {
		position: absolute;
	}
 
	.tip {
		position: absolute;
		visibility: hidden;
		top: 0;
		left: 0;
		background: url('arrow.png') bottom center no-repeat;
		z-index: 1000;
		padding-bottom: 6px;
	}
 
	.tip span {
		padding: 1px 10px;
		background: #FFFFFF;
		color: #000000;
		font-weight: bold;
	}
 
	#magicwheel .icon, #magicwheel .ref {
		position: absolute;
		border: none;
		visibility: hidden;
	}
 
	/*
		Settings CSS
	*/
	.box {
		position: absolute;
		color: #666;
		margin: 10px;
		padding: 0px 7px 5px 7px;
		background: #000000;
		width: 280px;
		z-index: 1000;
	}
 
	.slider {
		background: #D8D8D8;
		height: 10px;
		margin-bottom: 7px;
		cursor: pointer;
	}
 
	.knob {
		background: #666;
		width: 20px;
		height: 10px;
		cursor: pointer;
	}
	--></style>

ya teniendo nuestros stylos jaja ahora agregamos los div de control en nuestro body y tambien el codigo donde va estar cada imagen. puedes ahcer que en php te genere la lista de images para hacer una galeria más dinamica.

<body>
	<div class="box"><a href="http://www.sexytec.net"><img src="http://www.sexytec.net/imagenes/barra_fotos.png" border="0"></a></div>
<div class="box" style="right: 0px; visibility:hidden">
		<h2>Magic Wheel Settings :</h2>
		<span>Icons width : </span>
		<div id="SLIDEuserIconWidth" class="slider"><div id="KNOBuserIconWidth" class="knob"></div></div>
 
		<span>Background icons width :</span>
		<div id="SLIDEuserIconMinWidth" class="slider"><div id="KNOBuserIconMinWidth" class="knob"></div></div>
		<span>Wheel width :</span>
		<div id="SLIDEuserWidth" class="slider"><div id="KNOBuserWidth" class="knob"></div></div>
		<span>Wheel height :</span>
		<div id="SLIDEuserHeight" class="slider"><div id="KNOBuserHeight" class="knob"></div></div>
		<span>Wheel speed :</span>
 
		<div id="SLIDEuserSpeed" class="slider"><div id="KNOBuserSpeed" class="knob"></div></div>
		<span>Icons opacity :</span>
		<div id="SLIDEuserIconOpacity" class="slider"><div id="KNOBuserIconOpacity" class="knob"></div></div>
		<span>Background icons opacity :</span>
		<div id="SLIDEuserIconMinOpacity" class="slider"><div id="KNOBuserIconMinOpacity" class="knob"></div></div>
		<span>Reflection opacity :</span>
		<div id="SLIDEuserRefOpacity" class="slider"><div id="KNOBuserRefOpacity" class="knob"></div></div>
 
		<p></p>
</div>
	<div id="magicwheel" class="loading">
 
<!-- AQUI VA LAS IMAGENES QUE TU QUIERAS -->
		<a href="http://www.sexytec.net/main.php" title="you"><img class="icon" src="../fotos_web/900995460.jpg" /></a>
		<a href="http://www.sexytec.net/main.php" title="MI novia"><img class="icon" src="../fotos_web/88928786.jpg" /></a>
		<!-- . -->
                <!-- . -->
                <!-- . -->
 
	</div>
</body>

Y listo.. Ya esta tu Galeria funcionando correctamente, aaaa les voy a dejar el demo para que vean como funciona. Saludos.

VER del Demo

Cualquier duda Dejen sus comentarios.