Esta vez me toca explicar el slideshow de Mootools, muy guapo y más sencillo de insertar que otros, puesto que no afecta para nada al resto de las imágenes del blog. Podéis ver mi prueba en el footer de Trabajos Oscuros, y el hack original en MooFlow
Funciona, además de con la rueda del ratón, picando en "next", para la imagen siguiente, o "prev" para la imagen anterior. Además, podéis picar en "play", si queréis ver la presentación completa sin mover un dedo, pues van pasando las imágenes una a una.. En el momento que queráis pararlo, picáis en "stop" y listos:
.- CSS:
#MooFlow {
background-color:#000;
color:#fff;
visibility:hidden;
position:relative;
overflow:hidden;
}
#MooFlow * {
margin:0;
padding:0;
}
#images {
position:relative;
}
#images img {
position:absolute;
border:none;
}
#captions {
position:relative;
text-align:center;
z-index:10000;
}
#slider {
position:relative;
border:1px solid #b3b3b3;
z-index:10001;
}
#knob {
background:#fff;
width:100px;
height:15px;
}
#nav{
list-style:none;
margin:0;
padding:0;
position:relative;
z-index:10002;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
color:#fff;
}
.- Script:
<script src='http://.../Mootools-beta-1.2b1.js' type='text/javascript'/>
<script src='http://.../Mooflow.js' type='text/javascript'/>
<script type='text/javascript'>
/* //<![CDATA[ */
/* MooFlow */
var mf;
window.addEvent('load', function(){
mf = new MooFlow({
container: 'MooFlow',
imgContainer: 'images',
images: '#images img',
caption: 'captions',
slider: {slider:'slider',knob:'knob'},
interval: 3000,
buttons: {prev:'prev',stop:'stop',play:'play',next:'next'},
useWindowResize: true,
useMouseWheel: true,
useKeyInput: true
});
});
/* MooFlow Documentation + Extras */
window.addEvent('domready', function(){
var accordion = new Accordion('h3.atStart', 'div.atStart', {
opacity: false,
onActive: function(toggler, element){
toggler.setStyle('color', '#ff3300');
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#222');
}
}, $('accordion'));
$('exeExtra').addEvent('click', function makeExtra(){
window.removeEvents();
var r = new Element('div').setProperty('id', 'rknob').set('html','resize me!').inject($('MooFlow'));
var d = new Element('div').setProperty('id', 'dknob').set('html','drag me!').inject($('MooFlow'), 'top');
$('MooFlow').makeResizable({
handle:$(r),
onComplete: function(){
mf.update();
}
});
$('MooFlow').makeDraggable({
handle:$(d)
});
});
});
/* //]]> */
</script>
.- HTML:
<div id='MooFlow'>
<div id='images'>
<img alt='@2' src='http://.jpg' title=''/>
<img alt='' src='http://.jpg' title=''/>
<img alt='' src='http://.jpg' title=''/>
(etc...)
</div>
<div id='captions'/>
<div id='slider'>
<div id='knob'/>
</div>
<ul id='nav'>
<li><a href='#' id='prev'>Prev</a></li>
<li><a href='#' id='stop'>Stop</a></li>
<li><a href='#' id='play'>Play</a></li>
<li><a href='#' id='next'>Next</a></li>
</ul>
</div>
Es más sencillo de realizar que de explicar... en serio.
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarSeriously and first: You must consider to do some course about ethics and good manners... so, around what I'm reading in your blogs, I'm understanding what your
ResponderEliminarordinariness does not give you good results.
As for my blog, I do not give explanations to bad-mannered quadrupeds: remain in your poor and empty blogs and do not return here.
Tengo por costumbre publicar todos los comentarios, pero... creo que ya está bien de hacer el tonto... todos los blogs avisan del contenido que no se publicará, si los términos no son cuando, menos, éticos o mínimamente educados.
ResponderEliminarHasta a mí me ha dado (acostumbrada a p´racticamente todo) vergüenza ajena, el contenido sumamente insultante, ordinario y vulgar del comentario del supuesto Alan" o como se llame. Pena que existan elementos así por el mundo... está visto que lo único que no se ha "globalizado" en este mundo es la buena educación.
Desde este instante, no publicaré los comentarios que se salgan del tono mínimamente educado ni, por supuesto, los contestaré, como he hecho en este caso y por última vez.
(Y lo he hecho exclusivamente porque sé que "el ladròn siempre vuelve a la escena del crimen", je... las patologías siempre van en manada ;) )