Ver Mensaje Individual
  #1 (permalink)  
Antiguo 26/06/2010, 18:03
Avatar de freesoftwarrior
freesoftwarrior
 
Fecha de Ingreso: marzo-2006
Mensajes: 362
Antigüedad: 18 años, 8 meses
Puntos: 10
No se como hacer esto con ibox y jquery

Buenas tardes.....

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>

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>

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>


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ú