Mooflow con Reflection y...

...más:

1. Zoom (se activa al picar en el icono de lupa bajo la imagen)





2. Imagen vinculada (la imagen contiene un enlace a otra otra página, que se abre picando en el símbolo de flecha bajo aquélla).





3. Barra de funciones con marcador, play, parada, anterior, siguiente y pantalla completa.





4. El script añade la función "reflect" a cada imagen de la galería.

Resultado: mi demo en ESTE BLOG. En esta demo encontráréis un enlace a la página del autor del hack, con más demos de su Mooflow y, bajo la demo, un enlace a la página del hack donde se prevee la forma de arreglar la plantilla en fondo negro, imágenes incluídas.

Y se hace de la siguiente manera:

(¡¡OJO!!: eN SU DÍA, VÍ QUE EL HACK NO FUNCIONABA, DE MANERA QUE ACUDÍ A LA PÁGINA DEL AUTOR, DONDE COMPROBÉ QUE HABÍA CAMBIADO LAS PRESENTACIONES, ADEMÁS DE LOS CÓDIGOS.: Al sustituir el autor el MootoolsBeta (bastante obstructivo, por cierto) por el MootoolsCore, necesitó añadir un par de escripts, y modificar el último). POR ESO DEJAMOS SIN EFECTO (tachado) LO QUE HABÍA CONSIGNADO EN LA ENTRADA Y DEJO AQUÍ LA NUEVA CODIFICACIÓN. Y disculpas por no haber hecho antes el cambio: si no llega a ser por Spookaa, sigo con el despiste...).

De manera que así debe quedar el hack: (Por cierto: dejo el link de las nuevas demos de Mooflow)

.- CSS:

