ZoneArtCSS | Desarrollo Web, Diseño de páginas Web, Aplicaciones Móviles, Notas de Tecnología » galeria de imagenes 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 Imagen interactiva con jQuery http://www.zoneartcss.com/webdesign/html/imagen-interactiva-con-jquery/ http://www.zoneartcss.com/webdesign/html/imagen-interactiva-con-jquery/#comments Wed, 15 Jun 2011 18:21:53 +0000 kino http://www.zoneartcss.com/?p=2806

Un interesante efecto que nos puede servir para… para… bueno ya se les ocurrirá como usarlo jeje…

Bueno el efecto hace lo siguiente, sobre una imagen base coloca marcadores (en este caso botones con el signo +)

imagen interactiva con jQuery

imagen interactiva con jQuery

Y posteriormente, dos cosas:

Al pasar el mouse por el botón despliega un campo de texto

Al dar clic, nos muestra una segunda imagen:

Checa como hacerlo y el demo aquí

Tomado de: http://net.tutsplus.com/
]]> http://www.zoneartcss.com/webdesign/html/imagen-interactiva-con-jquery/feed/ 0 Galeria de Imagenes con jQuery Plugin http://www.zoneartcss.com/webdevelopment/jquery/galeria-de-imagenes-con-jquery-plugin/ http://www.zoneartcss.com/webdevelopment/jquery/galeria-de-imagenes-con-jquery-plugin/#comments Fri, 18 Dec 2009 08:11:56 +0000 miguelortega http://www.zoneartcss.com/?p=1156

Para los que les gusta poner su web bien fresona.. aqui les dejo una galeria echa en jQuery, con unos efectos muy buenos para que puedan implementar en su web.

En esta galería le puedes poner títulos a cada imagen, también puedes navegar fácilmente de un lado a otro con los botones de navegación.

Ver Ejemplo

Descargar

]]> http://www.zoneartcss.com/webdevelopment/jquery/galeria-de-imagenes-con-jquery-plugin/feed/ 1 Corbis – imagenes de calidad para tu sitio web http://www.zoneartcss.com/tips/corbis-imagenes-de-calidad-para-un-desarrollador-web/ http://www.zoneartcss.com/tips/corbis-imagenes-de-calidad-para-un-desarrollador-web/#comments Sun, 27 Sep 2009 19:14:19 +0000 miguelortega http://www.zoneartcss.com/?p=852

Descargar fotos gratis

Galeria de imagenes gratis


Todo diseñador web siempre necesitan imagenes de buena calidad o de alta definición para poder hacer sus diseños, banners, etc.

Normal mente acostumbra entrar a google, ir a la seccion de imagenes y buscar la que necesitan o ir algunas páginas que ya tienen como favoritas.

En este post les presento una pagina que a lo mejor la conocen pero esta es de mis favoritas, por el gran contenido de imagenes, gratuitas y de pago.

Espero que comenten y que pongan otras páginas al igual del nivel de esta.

Me dejo de tanta espectativa y se las presento

Corbis.com | Galeria de imagenes

Es una exelente galeria de imagenes, donde puedes filtrar, por autor, alta definicion, con derechos reservados, sin derechos, gratis, etc.

Se las recomiendo y espero sus comentarios.

]]> http://www.zoneartcss.com/tips/corbis-imagenes-de-calidad-para-un-desarrollador-web/feed/ 2 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