Galería de fotos

Si deseas realizar una presentación de fotos en tu blog un tanto distinta a las que se ven siempre, y por otro lado, bien sencilla, aquí te traigo una que me gustó mucho cuando la encontré en Ciudad Blogger.

Puedes verla funcionando en esta entrada de  mi blog de pruebas

Spacegallery es una galería realizada en jQuery, muy fácil de implementar.

Tienes que seguir unos pasos bien sencillos, pero con cuidado de no equivocarte, porque son varios.

Primero debes descargar este archivo, descomprimirlo (puedes usar winRar o abrirlo y arrastrar los archivos al escritorio)
Luego debes subir los tres archivos a un hosting. Yo uso uno que creo es el mejor de todos, DROPBOX.

Una vez que ya tienes todos los archivos subidos al servidos, vamos a modificar la plantilla para agregar a tu blog el slider.

• Ingresa a Diseño - HTML
• Busca </head> y arriba pega el siguiente código:

<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>

• Ahora reemplaza lo que está en rojo por las tres URL de los archivos. Ten cuidado de colocar cada una donde corresponda, en el orden en que se encuentran. De lo contrario no funcionará
• Busca  ]]></b:skin> y pega arriba este otro código:

#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/AVvXsEggkHV0CoqEYVWS3Bi-N-UKat5Gl6R_9DX9oi8Y1gr8uLU6GtYe13nGwolpmoK1Vyu3UiUmDZ9wydiOQNwsJ9pWF0fhzCY8AvA0iuRkd2LAJl835xGvUPbM87nHDbpAL7aK5_rhDTHfp9k/) 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%;
}

ATENCIÓN: puedes modificar el alto del contenedor  y el color del borde (en azul), pero no cambies el ancho, que se ajustará automáticamente al ancho de tu blog. Las imágenes se ajustarán al tamaño den contenedor.

• Haz una vista previa y si el blog se muestra correctamente, guarda los cambios.
• Ahora solamente deberás ubicar el siguiente código en el lugar que quieras cada vez que quierasa mostrar una serie de imágenes. Lo puedes poner como un gadget en la sidebar o en una entrada:

<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>

Puedes poner cuantas imágenes quieras, solamente agregando una línea más de las que está marcada en rojo. Ten en cuenta que la línea que pongas última será la primera que se vea en la presentación.

Para pasar las fotos debes hacer clic sobre ellas.

Spacegallery

WinRar

Si te ha sido útil comenta !!!

Tus comentarios son dofollow