<br />.mf a.show {<br /> position:absolute;<br /> margin-left:-16px;<br /> width:32px;<br /> height:32px;<br /> top:70%;<br /> left:50%;<br /> z-index:100;<br /> cursor:pointer;<br />}<br />.mf a.show.image{<br /> background:url(http://.../open_image1.png) no-repeat 50%;<br />}<br />.mf a.show.viewerload{<br /> background:url(http://.../load.png) no-repeat 50%;<br />}<br />.mf a.show.link{<br /> background:url(http://.../open_link1.png) no-repeat 50%;<br />}<br />.mf a.show.link{<br /> background:url(http://.../open_link1.png) no-repeat 50%;<br />}<br />.mf div.tooltip{<br /> background:url(http://.../tooltip.png) no-repeat 50%;<br /> width:262px;<br /> margin-left:-151px;<br /> height:70px;<br /> padding:20px;<br /> position:absolute;<br /> z-index:101;<br /> top:0;<br /> left:50%;<br /> text-align:center;<br />}<br />.mf{visibility: hidden; z-index:1; color:#fff; font-size:14px}<br />.mf * {<br /> outline:none;<br /> border:none;<br /> padding:0;<br /> margin:0;<br /> -moz-user-select: none;<br /> -webkit-user-select: none;<br /> user-select:none;<br /> -o-user-select:none<br />}<br />.mf{visibility: hidden; z-index:1; color:#fff; font-size:14px}<br />.mf * {<br /> outline:none;<br /> border:none;<br /> padding:0;<br /> margin:0;<br /> -moz-user-select: none;<br /> -webkit-user-select: none;<br /> user-select:none;<br /> -o-user-select:none<br />}<br />.mf div.loader{<br /> position:absolute;<br /> text-align:center;<br /> z-index:10000;<br /> margin:0 auto;<br /> top:45%;<br /> width:100%;<br /> background:url(http://.../ajax_loader1.gif) no-repeat 50% 0;<br /> padding:50px 0;<br />}<br />.mf div.caption {<br /> position:absolute;<br /> text-align:center;<br /> z-index:98;<br /> margin:1em auto;<br /> bottom:50px;<br /> width:100%;<br />}<br />.mf div.mfNav{<br /> position:absolute;<br /> z-index:99;<br /> margin:0 auto;<br /> text-align:center;<br /> width:100%;<br /> bottom:20px;<br /> font-size:1px;<br /> line-height:1px;<br /> width:100%;<br />}<br />.mf div.autoPlayCon{<br /> float:left;<br /> width:10%;<br /> padding-left:3%;<br /> height:24px;<br />}<br />.mf a.play, .mf a.stop{<br /> width:27px;<br /> height:24px;<br /> float:left;<br /> cursor:pointer;<br />}<br />.mf a.play{<br /> background:url(http://.../play1.gif) no-repeat;<br />}<br />.mf a.stop{<br /> background:url(http://.../stop1.gif) no-repeat;<br />}<br />.mf div.sliderCon{<br /> margin-top:5px;<br /> float:left;<br /> width:74%;<br />}<br />.mf a.sliderNext{<br /> background:url(http://.../left1.gif) no-repeat;<br />}<br />.mf a.sliderPrev{<br /> background:url(http://.../right1.gif) no-repeat;<br />}<br />.mf a.sliderNext, a.sliderPrev{<br /> text-decoration:none;<br /> width:25px;<br /> height:16px;<br /> cursor:pointer;<br /> float:left;<br />}<br />.mf div.resizeCon{<br /> float:right;<br /> width:10%;<br /> padding-right:3%;<br /> height:24px;<br />}<br />.mf a.resize{<br /> width:34px;<br /> height:24px;<br /> float:right;<br /> cursor:pointer;<br /> background:url(http://.../resize1.gif) no-repeat;<br />}<br />.mf div.slider{<br /> background:url(http://.../middle1.gif) repeat-x;<br /> height:16px;<br /> position:relative;<br /> text-align:left;<br /> float:left;<br />}<br />.mf div.knob{<br /> height:16px;<br /> background:url(http://.../middle-slider1.gif) repeat-x right center;<br />}<br />.mf div.knobleft{<br /> background:url(http://.../left-slider1.gif) repeat-x center;<br /> width:8px;<br /> height:16px;<br />}<br /><br />

.- SCRIPTS:

<br /><script src='http://.../mootools-1.2-core.js' type='text/javascript'/><br /><br /><script src='http://.../mootools-1.2-more.js' type='text/javascript'/><br /><br /><script src='http://.../Mooflow.js' type='text/javascript'/><br /><br /><script src='http://.../MooFlowViewer.js' type='text/javascript'/><br /><br /><script type='text/javascript'><br /><br />/* <![CDATA[ */<br /><br /><br /><br /> var myMooFlowPage = {<br /><br /> <br /><br /> start: function(){<br /><br /> /* MooFlow instance with the complete UI and Viewer */<br /><br /> var mf = new MooFlow($('MooFlow'), {<br /><br /> useSlider: true,<br /><br /> useAutoPlay: true,<br /><br /> useCaption: true,<br /><br /> useResize: true,<br /><br /> useMouseWheel: true,<br /><br /> useKeyInput: true,<br /><br /> useViewer: true<br /><br /> });<br /><br /> <br /><br /> mf.attachViewer();<br /><br /> <br /><br /> $$('.loadremote').addEvent('click', function(){<br /><br /> mf.loadHTML(this.get('href'), this.get('rel'));<br /><br /> return false;<br /><br /> });<br /><br /> <br /><br /> }<br /><br /> <br /><br /> };<br /><br /> <br /><br /> window.addEvent('domready', myMooFlowPage.start);<br /><br /><br /><br />/* ]]> */<br /><br /></script><br /><br />

.- HTML:

<br /><h1>MooFlow V0.2 - FullSizeViewer Ejemplo</h1><br /><br /><ul id='menu'><br /><br /> <li><a href='./'>MooFlow V0.2 </a><br /><br /> </li><br /><br /> <br /><br /></ul><br /><br /><div id='content'><br /><br /> <div id='MooFlow'><br /><br /> <a href='http://cafe-junio.blogspot.com/' rel='link'><img alt='Epílogo' src='http://.../asterix0.gif' title='Asterix'/></a><br /><br /> <a href='http://cafe-junio.blogspot.com/' rel='link'><img alt='Leo' src='http://.../Leo.jpg' title='Leo'/></a><br /><br /> <a href='http://.../naranja.JPEG' rel='image'><img alt='naranja.' src='http://.../naranja.JPEG' title='Naranja'/></a><br /><br /> <a href='http://.../Tronco2.jpg' rel='image'><img alt='tubo' src='http://.../Tronco2.jpg' title='Tubo'/></a><br /><br /> <a href='http://.../Prueba.gif' rel='image'><img alt='Cierre' src='http://.../prueba.gif' title='Cierre'/></a><br /><br /> </div><br /><br /> </div><br /><br />

Si os fijáis bien en el HTML, veréis que tenéis la posibilidad de efectuar un "zoom" sobre las imágenes, y vincularlas a la página que deseéis.

Ahora, sí está todo en orden... :)

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


.- CSS:

<link href='http://.../MooFlowDemo.css' rel='stylesheet' type='text/css'/>

.- SCRIPTS:

<script src='http://.../mootools-beta-1.2b2.js' type='text/javascript'/>

<script src='http://.../MooFlow2.js' type='text/javascript'/>

<script type='text/javascript'>

var myMooFlowPage = {



start: function(){

/* MooFlow instance with the complete UI and Viewer */

var mf = new MooFlow($(&#39;MooFlow&#39;), {

stylePath: &#39;http://.../MooFlowWhite.css&#39;,

bgColor: &#39;#fff&#39;,

useSlider: true,

useAutoPlay: true,

useCaption: true,

useResize: true,

useMouseWheel: true,

useKeyInput: true,

useViewer: true

});



$$(&#39;.loadremote&#39;).addEvent(&#39;click&#39;, function(){

mf.loadHTML(this.get(&#39;href&#39;), this.get(&#39;rel&#39;));

return false;

});



}



};



window.addEvent(&#39;domready&#39;, myMooFlowPage.start);

</script>

Ojo en el último script a la tag "stylePath": aquí teneéis que poner la URL del CSS de vuestro Mooflow (que contiene, entre otras prescripciones, las imágenes de la barra de funciones).

Y para quienes tengan la versión anterior de Mooflow, advertir que este script Mooflow.js es más completo que el de la anterior versión, luego habréis de bajarlo d nuevo.

.- HTML: Añadiendo "Imagen" o "link" al "rel" que lleva cada imagen, podéis hacer que la misma se abra en zoom o redirija a otra página:

Si queréis una sidebar junto a la galería, a fín de dejar allí algún comentario sobre la misma, colocad el HTML como sigue. Si no queréis la sidebar, comenzad directamente con el "content":

<div id='demo'>

<h1>MooFlow v0.2/Ejemplo para FullSizeViewer</h1>

<div id='sidebar'>

<ul id='menu'>

<li><p>En este ejemplo hay muchas nuevas funcionalidades, como un &quot;reflection&quot;, zoom, nueva barra de desplazamiento con controles y efectos mootools. Por eso he reemplazado el vbiejo ejemplo por este otro, que me parece muy, muy bonito y útil.</p></li>

<li><a href='http://www.outcut.de/testcase/'>Ver aquí todos los ejmploes </a></li>



</ul>

</div>

<div id='content'>

<div id='MooFlow'>

<a href='http://nada-junio.blogspot.com/' rel='link'><img alt='rosa gótica' src='http://.../RosaCab.jpg' title='Rosa gótica'/></a>

<a href='http://nsda-junio.blogspot.com/' rel='link'><img alt='Visita nada-junio.blogspot.com' src='http://.../Cabecera3.gif' title='Agujero negro'/></a>

<a href='http://.../CelorioSepia.jpg' rel='image'><img alt='Celorio, en sepia.' src='http://.../CelorioSepia.jpg' title='Celorio en sepia'/></a>

<a href='http://.../big/macpro.jpg' rel='image'><img alt='Der neue 8-Core Standard.' src='http://...macpro.jpg' title='Mac Pro'/></a>

<a href='http://.../big/macbook_air.jpg' rel='image'><img alt='Das dünnste Notebook der Welt.' src='http://.../macbook_air.jpg' title='MacBook Air'/></a>



</div>

<ul class='sub'>

<li><a class='loadremote' href='http://www.outcut.de/mooflow/customize-skin/' rel='.viewer-example'>Ver aquí para Mooflow con fondo negro</a></li>

</ul>

</div></div>

Si alguien tiene alguna pregunta, por aquí ando :)