Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 4 de 4

Tema: [Aporte interactivo] ¿Te animas a contribuir en un Slide para todo CCTW?

Vista Híbrida

  1. #1
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17

    [Aporte interactivo] ¿Te animas a contribuir en un Slide para todo CCTW?

    Hola!!

    Esta iniciativa pretende involucrar a todos los desarrolladores de JavaScript y su framework jQuery para construir un slider de imágenes sencillo y funcional entre todos. Yo ya he hecho una parte del código, entonces... el objetivo cuál es? Pues modificar ese código para hacerlo más sencillo, añadirle nuevas funcionalidades... por ejemplo, con este código, al llegar a la última imagen desaparece y... ahí se acabó el slider, pero sigue consumiendo recursos en la web haciéndola más lenta :(

    Quién se anima a modificar el código para hacer que al llegar a la última imagen, deje de ejecutarse la función? Y si mejor aun, en vez de parar la función, vuelve a la primera imagen del slide y sigue funcionando todo el rato (que suele ser lo normal)?

    Iré añadiendo en este tema todos los códigos modificados que posteéis en un comentario para que el resto pueda probarlos y, si le gusta, ponerlo en su web! :D
    Para mayor comodidad estaría bien que siguierais el formato del código de abajo para que sea más fácil leerlos.
    Cita Iniciado por Doodleo
    El siguiente código fue escrito por @Doodleo. El slide funciona pero... al acabar todas las imágenes, se queda en blanco y no hace nada.
    Código:
    <!DOCTYPE html><html lang="es">
      <head>
        <title>CCTW Slider</title>
        <meta charset="utf-8">
        <meta name="description=" content="Sencillo slider de imágenes para la comunidad de ComoCrearTuWeb.com (CCTW)">
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
        $(document).ready(function(){
          // jQuery CCTW Slider
          // Modify and distribute it as you like :D
          
          // Nombre de la clase del slider
          var nombre = "cctwslide";
          // Velocidad de transición entre cada imagen (en segundos)
          var velocidad = 2;
          // Velocidad a la que desaparecerá la imagen (slow / medium / fast)
          var desaparecer = "fast";
          // Velocidad a la que aparecerá la siguiente imagen (slow / medium / fast)
          var aparecer = "fast";
          
          // Slider
          function cctwslide(){
            $('.'+ nombre +' img:gt(0)').hide();
            var actual = 0;
            setInterval(function(){
              actual = actual + 1;
              $('.'+nombre +' img:first-child').fadeOut(desaparecer);
              $('.'+ nombre +' img:nth-child('+ actual +')').fadeOut(desaparecer);
              $('.'+ nombre +' img:nth-child('+ actual +')').next().fadeIn(aparecer);
            },velocidad * 1000);
          }
          
          cctwslide()
          
        });
        </script>
      </head>
      <body>
        <div class="cctwslide">
          <img src="http://www.comocreartuweb.com/consultas/image.php?u=20518&dateline=1305034311" alt="Imagen 1" />
          <img src="http://www.comocreartuweb.com/consultas/images/misc/como-crear-tu-web.gif" alt="Imagen 2" />
          <img src="http://www.comocreartuweb.com/imagenes/comunes/estilo1024/sered2.png" alt="Imagen 3" />
          <img src="http://www.comocreartuweb.com/comunes/redes.jpg" alt="Imagen 4" />
          <img src="http://www.comocreartuweb.com/imagenes/comunes/estilo1024/allinhosting.png" alt="Imagen 5" />
        </div>
      </body>
    </html>


    Cita Iniciado por skaparate
    Este código es un plugin jQuery escrito por @skaparate que, además de ser configurable, añade dos nuevas opciones: pausar el slide al poner el ratón encima y reanudarlo al quitarlo.
    Código:
    Puedes ver el código fuente del plugin haciendo click aquí
    Enlace directo para descargarlo:https://dl.dropboxusercontent.com/u/...slider-1.1.rar
    Última edición por Doodleo; 13/07/2013 a las 21:03

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,044
    Poder de Reputación
    21
    ¿Por qué no hacerlo como un plugin jQuery? Te dejo el esqueleto de un plugin:

    Código:
    (function($) {
      var options = {
        // Aquí defines las opciones por defecto
        nombre: 'cctwslide',
        velocidadEfecto: 2000,
        velocidad: 1000
      };
    
      var fields = {
        // Estas son variables que el usuario no debería modificar. En OOP, serían propiedades privadas.
        interval: undefined,
        paused: false
      };
    
      var methods = {
        init: function(params) {
          // Mezclas las opciones con las definidas por el usuario.
          $.extend(options, params);
    
          this.each(function() {
            // Aquí escribes la función del plugin
          });
        }
      };
    
      // Timer es el encargado de pausar y reanudar el slide.
      var timer = {
        if(fields.interval != undefined)
          clearTimeout(fields.interval);
    
        if(fields.paused == false) {
          var d = new Date(); // Opcional - para corregir errores.
          // Mueve el slide a la siguiente foto (el método next no existe, es sólo un ejemplo)
          next();
          fields.interval = setTimeout(timer, options.velocidad + options.velocidadEfecto);
        }
      };
    
      var pause = function() {
        log('pause called');
        fields.paused = true;
        clearTimeout(fields.interval);
      };
       
      var resume = function() {
        log('resume called');
        fields.paused = false;
        fields.interval = setTimeout(timer, opt.autoSpeed + opt.effectSpeed);
      };
    
      // Si quieres que el se detenga el slide al pasar el mouse, usas esta función y la siguiente para resumir.
      var onMouseEnter = function(e) {
        var d = new Date();
        log('Stopped: ' + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds());
        pause();
      };
    	
      var onMouseLeave = function(e) {
        var d = new Date();
        log('Resumed: ' + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds());
        resume();
      };
    
      $.fn.cctwSlide = function(method) {
        if(methods[method]) {
          return methods[method].apply( this, Array.prototype.slice.call(arguments, 1));
        } else if(typeof method == 'object' || !method) {
          return methods.init.apply(this, arguments);
        } else {
          $.error('La función ' + method + ' no existe!');
        }
      };
    })(jQuery);
    Después, se usaría así:

    Código:
    jQuery(document).ready(function($) {
      $('#elemento').cctwSlide({
        nombre: '',
        velocidad: 2000,
        etc...
      });
    });
    Te dejo el plugin que he hecho para que lo revises :). No recuerdo si esta versión estaba funcionando sin errores, pero al menos te servirá para ver la estructura de un plugin :).

  3. #3
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17
    Qué bueno!!
    Ya lo he añadido al post principal, por falta de espacio no puedo poner los códigos para poder verlos desde ahí pero añado a cada código una breve descripción de lo que hace el slider, un enlace hacia el post del código y un enlace directo para su descarga (si es que lo hay) :)

    Recordad leer los comentarios de los códigos para saber su funcionamiento y poder modificarlos y, sino sabéis para qué sirve cada cosa del código... si hacéis esto ya lo sabréis :D

  4. #4
    Recien Llegado! Merodeador
    Fecha de Ingreso
    20 jun, 15
    Ubicación
    Vigo
    Mensajes
    5
    Poder de Reputación
    0
    La verdad que yo de programación soy un cero a la izquierda, pero gracias a vuestros aportes voy aprendiendo cositas!
    Las mejores recetas de postres las puedes encontrar en tartasdechocolate.com.

Temas Similares

  1. Respuestas: 9
    Último Mensaje: 30/09/2011, 18:21
  2. te animas a resolver un acertijo???
    Por waldragon en el foro Off-Topic
    Respuestas: 3
    Último Mensaje: 24/07/2010, 18:06
  3. [Aporte] Chat para CCTW!!
    Por Thelord en el foro Foro General
    Respuestas: 0
    Último Mensaje: 30/06/2008, 18:56

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •