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>