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/AVvXsEjVkPUu-a8Cj51VlAL11YMdqGj_9-BY-UVB4TWcEmGd28Cogpto8AUO7PrhGzkYl3437Zjcqo3nPJZcjMJbab_E0p7d1NlSzVCXl8Dq3eG4AjTk6NALePmwS2dovhsv0mF6AE4SM7NGfXo/) 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.