ZoneArtCSS | Desarrollo Web, Diseño de páginas Web, Aplicaciones Móviles, Notas de Tecnología » galeria mootools http://www.zoneartcss.com Tips de Diseño y Desarrollo Web Wed, 26 Oct 2011 18:31:39 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Galeria de Images 3D en Mootools para tu Web :) http://www.zoneartcss.com/webdevelopment/programacion-con-style/galeria-de-images-3d-en-mootools-para-tu-web/ http://www.zoneartcss.com/webdevelopment/programacion-con-style/galeria-de-images-3d-en-mootools-para-tu-web/#comments Mon, 06 Jul 2009 19:52:40 +0000 miguelortega http://www.zoneartcss.com/?p=167

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

	<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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

	<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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<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.

]]> http://www.zoneartcss.com/webdevelopment/programacion-con-style/galeria-de-images-3d-en-mootools-para-tu-web/feed/ 0