...


SlideShow Mootools

etiquetas | comentarios Un comentario

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(&#39;domready&#39;,function(){

var obj = {

wait: 3000,

effect: &#39;fade&#39;,

duration: 1000,

loop: true,

thumbnails: true,

backgroundSlider: true,

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

}

show = new SlideShow(&#39;slideshowContainer&#39;,&#39;slideshowThumbnail&#39;,obj);

show.play();

});

</script>

</div></div>


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

Más......

Stream-Flickr

etiquetas | comentarios Sin comentarios



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

Más......

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

etiquetas | comentarios Sin comentarios

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

Más......

SlimBox (Mootools)

etiquetas | comentarios 2

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.

NidoArturoWaterYdillYo_misma

Más......

Fx-Elements (Menú)

etiquetas | comentarios Sin comentarios

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



Así lo hice:


  1. .- SCRIPTS:

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

    <script type='text/javascript'>

    window.addEvent(&#39;domready&#39;, function(){

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



    var kwicks = $$(&quot;#kwicks .kwick&quot;);

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

    kwicks.each(function(kwick, i) {

    kwick.addEvent(&quot;mouseenter&quot;, function(event) {

    var o = {};

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

    kwicks.each(function(other, j) {

    if(i != j) {

    var w = other.getStyle(&quot;width&quot;).toInt();

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

    }

    });

    fx.start(o);

    });

    });



    $(&quot;kwicks&quot;).addEvent(&quot;mouseleave&quot;, function(event) {

    var o = {};

    kwicks.each(function(kwick, i) {

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

    });

    fx.start(o);

    })



    });

    </script>


  2. .- 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;}






  3. .- 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'><!-- spanner --></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

Más......

FX-Scroll (Mootools)

etiquetas | comentarios Sin comentarios






Cielo





Nieve





Arbol desnudo





Ultimas hierbas






Así se hace:

  1. .- 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(&#39;domready&#39;, function(){

    var scroll = new Fx.Scroll(&#39;demo-wrapper&#39;, {

    wait: false,

    duration: 2500,

    offset: {&#39;x&#39;: -200, &#39;y&#39;: -50},

    transition: Fx.Transitions.Quad.easeInOut

    });



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

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

    scroll.toElement(&#39;content1&#39;);

    });



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

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

    scroll.toElement(&#39;content2&#39;);

    });



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

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

    scroll.toElement(&#39;content3&#39;);

    });



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

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

    scroll.toElement(&#39;content4&#39;);

    });

    });

    </script>


  2. NOTA: LOS SCRIPTS QUE DOY HAN DE IR SIEMPRE EN ESE MISMO ORDEN. SI SE CAMBIAN, LO MAS PROBABLE ES QUE SE ALTERE EL HACK Y NO FUNCIONE.

  3. .- 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;

    }


  4. OJO!!: LOS VALORES DEL SCROLL DE LOS CONTENIDOS (CONTENT h1, ha2, h3, h4) DEPENDEN DEL TAMAÑO DE LA IMAGEN, POR LO QUE-NORMALMENTE-DEBEREIS CAMBIARLOS.

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

Más......

Tooltips transparentes de Mootools

etiquetas | comentarios Sin comentarios

Tips 1


Asterix

CODIGOS:

  1. .- Scripts:

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

    <script type='text/javascript'>

    window.addEvent(&#39;domready&#39;, function(){

    /* Tips 1 */

    var Tips1 = new Tips($$(&#39;.Tips1&#39;));



    /* Tips 2 */

    var Tips2 = new Tips($$(&#39;.Tips2&#39;), {

    initialize:function(){

    this.fx = new Fx.Style(this.toolTip, &#39;opacity&#39;, {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($$(&#39;.Tips3&#39;), {

    showDelay: 400,

    hideDelay: 400,

    fixed: true

    });



    /* Tips 4 */

    var Tips4 = new Tips($$(&#39;.Tips4&#39;), {

    className: &#39;custom&#39;

    });

    });

    </script>

  2. .- 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;

    }




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

Más......

Slideshow (reformado)

    Ultimas entradas