Deprecated: str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/mybb-es.com/html/inc/class_language.php on line 201
[Tutorial] Noticias aleatorias con desvanecimiento
Páginas (2): 1 2   
eNvy   30 Nov, 2013, 5:52 pm
#1
Primero y principal, agradecer al usuario "Destroy666" de MyBB Forums por dar la solución (He creado un thread y me ha respondido de forma exacta qué era lo que había que hacer para que se solucione).

A continuación, la guía:

Paso 1: Cargar jQuery

Van a su panel de administración, buscan el estilo o theme que estén usando, y se dirigen a "Plantillas sin grupo". Luego ingresan dentro de "Headerinclude".

Debajo de:

Código:
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />

Van a llamar la librería de jQuery desde el repositorio de Google de la siguiente forma:

Código:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Una ves que pegaron ese código, estarán llamando a la librería jQuery para que puedan utilizarla en todo su foro MyBB.

Debajo de eso, van a colocar el siguiente código (Dejo explicado lo que tengan que modificar a gusto):

Código:
<script type="text/javascript">
jQuery.noConflict(); // Ésto se aplica para no tener ningún tipo de error con otro código jQuery

this.randomtip = function(){

    var pause = 12000; // Acá definirán el retraso en el cambio de texto en milisegundos
    var length = jQuery("#tips li").length;
    var temp = -1;        

    this.getRan = function(){
        var ran = Math.floor(Math.random()*length) + 1;
        return ran;
    };
    this.show = function() {
        var ran = getRan();
        while (ran == temp) { // Ésto es para que no se repita el mismo texto por más aleatorio que fuere
            ran = getRan();
        };
        temp = ran;
        jQuery("#tips li").hide();
        jQuery("#tips li:nth-child(" + ran + ")").fadeIn("slow");
    };

    show(); setInterval(show,pause);

};

jQuery(document).ready(function(){
    randomtip();
});
</script>

Eso sería todo en la plantilla "Headerinclude".

Luego, pasaremos al CSS, donde usarán un simple estilo para ocultar los diferentes textos que querramos mostrar:

Código:
#tips, #tips li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#tips {
    font-size: 16px;
}

#tips li {
    display: none;  /* Ésto oculta todos los textos que tengamos cargados */
}

Eso sería todo el código CSS que deberemos usar (Cabe aclarar, que ustedes pueden estilizar a gusto el tipo de fuente, el tamaño, el color, etc).

Por último, iremos al grupo de plantillas "Cabecera", luego ingresaremos en la plantilla "header", y colocaremos el siguiente código, debajo de <div id="container">:

Código:
<ul id="tips">
    <li>... if you want to become a better coder you need to eat your vegetables?</li>
    <li>... it takes more time to code a web page then to make a pizza?</li>
    <li>... you should validate your code?</li>
    <li>... jQuery is your friend? For real!</li>
</ul>

Como podrán observar, hay 4 textos cargados con diferentes oraciones, la cantidad de textos que quieran, pueden ingresarse ahí entre los tags <li></li>, y serán mostrados de forma aleatoria sin repetirse.

Espero que se entienda el tutorial, dejo la fuentes para que vean que no hice nada más que probar y preguntar:

Fuente del código original
Mi posteo en MyBB Forums

Saludos y espero les sirva.
Cluster   30 Nov, 2013, 6:13 pm
#2
gracias por el tutorial Smile

:)
DarkEternity   30 Nov, 2013, 9:16 pm
#3
muchas gracias por el tuto no muchos saben o sabian como llamar la libreria jquery para agregar los script @eNvy
victoryfany   30 Nov, 2013, 10:39 pm
#4
muchas gracias Smile amigo me resolviste
eNvy   30 Nov, 2013, 10:43 pm
#5
De nada, espero sirva para el que lo necesite ^^.
Boreas   1 Dec, 2013, 6:13 am
#6
Gracias Big Grin te dejo +rep
Brown   1 Dec, 2013, 8:48 am
#7
Buen tutorial Smile se agradece amigo
AC Dynsol   1 Dec, 2013, 9:09 am
#8
Se parece al default de SMF solo que con un diseño mas bonito.
storm   1 Dec, 2013, 9:33 am
#9
Alguna prueba para ver lo que es exactamente?
DarkEternity   1 Dec, 2013, 9:42 am
#10
aqui mismo lo puedes ver en la barra de anuncios como cambia las noticias aletatoriamente
Páginas (2): 1 2   
  
Powered By MyBB, © 2002-2024 MyBB Group.
Made with by Curves UI.