alternar divs por tiempo o con click – jquery html css

Pregunta:


Estoy trabajando con el siguiente js :

$(document).ready(function () {
  var allBoxes = $("div.boxes").children("div");
  transitionBox(null, allBoxes.first());
});

function transitionBox(from, to) {
  function next() {
      var nextTo;
      if (to.is(":last-child")) {
          nextTo = to.closest(".boxes").children("div").first();
      } else {
          nextTo = to.next();
      }
    to.fadeIn(500, function () {
        setTimeout(function () {
            transitionBox(to, nextTo);
        }, 5000);
    });
  }

   if (from) {
      from.fadeOut(500, next);
  } else {
      next();
  }
}

En el que tengo varios divs que van pasando por tiempo. Pero ahora me gustaría que pasara tambien con el click. Intenté que pasaran con los id en los divs pero no me funcionó. Entiendo que es algo con un evento onclick pero no se muy bien como hacerlo.

Alguna idea ? Muchas gracias. (Aquí teneis el jsfiddle por si ayuda)

  $(document).ready(function () {
      var allBoxes = $("div.boxes").children("div");
      transitionBox(null, allBoxes.first());
  });

  function transitionBox(from, to) {
      function next() {
          var nextTo;
          if (to.is(":last-child")) {
              nextTo = to.closest(".boxes").children("div").first();
          } else {
              nextTo = to.next();
          }
          to.fadeIn(500, function () {
              setTimeout(function () {
                  transitionBox(to, nextTo);
              }, 5000);
          });
      }
      
      if (from) {
          from.fadeOut(500, next);
      } else {
          next();
      }
  }
.boxes div{
  display:none;
}
.sizeR{
  width:500px;
  height:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxes">
    <div class="box1" id="1">
      text1
      <a href="#2" ><img class="sizeR" src="http://rlv.zcache.es/van_los_platanos_pegatina_cuadrada-r144680d35e3e45a0ad2282b310141c3d_v9wf3_8byvr_324.jpg"></a>  
    </div>
    <div class="box2" id="2">
      text2
      <a href="#3" ><img class="sizeR" src="http://rlv.zcache.es/pares_de_platanos_del_dibujo_animado_pegatina_cuadrada-r46c488b848514841a3aa27aaec211f22_v9wf3_8byvr_324.jpg"></a>  
    </div>
    <div class="box3" id="3">
      text3
      <a href="#1" ><img class="sizeR" src="http://rlv.zcache.es/deme_los_platanos_pegatina_cuadrada-r25a2e828474b4281b475f1148b382be4_v9wf3_8byvr_324.jpg"></a>
    </div>
</div>
Preguntado por: David

devconcept

Podrías agregar un evento click al contenedor de las cajas y usar el selector :visible para saber cual es el que se está mostrando actualmente.

Tuve que hacer algunas modificaciones a tu código como extraer la función findNext para saber cual es el siguiente elemento y no tener que repetir el algoritmo de selección que habías creado. El timeout también es necesario limpiarlo en cada transición de lo contrario te cambia la imagen antes de tiempo.

De esta forma solo tienes que usar un evento click en lugar de varios eventos individuales lo que te permitirá agregar cualquier cantidad de elementos sin cambiar nada de código.

$(document).ready(function() {
  var boxContainer = $('.boxes');
  var allBoxes = boxContainer.children("div");
  var timeout;
  transitionBox(null, allBoxes.first());

  boxContainer.click(function() {
    var from = boxContainer.children('div:visible');
    var to = findNext(from);
    transitionBox(from, to);
  });

  function findNext(to) {
    if (to.is(":last-child")) {
      return to.closest(".boxes").children("div").first();
    } else {
      return to.next();
    }
  }

  function transitionBox(from, to) {
    clearTimeout(timeout);

    function next() {

      var nextTo = findNext(to);

      to.fadeIn(500, function() {
        timeout = setTimeout(function() {
          transitionBox(to, nextTo);
        }, 5000);
      });
    }

    if (from) {
      from.fadeOut(500, next);
    } else {
      next();
    }
  }
});
.boxes div {
  display: none;
}
.sizeR {
  width: 500px;
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxes">
  <div class="box1" id="1">
    text1
    <a href="#2">
      <img class="sizeR" src="http://rlv.zcache.es/van_los_platanos_pegatina_cuadrada-r144680d35e3e45a0ad2282b310141c3d_v9wf3_8byvr_324.jpg">
    </a>
  </div>
  <div class="box2" id="2">
    text2
    <a href="#3">
      <img class="sizeR" src="http://rlv.zcache.es/pares_de_platanos_del_dibujo_animado_pegatina_cuadrada-r46c488b848514841a3aa27aaec211f22_v9wf3_8byvr_324.jpg">
    </a>
  </div>
  <div class="box3" id="3">
    text3
    <a href="#1">
      <img class="sizeR" src="http://rlv.zcache.es/deme_los_platanos_pegatina_cuadrada-r25a2e828474b4281b475f1148b382be4_v9wf3_8byvr_324.jpg">
    </a>
  </div>
</div>

También podrías agregar un throttle a tu función click para que se muestre correctamente si te dan muchos clicks seguidos de esta forma.

// 500ms es el tiempo que se toma tu imagen en aparecer
boxContainer.click($.throttle(500, function() {
    var from = boxContainer.children('div:visible');
    // .......
    // Codigo del click
}));

Fuente

Tags:, ,

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *