Como desarrollador Web me he topado con distintos retos, algunos de ellos díficiles y hasta casi imposibles de realizar, sin embargo si hay algo que le deba a la Internet es el hecho que albergue a muchos otros desarrolladores que en esos tiempos díficiles, sin quererlo con su conocimiento nos han ayudado de mucho.
Hoy, les traigo un constructor de galería de imágenes, programado sobre JQuery, y que les aseguro a más de uno les va a servir de mucha ayuda.
Bien, antes que nada hay que crear la estructura HTML necesaria para que este ejemplo funcione, en la página index.php:
Código:
<div class="container_galeria">
<p class="nav"><a href="#">« anterior</a> | <a href="#">siguiente »</a></p>
<ul class="galeria">
</ul>
</div>
<div id="cuadro_imagen"></div>
Después, creamos los estilos necesarios para el ejemplo (bien pueden ser entre <style> y </style> o dentro de un archivo .css, eso depende de ti) :
Código:
* {
margin:0;
padding:0
}
body {
background:#FFFFFF;
font: bold 13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
margin:0px;
padding:0px;
}
h1 {
font-size:16px;
}
h4 {
font-size:12px;
}
a{
color:#348;
text-decoration:none;
outline:none;
}
a:hover{
color:#67a;
}
.caption {
font-style:italic;
color:#887;
}
.container_galeria {
text-align:center;
width:25%;
float:left;
height:auto;
}
.estilo_galeria{
width:100%;
height:auto;
}
.estilo_galeria li{
width:68px !important;
height:50px !important;
border:3px double #111;
margin: 0 2px;
}
.estilo_galeria li div .caption{
font:italic 0.7em/1.4 georgia,serif;
}
#cuadro_imagen{
float:left;
width:65%;
text-align:center;
}
#cuadro_imagen img{
margin:0px auto 10px auto;
}
.nav{
padding-top:15px;
clear:both;
font:80% 'helvetica neue',sans-serif;
letter-spacing:3px;
text-transform:uppercase;
}
Ahora bien, se que llegados a este punto muchos se preguntarán: ¿Por qué esa esctructura? ¿Para que una etiqueta <ul> sin elementos de lista? ¿Por qué los enlaces anterior y siguiente?. Eso lo resolveré a medida de que se vaya desarrollando este artículo.
La etiqueta <ul> va a terminar con elementos, pero no con elementos estáticos, es decir no voy a digitar los enlaces, las imágenes y las descripciones manualmente, sino que haré una lectura de los archivos de un directorio específico del servidor en donde se encuentren las imágenes que se desean mostrar. De tal manera que no tendremos problemas de editar la página a la hora de subir más imágenes al servidor, sino que estas se agregarán automáticamente.
Entre <ul> y </ul> programamos lo siguiente:
Código:
// cadena que indica el directorio de las imágenes
$dir = "imagenes/";
// abrimos el directorio
$dr = opendir($dir);
// si hay algún error, interrumpimos
if (!$dr){
echo "Error";
exit();
}
//sino, seguimos la secuencia
else {
// leemos todo archivo del directorio hasta que no quede ninguno
while (($archivo = readdir($dr)) !== false) {
// menos los que sean sub-directorios
if(filetype($dir . $archivo)!="dir"){
//si no tienen estas extensiones, mostramos
if(($archivo != "Thumbs.db") && ($archivo != ".htaccess")){
// en el primer archivo
if ($i == 0)
// le asignamos la clase CSS "active", clase de la hoja de estilos
$active = " class=\"active\"";
else
// al resto, nada
$active = "";
// obtenemos el tamaño de cada imagen
$tam = round(filesize($dir . $archivo)/1024, 0);
//llenamos la lista, mostramos las imágenes, y su peso
echo "<li".$active."><img src=\"".$dir.$archivo."\" alt=\"Archivo: ".$archivo."\" title=\"Archivo: ".$archivo." Tamaño: ".$tam." Kb\"></li>";
++$i;
}
}
}
// cerramos el directorio leído
closedir($dr);
}
Ahora, incluíremos los archivos .js que contienen las funciones necesarias para crear la galería, entre <head> y </head>
Código:
<script language="javascript" type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.galleria.pack.js"></script>
El primero corresponde al plugin de JQuery, y el segundo es el plugin Galleria para crear la galería de manera rápida y sencilla.
Ahora adjuntamos la hoja de estilos del plugin Galleria:
Código:
<link rel="stylesheet" type="text/css" href="estilos/galleria.css">
Una vez realizados estos pasos, procederemos a programar la galería de imágenes:
Código:
$(function(){
// añadimos una nueva clase CSS para aplicar los degradados
$('.galeria').addClass('estilo_galeria');
$('ul.estilo_galeria').galleria({
//activamos el historial del objeto, es decir, haremos uso del historial del navegador
history : true,
//esta línea hará que cada imagen pueda ser clickeable, con el objetivo de mostrar la que le sigue
clickNext : true,
// el id del contenedor que mostrará la imagen a escala real
insert : '#cuadro_imagen',
// añadimos algunos efectos a la galería
onImage : function(image,caption,thumb) {
// aclaramos la imagen principal y sus etiquetas
// Firefox y otros navegadores diferentes a IE tienden a ser demasiado lentos para el efecto de imagen
if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) {
// mostramos efecto sólo para IE
image.css('display','none').fadeIn(1000);
}
caption.css('display','none').fadeIn(1000); // le damos efecto a cada etiqueta de imagen
// recorremos el contenedor de thumbnails
var _li = thumb.parents('li');
// oscurecemos los thumbnails inactivos
_li.siblings().children('img.selected').fadeTo(500,0.3);
// aclaramos el thumbnail activo
thumb.fadeTo('fast',1).addClass('selected');
// agregamos un título a la imagen clickeable
image.attr('title','Siguiente imagen >>');
},
onThumb : function(thumb) { // los efectos de los thumbnails están aquí
// recorremos el contenedor de thumbnails
var _li = thumb.parents('li');
// si el thumbnail está activo, aclaramos de todas formas.
var _fadeTo = _li.is('.active') ? '1' : '0.3';
// aclaramos los thumbnails cuando termina la carga de imágenes
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
// efectos "hover": cuando pasa el mouse por los thumbnails
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // el thumbnail activo no se oscurecerá aunque retiremos el mouse
)
}
});
});
Ahora programada la galería, procedemos a modificar los enlaces de "anterior":
Código:
<a href="#" onclick="$.galleria.prev(); return false;">« anterior</a>
y siguiente:
Código:
<a href="#" onclick="$.galleria.next(); return false;">siguiente »</a>
Al primer enlace simplemente hacemos una invocación desde el plugin de la galería al método
prev(),
para ir hacia atrás en las imágenes, y al segundo al método
next(), para ir hacia adelante.
Pues muy bien, ahora hacemos una prueba:
Nota: Por supuesto no faltará el maricón que diga que soy muy pajero, pero me llega al pincho: Aki Hoshino tiene dos poderosas “razones” para estar presente en el ejemplo.
Eso ha sido todo el ejemplo, gracias a JQuery, el plugin Galleria y PHP, podemos hacer una galería de imágenes en cuestión de segundos,
pero eso sí: la maquetación CSS corre por tu cuenta, flojo de mierda.
Para descargar Galleria, sigue el siguiente enlace:
http://galleria.aino.se/
Muchas gracias y buena suerte con esta galería de imágenes, Loveless Isma les desea un lindo día.
¿Dudas? ¿Algún comentario? ¿Mentadas de madre? Escríbeme a: lovelessisma@gmail.com
Descargar
Me gusta:
Sé el primero en decir que te gusta esta post.
esta buena la galerÃa, pero no tenÃas que poner esas fotos como que muy provocativas, hay muchos imagenes de la naturaleza y entre otros era mejor, pero esta bien lo que vale es el fin o sea la galerÃa de fotos que puedes hadcer con Jquery
Jajaja, es que no iba a ser tan tÃpico este post, como que es aburrido buscar en Google un código que te ayude y encontrarte con que el ejemplo tiene pasajes de la Biblia :S
la verdad q la galerÃa es excelente! a pesar de q soy nuevo en esto hace poco q comencé con php y jquery, el código del proceso me da error en las lineas en donde hace un if :
if ($i == 0) ; ++$i;
no identifica i, y yo la verdad q no comprendà tampoco cual es la razón o la función q cumple esa variable. Tiene una respuesta esto!? este es el error :
Aviso:
variable indefinida en D:\galeria facil jquery\index.php on line 75
Dale enter antes del ++
Sin embargo, revisa que versión de PHP tienes.
Un saludo.
lovelessima, no tiene nada que ver que no este definida antes la variable $i ? yo la inicalice antes en 0 (eso pense que es el error) y no me salio nada de error en pantalla, asi que supongo es eso,
saludos
Por supuesto, es por la definición de variables. Pero acuérdate que el artÃculo fue subido en 2010, en esa época no era necesario definir nada, ahora y recién en algunos proyectos me he dado cuenta que tengo que hacerlo.
me parece un producto fabuloso en relación a la simpleza,eficiencia y dinamismo que presenta.
Trate de agrandar los thumbnail y no le encontre la vuelta,¿alguna ayuda al respecto?
desde ya gracias y felicitaciones