Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Galería de imágenes Brown Box (JQuery)

Tras haber explicado la forma de insertar una galería de imágenes en el blog con Lytebox, continué con los experimentos e JQuery.

Esta vez traigo un script que he modificado del original, ideado por Sohtanaka de tal manera que las imágenes de la galería se muestran en una pequeña caja marrón con los bordes redondeados (por ello la llamé Brown Box).


Galeria de imagenes con jquery, galeria de imagenes en blogger



Su instalación no es muy complicada y el resultado es bastante elegante.

Diseño>Edición de HTML>expandimos artilugios




Busca la etiqueta </head> y añade esto encima:

<!-- Galeria balcon Brown box -->

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;ul.blcajagal li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);
} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});

$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 300);
});
$(&quot;ul.blcajagal li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;);
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});
});
</script>
<style>
ul.blcajagal { float: left; margin: 0; padding: 10px; width: 360px; list-style-type: none; list-style: none;}
ul.blcajagal li img { width: 100px; height: 100px; background: #482708; -ms-interpolation-mode: bicubic; border: 1px solid #391F05; padding: 6px; left: 0px; top: 0px; position: absolute;}
ul.blcajagal li img.hover { border: none; background:url(http://2.bp.blogspot.com/_gjBqKNTws4M/S5qrLCN1rNI/AAAAAAAACCI/dML1HRdXScc/s320/caja.png) no-repeat center center; text-decoration: none;}
ul.blcajagal li { margin: 0; position: relative; padding: 5px; float: left; width: 120px; height: 120px;}
</style>

<!-- Fin galeria balcon Brown box -->

Seguidamente guarda la plantilla:




Ahora pega este código en el lugar que desees colocar la galería de imágenes (es aconsejable que hagas uso de una página estática o independiente, ofrecida por blogger).

<center><ul style="margin-left: 42px;" class="blcajagal">
<li><a href="#"><img src="URL IMAGEN" alt="" /></a></li>
<li><a href="#"><img src="URL IMAGEN" alt="" /></a></li>
<li><a href="#"><img src="URL IMAGEN" alt="" /></a></li>
<li><a href="#"><img src="URL IMAGEN" alt="" /></a></li>
<li><a href="#"><img src="URL IMAGEN" alt="" /></a></li>
<li><a href="#"><img src="URL IMAGEN" alt="" /></a></li>
</ul></center>

Reemplaza URL IMAGEN por la dirección de tus imágenes en cada línea [+].

Hay un total de seis espacios disponibles para introducir las fotografías. En caso de necesitar más casillas, agrega esta línea en el código tantas veces como sea necesario:

<li><a href="#"><img src="URL IMAGEN" alt="" /></a></li>

Ten en cuenta que siempre debe permanecer antes del cierre </ul>.

Publica la entrada para finalizar y obtener así la hermosa galería Brown Box ^^.

Karla dice...

Este efecto en las imagenes esta muy bonito..

Tienes tu el script en esta direccion?:

http://code.jquery.com/jquery-latest.js

Tiene licencia para distrubuirse?

Oye,sabes de un script gratuito para hacer un slideshow con botones incluidos para ir adelante y atras... tienes alguno?

Gracias de nuevo..

Jaime Trujillo Escobedo dice...

Me alegro mucho de que te haya gustado, Karla.

El script es el de JQuery (ofrecido en la página web de dicho sitio).

También puede utilizarse para realizar otros trucos y si, es libre de distribución.

Con dicho script realicé la galería, pero es posible hacer infinidad de cosas.

El slideshow que dices parece sencillo de realizar. Comenzaré a construirlo y publicaré una entrada al respecto ;).

Angel Canales dice...

hola, ya lo agrege me gusto mucho, pero me acabo de dar cuenta.. que aun poniendole una Url a cada imagene, no puedo seguir el enlace.. no se si me explico.. me gusto mucho la galeria.. pero quisiera que al hacer clic en la imagen me llebara a un lugar en especifico.. es esto posible??

Jaime Trujillo Escobedo dice...

Por supuesto que puedes atribuir enlaces a las imágenes de la galería, Angel Canales.

Para ello, reemplaza en las líneas de código que insertan las imágenes, las almoadillas (#) por la dirección del sitio web.

Angel Canales dice...

Hola Jaime... trate de hacerlo como dijiste.. pero no funciono.. sin embargo, aqui encontre la solucion y me va de maravilla.. puedes corroboralo en mi blog. Mi blog

y este es el link de donde solucione el problema

http://www.allblogtools.com/tricks-and-hacks/how-to-add-images-gallery-widget-with-jquery-hover-zoom-to-your-blogger/

Jaime Trujillo Escobedo dice...

Acabo de verlo, Angel Canales. Te ha quedado magnífico y quizás, mas atractivo con respecto al diseño de tu blog (el color gris favorece más que las cajitas marrones de esta galería).

Angel Canales dice...

Gracias.. aqui seguire checando que nuevas cosillas tienes :P saludos!!!

Jaime Trujillo Escobedo dice...

Estupéndo Angel. ¡Saludines!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo