Spacegallery: Una galería de imágenes muy diferente

Hay muchos tipos de galerías para imágenes que nos encontramos en la red, pero pocas veces vemos una que muestre las imágenes de una forma tan diferente como esta.

Los que usan Mac OS X seguramente encontrarán mucha similitud con TimeMachine y los que no de cualquier forma estoy seguro que disfrutarán este tipo de efectos para ver las imágenes.

Se trata de Spacegallery, una galería de imágenes hecha con jQuery en la cual las imágenes aparecen una detrás de la otra al hacer click. Puedes verlo en el ejemplo de abajo.

Para usar esta galería primero descarga este archivo, descomprímelo y sube los tres scripts a un hosting. Luego pega antes de </head> lo siguiente:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='URL del archivo eye.js' type='text/javascript'/>
<script src='URL del archivo utils.js' type='text/javascript'/>
<script src='URL del archivo spacegallery.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
(function($){
var initLayout = function() {
var hash = window.location.hash.replace('#', '');
var currentTab = $('ul.navigationTabs a')
.bind('click', showTab)
.filter('a[rel=' + hash + ']');
if (currentTab.size() == 0) {
currentTab = $('ul.navigationTabs a:first');
}
showTab.apply(currentTab.get(0));
$('#myGallery').spacegallery({loadingClass: 'loading'});
};

var showTab = function(e) {
var tabIndex = $('ul.navigationTabs a')
.removeClass('active')
.index(this);
$(this)
.addClass('active')
.blur();
$('div.tab')
.hide()
.eq(tabIndex)
.show();
};

EYE.register(initLayout, 'init');
})(jQuery)
//]]>
</script>

Agrega donde se indica la URL de los archivos que subiste previamente, pero es muy importante que los agregues en el orden que se indica, de lo contrario podría no funcionar.

Ahora antes de ]]></b:skin> pega esto:

#myGallery {
width: 100%;
height: 400px; /* Alto de todo el contenedor */
}
#myGallery img {
border: 2px solid #52697E; /* Borde de las imágenes */
}
a.loading {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic_TzEJVN7LSZyK46Yj5nVQgx8At0zHK3avZc9_PGaRoYkzpRuSU5raGjP0l5VcuEGDjsjlpr-uc6JLfeylfLsDK1tiLLZZxZxVPZBIA71acuVuV3MIJOlTQb8XRD2OXXf7ud1SejdEqE/) no-repeat center;
}
.spacegallery {
position: relative;
overflow: hidden;
}
.spacegallery img {
position: absolute;
left: 50%;
}
.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Por último entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y agrega esto a continuación:

<div class="spacegallery" id="myGallery">
<img src="URL de la imagen"/>

<img src="URL de la imagen"/>

<img src="URL de la imagen"/>

<img src="URL de la imagen"/>

<img src="URL de la imagen"/>

</div>

Ahí pon las URLs de las imágenes de tu galería, tomando en cuenta que la última imagen será la primera que se mostrará.

Y así se sencillo puedes disfrutar de esta galería de imágenes en tu blog, y aunque no tiene opciones de visualización o de configuración es sin duda una galería que llamará la atención de tus lectores. Imprimir artículo