JJ

SlideShow Mootools

2007-12-11T10:27:00.003+01:00

El que tengo en el pie de la página, con transiciones y funciones de play, next, previo...

Me costó lo mío realizarlo, pero (al margen de ajustar los cuadros que... paso) ahí está. Cada quien que abra los scripts y los arregle a su gusto y manera: es la parte más fácil de este elemento.

Cómo lo hice:

.- SCRIPTS:
Antes del cierre /head de la plantilla:

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

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

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

.- CSS:
Dentro del skin (o style) de la plantilla

/**************************************************************

SlideShow
v 1.3

**************************************************************/

.slideshowContainer {
border: 1px solid #ccc;
width: 450px;
height: 300px;
margin-bottom: 5px;
}

.loading {
background: url(images/loading.gif) center no-repeat;
}

.slideshowThumbnail {
outline: none;
}

.slideshowThumbnail img {
border: 1px solid white;
padding: 4px;
}

a:hover.slideshowThumbnail img {
border: 1px solid #ccc;
padding: 4px;
}

.current img {
border: 1px solid red;
padding: 5px;
}

.outline {
border: 1px solid orange;
z-index: 0;
position: absolute;
}

#thumbnails {
/*width: 130px;
float: left;*/
}

/*************************************************************/

.- HTML:
A colocar donde se desee el slideshow, por ejemplo, bajo las entradas, como lo he colocado yo en esta plantilla:

<div id='example'>

<h1>Slideshow (reformado)</h1>

<div class='slideshowContainer' id='slideshowContainer'/>

<div id='thumbnails'>

<a class='slideshowThumbnail' href='http://.../jaguar1.'><img border='0' height='70' src='http://.../jaguar1.jpg' width='100'/></a>

<a class='slideshowThumbnail' href='http://.../leop3.jpg'><img border='0' height='70' src='http://.../leop3.jpg' width='100'/></a>

<a class='slideshowThumbnail' href='http://.../gcheeta1.jpg'><img border='0' height='70' src='http://.../gcheeta1.jpg' width='100'/></a>

<a class='slideshowThumbnail' href='http://.../gtiger1.jpg'><img border='0' height='70' src='http://.../gtiger1.jpg' width='100'/></a>

<a class='slideshowThumbnail' href='http://.../CelorioSepia.jpg'><img border='0' height='70' src='http://.../CelorioSepia.jpg' width='100'/></a>

<a class='slideshowThumbnail' href='http://.../FlorBoli%2B.jpg'><img border='0' height='70' src='http://.../FlorBoli%2B.jpg' width='100'/></a>

<p><a href='#' onclick='show.play(); return false;'>Play</a> | <a href='#' onclick='show.stop(); return false;'>Stop</a> | <a href='#' onclick='show.next(); return false;'>Next</a> | <a href='#' onclick='show.previous(); return false;'>Previous</a></p>

</div>

<script type='text/javascript'>

window.addEvent('domready',function(){

var obj = {

wait: 3000,

effect: 'fade',

duration: 1000,

loop: true,

thumbnails: true,

backgroundSlider: true,

onClick: function(i){alert(i)}

}

show = new SlideShow('slideshowContainer','slideshowThumbnail',obj);

show.play();

});

</script>

</div></div>

Esta página me ayudó a insertar el slide: coldfusion

Stream-Flickr

2007-12-11T10:19:00.001+01:00

Tan fácil como acudir a Sildeoo, introducir tu nombre de usuario de Flickr, elegir un diseño y copiar el código...

Un esfuercito: subid las imágenes a vuestros servidores.

2007-12-10T01:24:00.003+01:00

Bien... si tengo que dedicarme a rehacer los hacks porque alguien anda insertando directamente las imágenes con mis urls... entonces apaga y vámonos.

No dispongo más que de un tiempo por las noches (y aún así, le robo horas al sueño) para poder explicar los hacks que voy realizando... y si alguien no tiene problemas en andar quitándome las imágenes por subírselas tal cual a su plantilla y no molestarse más... no es problema sólo suyo: sino mío, porque me quita espacio y funcionalidad... y de quienes quieren ver las explicaciones de los hacks que no puedo dar por tener que dedicarme a rehacer todas las imágenes.

Esta noche me ha pasado con el slideshow: sólo me dejaron una imagen.

Y está visto que volverá a pasar... porque siempre hay quien no piensa más que en sí mismo...

