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

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/AVvXsEgozF7MFHbhsdRU0E3tTLM1U9cmcexxa44xgg34Ekfm9Yf0aUOcfldqjw35Gx5EL0DUnx9jjxbrLYUWOkH0xDfYCUoaml1cvby8df5L7FGRMHMR5K_E-3pu4JcEPk6dKhQgijwkaE-kBvI/) 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.