Smooth Gallery

Pd: Hum... sólo lleva el link que dejé de Massive News a publicidades varias. Así que aquí dejo el vínculo a la demo del tema: Massive News-demo

--------------------------------

La tenía implantada en uno de mis blogs... con no mucho éxito... pues las concomitancias con otros scripts en ese mismo blog la hacen deslizarse con una brusquedad muy impropia de semejante término.
Así que, decidí intentarlo de nuevo, en un blog "limpio". Y le encontré una aplicación muy interesante: como cabecera de "novedades" del blog.
Esta es la apuesta de Massive News, una plantilla gratuíta de Wordpress (la dirección la comento ahora).

Y creo que ha quedado muy bien la prueba que podéis ver en mi BLOG DE PRUEBAS. Las imágenes se deslizan con mucha suavidad, aunque también podéis pasarlas picando en los iconos de flecha derecha e izquierda que veréis en los laterales del cuadro de la galería. Creo que es la segunda de esas imágenes la que lleva a la demo de Massive News... bueno: ya lo apuntan el title y la barra inferior de vuestro navegador.
En el ejemplo de Massive News, que he adoptado, las imágenes son links a otros sitios. Si os inteersa más tener una lightbox, más abajo lo comento.

Explicación:

.- SCRIPTS:

<script src='http://.../mootools.v1.11.js' type='text/javascript'/>

<script src='http://junioscripts.googlepages.com/scripts_jd.gallery.js' type='text/javascript'/>

<script src='http://junioscripts.googlepages.com/scripts_jd.gallery.transitions.js' type='text/javascript'/>

.- CSS:
Con un link, al que he añadido las imágenes que precisa la galería (botones de flechas, loading...)

<link href='http://junioscripts.googlepages.com/CSS_slideshow.css' media='screen' rel='stylesheet' type='text/css'/>

.- HTML: Lo he colocado bajo la cabecera del blog. Esta es su estructura:

<div class='fix' id='mid'>

<div class='fix' id='main'><a name='main'/>

<div id='featured'>

<h3 class='mainblock'>Dictum</h3>

<script type='text/javascript'>

function startGallery() {

var myGallery = new gallery($(&#39;myGallery&#39;), {

timed: true,

defaultTransition: &quot;fadeslideleft&quot;

});

}

window.onDomReady(startGallery);

</script>

<div id='myGallery'>

<div class='imageElement'>

<h3>Blog de pruebas</h3>

<p>Bienvenidos a &quot;Gerundio&quot;:un blog de pruebas para la Smooth Galerry, que explicaré en Epílogo. De momento, decir que las imágenes se deslizan por sí solas o bien picando en el gif de flechas que se ven a la derecha e izquierda de cada una de aquéllas.</p>



<a class='open' href='http://cafe-junio.blogspot.com/' title='Leer más'/>

<img class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA3jMjnyEWZw8NpG0pC__gxeIjnpvZ8SVjBc4uJobsy_PVcJoTJy-hnMSxr0vsFtQrTaQ_hkHL8KGhac0b2sjXskD9HWQdYhP8OlF-lzdOFv-wMBLeeeh-7OTr97gck7xNMSlRbqptGCI/s400/gcheeta1.jpg'/>

<img class='thumbnail' src='test.jpg'/>

</div>

<div class='imageElement'>

<h3>Ejemplo</h3>

<p>Esta prueba está basada en el tema gratuíto de Wordpress &quot;Massive News&quot;: me gustó la posibilidad de incorporar texto y vínculos al carrusel. Esta imagen conduce a la página del tema antedicho.</p>

<a class='open' href='http://www.massivenewstheme.com/example-article.html' title='Leer más'/>



<img class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis1xHRDB57GxReGbCtHU0LzcSwrSwWIkZV9BHcleNfvu3G-r0JdrHNrQG-EZCedCd_WKfBIixYWQXyFzUgi76eX9h9IZOjbugNnQnIDS4MhVB67jE8rkpWgnLw02_-Zm2kC0jVnYM2dWo/s400/gjaguar1.jpg'/>

<img class='thumbnail' src='test.jpg'/>

</div>

<div class='imageElement'>

<h3>Pruebas anteriores</h3>

<p>En su día, hice una prueba de esta &quot;Smooth Gallery&quot; para la cabecera de mi blog de pruebas &quot;Menú Divertido&quot;, pryeba que resulta un tanto extraña, puesto que las transiciiones se producen de forma muy brusca, quizás debido a la interacción con el resto de los scripts de esa plantilla.</p>

<a class='open' href='http://menudivertido.blogspot.com/' title='Leer más'/>

<img class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFb4WKxvRhdvCNLmyeAGUvzjEX2tT-h2XEoDBxLdNjZ-mHB1bhMD_JPP_zBXEJkobSFHDu1Aazn_bsxxWy06aWEop7NOI7VD_nops7F9z6W5rFVu8QMEFemn4EmQ3T-c14stw-VV9_ouY/s400/leop3.jpg'/>



<img class='thumbnail' src='test.jpg'/>

</div>

<div class='imageElement'>

<h3>Otros</h3>

<p>Más pruebas y demostraciones de hacks. Por ejemplo, en MooPruebas.</p>

<a class='open' href='http://moopruebas.blogspot.com/' title='Leer más'/>

<img class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzbkAo451yeDTrm_xyIo0y_tnTd85bwnCgf0XfD1Uax3dfVtuTHn1UH4Wa71Jvnrz_sDgoAp_SkisclyqGAztV_LIQnglntEp45HVUeWOff8I_Q1D2xmp6K9kJ2G6eekcKaPAZv8ZSjjY/s400/snow7.jpg'/>

<img class='thumbnail' src='test.jpg'/>



</div>

<div class='imageElement'>

<h3>Ad calendas graecas</h3>

<p>... Que será cuando pueda- o me decida- a modificar mi photoblog &quot;nada&quot; para introducir todas estas utilidades que voy resolviendo.</p>

<a class='open' href='http://nada-junio.blogspot.com/' title='Leer más'/>

<img class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDW2Tg433lhFBxBnX9jeRz4GXqlIWH3I2nOhHecqUYcyC_BcG7qXYOAcjvB6foItdNjLfvP5wO2SL21c7PAlC4hU-bZotuEAKUx7nT6qwb4S3rdW_oK7i4xBadCfVZEuBowIZAnnabqYI/s800/1130095651Paisajes1.jpg'/>

<img class='thumbnail' src='test.jpg'/>

</div>



</div>

</div> </div> </div>

La clase <img class='thumbnail' src='test.jpg'/> supone que podéis incluir una lightbox en la galería, y es aquí dónde añadiríais el "rel" y el thumb de la imagen en cuestión.

Como siempre, dos cosas: Cuidado con los scripts, porque más vale hacerse responsable de los propios; y abrid éstos que os doy de prueba para diseñar a vuestro antojo las medidas, imágenes y demás de la galería.