Eso sí: sintiéndolo en el alma, la URL de mis imágenes no la vuelvo a poner directamente en ninguna explicación... y ya me las apañaré para que no puedan hacerse con ellas.

Hay gente para todo... en todas partes...

SlimBox (Mootools)

2007-12-04T03:34:00.002+01:00

La página del autor da error en el servidor... debe ser porque está arreglando el hack, que no mostraba el fondo para nada, ni en IE ni en Firefox. Eso sí: se me han ido a Pimiango las imágenes (load, prev, next, close)... de manera que tengo que rehacer el CSS y el js.

Maldición... (jajajjaaaa). Bueno: el caso es que se vea algo.

Ya reharé los scripts para "recodárselas" a mi slimbox. Cuando lo tenga hecho, coloco la explicación.

Fx-Elements (Menú)

2007-12-04T01:45:00.002+01:00

Es el menú de colorines que tengo en la cabecera de esta página.

Así lo hice:

.- SCRIPTS:

<script language='javascript' src='http://junioscripts.googlepages.com/mootools.svn.js' type='text/javascript'/>

<script type='text/javascript'>

window.addEvent('domready', function(){

var szNormal = 117, szSmall = 100, szFull = 219;

var kwicks = $$("#kwicks .kwick");

var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});

kwicks.each(function(kwick, i) {

kwick.addEvent("mouseenter", function(event) {

var o = {};

o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}

kwicks.each(function(other, j) {

if(i != j) {

var w = other.getStyle("width").toInt();

if(w != szSmall) o[j] = {width: [w, szSmall]};

}

});

fx.start(o);

});

});

$("kwicks").addEvent("mouseleave", function(event) {

var o = {};

kwicks.each(function(kwick, i) {

o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}

});

fx.start(o);

})

});

</script>

.- CSS:

#kwicks_container {

background-color: violet;

height: 100px;

}

#kwicks {

position: relative;

}

#kwicks .kwick {

float: left;

display: block;

width: 117px;

height: 100px;

}

#kwick_red {background-color: red;}

#kwick_orange {background-color: orange;}

#kwick_yellow {background-color: yellow;}

#kwick_green {background-color: green;}

#kwick_blue {background-color: blue;}

#kwick_indigo {background-color: indigo; color: #fff; }

#kwick_violet {background-color: violet;}

.- HTML:

<div id='kwicks_container'>

<h1>TESTS</h1>

<ul id='kwicks'>

<li class='kwick' id='kwick_red'><a href='http://cafe-junio.blogspot.com/'><span>Epílogo</span></a></li>

<li class='kwick' id='kwick_orange'><a href='http://cuentos-historias.blogspot.com/'><span>Revolutum</span></a></li>

<li class='kwick' id='kwick_yellow'><a href='http://nada-junio.blogspot.com/'><span>Nada</span></a></li>

<li class='kwick' id='kwick_green'><a href='http://hiperadri.blogspot.com/'><span>El Juego...</span></a></li>

<li class='kwick' id='kwick_blue'><a href='http://imagen-junio.blogspot.com/'><span>Imagen</span></a></li>

<li class='kwick' id='kwick_indigo'><a href='http://slideejemplo-junio.blogspot.com/'><span>Slide-Ejemolo</span></a></li>

<li class='kwick' id='kwick_violet'><a href='http://jj-junio.blogspot.com/'><span>Inicio</span></a></li>

</ul>

<span class='clr'></span>

</div>

Este menú es sólo un ejemplo... a mí me gusta más el que he confeccionado para IMAGEN

Web de referencia: MOOTOOLS

FX-Scroll (Mootools)

2007-12-03T23:41:00.000+01:00

Cielo|Nieve|Arbol desnudo|Ultimas hierbas

Cielo

Nieve

Arbol desnudo

Ultimas hierbas

Así se hace:

.- Scripts:

<script language='javascript' src='http://junioscripts.googlepages.com/mootools.svn.js' type='text/javascript'/>

<script type='text/javascript'>
<script type='text/javascript'>

