Hola a todos,
Os cuento mi problema:
Tengo 2 funciones: slideshow y slide:
- Slideshow: es un pase de diapositivas utilizando jquery-ui
- Slide: se encarga de darle animación a 4 clases que se le pasen por parámetro
Este el código html del slideshow.
Código HTML:
<div id="slideshow">
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<div id="slide">
<div class="ss_apertura"></div>
<div class="ss_titulo"><img src="img/ss_titulo.jpg"/></div>
<div class="ss_enlace"><a href="index.html" target="_self">ENLACE AL CONTENIDO -></a></div>
<div class="ss_icono"><img src="img/ss_icono.jpg"/></div>
<div class="ss_imagen"><img src="img/ss_imagen.jpg"/></div>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<div id="slide2">
<div class="ss_apertura"></div>
<div class="ss_titulo"><img src="img/ss_titulo2.jpg"/></div>
<div class="ss_enlace"><a href="index.html" target="_self">OTRO ENLACE AL CONTENIDO -></a></div>
<div class="ss_icono"><img src="img/ss_icono2.jpg"/></div>
<div class="ss_imagen"><img src="img/ss_imagen2.jpg"/></div>
</div>
</div>
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">
<a href="#fragment-1">1</a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-2">
<a href="#fragment-2">2</a>
</li>
</ul>
</div> Y este es el script:
Código PHP:
function slideshow()
{
$(document).ready(function(){
//Pausing slider on hover
$("#slideshow").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#slideshow").hover(
function() {
$("#slideshow").tabs("rotate", 0, true);
},
function() {
$("#slideshow").tabs("rotate", 5000, true);
}
);
});
}
Todo se vería así:
Ahora lo complicado, para mí, es cada vez que se pase a una diapositiva nueva, ya sea por pulsar uno de los botones o por la transición del propio slideshow, llamar a la función
Slide para que anime los divs #slide y #slide2.
Llevo toda la mañana intentándolo pero ha sido un fiasco
A ver si podéis echarme una mano y gracias por adelantado
