buscando encontré un código muy simple para una pequeña galería con jquery.... el código es este
Cita:
<head>
<script type="text/javascript">
$(function()
{
$(".image").click(function()
{
var image = $(this).attr("rel");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
return false;
});
});
</script>
</head>
<script type="text/javascript">
$(function()
{
$(".image").click(function()
{
var image = $(this).attr("rel");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
return false;
});
});
</script>
</head>
y sólo requiere un link a la última versión de jquery.... funciona a la perfección..... la parte para mostrar la galería es esta
Cita:
<div id="galeria">
<div id="image">
<img src="imagenes/galeria/imagen1.jpg" border="0"/>
</div>
<img src="imagenes/galeria/imagen1.jpg" class="thumb" border="0"/>
<img src="imagenes/galeria/imagen2.jpg" class="thumb" border="0"/>
<img src="imagenes/galeria/imagen3.jpg" class="thumb" border="0"/>
</div>
<div id="image">
<img src="imagenes/galeria/imagen1.jpg" border="0"/>
</div>
<img src="imagenes/galeria/imagen1.jpg" class="thumb" border="0"/>
<img src="imagenes/galeria/imagen2.jpg" class="thumb" border="0"/>
<img src="imagenes/galeria/imagen3.jpg" class="thumb" border="0"/>
</div>
No hay CSS importante involucrado... ahora bien, con el ibox simplemente debo agregar rel="ibox" al link de una imagen para que esta aparezca en tamaño original en el efecto que la mayoría conoce..... lo incluí y funciona de esta forma
Cita:
<head>
<script type="text/javascript" src="setup/js/ibox.js"></script>
<script>
iBox.close_label = 'Cerrar Ventana';
</script>
</head>
.......
<div id="galeria">
<div id="image">
<a href="imagenes/galeria/imagenGR1.jpg" rel="ibox&fullscreen=true">
<img src="imagenes/galeria/imagen1.jpg" border="0"/>
</a>
</div>
<img src="imagenes/galeria/imagen1.jpg" class="thumb" border="0"/>
<img src="imagenes/galeria/imagen2.jpg" class="thumb" border="0"/>
<img src="imagenes/galeria/imagen3.jpg" class="thumb" border="0"/>
</div>
<script type="text/javascript" src="setup/js/ibox.js"></script>
<script>
iBox.close_label = 'Cerrar Ventana';
</script>
</head>
.......
<div id="galeria">
<div id="image">
<a href="imagenes/galeria/imagenGR1.jpg" rel="ibox&fullscreen=true">
<img src="imagenes/galeria/imagen1.jpg" border="0"/>
</a>
</div>
<img src="imagenes/galeria/imagen1.jpg" class="thumb" border="0"/>
<img src="imagenes/galeria/imagen2.jpg" class="thumb" border="0"/>
<img src="imagenes/galeria/imagen3.jpg" class="thumb" border="0"/>
</div>
y aquí empieza mi problema..... funciona bien con la primera imagen pero al hacer el cambio de imagenes ya deja de funcionar obviamente...... traté de modificar el código
Cita:
$('#image').html('<img src="' + image + '"/>');
para incluir ahí
Cita:
<a href='imagenes/galeria/imagenGR.jpg' rel='ibox&fullscreen=true'>
pero no funciona..... es claro que este código no es tan simple como otros scripts que he encontrado....
Lo que busco es poder agregar la llamada a ibox para que todas las imagenes al ser mostradas tengan la opción de poder verlas en mayor tamaño aún......
el código lo obtuve en esta página (ahí pueden ver el demo)
http://papermashup.com/demos/jquery-gallery/
La llamada a ibox que deseo incluir sería en la imagen grande, no en las miniaturas
Si alguien puede darme una ayuda le agradecería mucho
Saludos desde el Perú