window.addEvent('domready', function(){

var scroll = new Fx.Scroll('demo-wrapper', {

wait: false,

duration: 2500,

offset: {'x': -200, 'y': -50},

transition: Fx.Transitions.Quad.easeInOut

});

$('link1').addEvent('click', function(event) {

event = new Event(event).stop();

scroll.toElement('content1');

});

$('link2').addEvent('click', function(event) {

event = new Event(event).stop();

scroll.toElement('content2');

});

$('link3').addEvent('click', function(event) {

event = new Event(event).stop();

scroll.toElement('content3');

});

$('link4').addEvent('click', function(event) {

event = new Event(event).stop();

scroll.toElement('content4');

});

});

</script>

.- CSS:

#demo-bar {

margin: 5px auto;

padding: 5px 0;

width: 600px;

border-bottom: 1px solid #B3D4EF;

background: #EFF8FF;

text-align: center;

}

#demo-wrapper {

margin: 5px auto;

overflow: hidden;

height: 400px;

width: 600px;

border: 1px solid #ddd;

position: relative;

}

#demo-inner {

width: 1600px;

height: 1600px;

background-image: url(http://1.bp.blogspot.com/_BQrzxz9-EQk/R1SGtivA7NI/AAAAAAAACHI/_txOJGL0cDQ/s1600/FX.jpg);

position: relative;

}

.scrolling-content {

background: #000;

width: 139px;

height: 73px;

text-align: center;

position: absolute;

}

.scrolling-content h1 {

color: #fff;

padding: 25px 0;

font-size: 12px;

}

#content1 {

right: 750px;

top: 100px;

}

#content2 {

left: 600px;

top: 550px;

}

#content3 {

right: 500px;

top: 550px;

}

#content4 {

left: 1100px;

top: 1000px;

}

.- HTML:

<div id="demo-bar">

<a id="link1" href="#">Cielo</a> |

<a id="link2" href="#">Nieve</a> |

<a id="link3" href="#">Arbol desnudo</a> |

<a id="link4" href="#">Ultimas hierbas</a>

</div>

<div id="demo-wrapper">

<div id="demo-inner">

<div id="content1" class="scrolling-content">

<h1>Cielo</h1>

</div>

<div id="content2" class="scrolling-content">

<h1>Nieve</h1>

</div>

<div id="content3" class="scrolling-content">

<h1>Arbol desnudo</h1>

</div>

<div id="content4" class="scrolling-content">

<h1>Ultimas hierbas</h1>

</div>

</div>

</div>

WEB DE REFERENCIA: FX.Scroll

Tooltips transparentes de Mootools

2007-12-03T22:57:00.000+01:00

Tips 1

CODIGOS:

.- Scripts:

<script language='javascript' src='http://junioscripts.googlepages.com/mootools.svn.js' type='text/javascript'/>

<script type='text/javascript'>

window.addEvent('domready', function(){

/* Tips 1 */

var Tips1 = new Tips($$('.Tips1'));

/* Tips 2 */

var Tips2 = new Tips($$('.Tips2'), {

initialize:function(){

this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);

},

onShow: function(toolTip) {

this.fx.start(1);

},

onHide: function(toolTip) {

this.fx.start(0);

}

});

/* Tips 3 */

var Tips3 = new Tips($$('.Tips3'), {

showDelay: 400,

hideDelay: 400,

fixed: true

});

/* Tips 4 */

var Tips4 = new Tips($$('.Tips4'), {

className: 'custom'

});

});

</script>

.- CSS:

.tool-tip {

color: #fff;

width: 139px;

z-index: 13000;

}

.tool-title {

font-weight: bold;

font-size: 11px;

margin: 0;

color: #9FD4FF;

padding: 8px 8px 4px;

background: orchid;

border-left:5px solid #fff;

}

.tool-text {

font-size: 11px;

padding: 4px 8px 8px;

background:firebrick;

border-left:5px solid #fff;

}

.custom-tip {

color: #000;

width: 130px;

z-index: 13000;

}

.custom-title {

font-weight: bold;

font-size: 11px;

margin: 0;

color: #3E4F14;

padding: 8px 8px 4px;

background: #C3DF7D;

border-bottom: 1px solid #B5CF74;

}

.custom-text {

font-size: 11px;

padding: 4px 8px 8px;

background: #CFDFA7;

}

.- HTML:

<img src="http://4.bp.blogspot.com/_BQrzxz9-EQk/R1R8PSvA7MI/AAAAAAAACHA/V6-sYqwoMo4/s400/asterix0.gif" alt="Asterix" class="Tips1" title="Tips Title :: Prueba Tooltip de Mootools" />

Web autor: Mootools