Uso de jQuery Cycle en un módulo de Joomla

joomla2.5

Question

Estoy desarrollando un módulo deslizante de contenido jQuery para un cliente. Se supone que el control deslizante de contenido se desliza entre diferentes elementos de contenido. El control deslizante funcionaba perfectamente en html/javascript simple, pero tengo problemas para convertirlo a un módulo de Joomla.

Aquí está el código:

<?php
// no direct access
defined( ''_JEXEC'' ) or die( ''Restricted access'' );
$doc =& JFactory::getDocument();
$doc->addStyleSheet( ''modules/mod_slider40secs/css/jquery-ui-1.8.17.custom.css'' );
$doc->addStyleSheet( ''modules/mod_slider40secs/css/style.css'' );
$doc->addScript( ''modules/mod_slider40secs/js/jquery-1.7.1.min.js'' );
$doc->addScript( ''modules/mod_slider40secs/js/jquery-ui-1.8.17.custom.min.js'' );
$doc->addScript( ''modules/mod_slider40secs/js/jquery.cycle.all.js'' );
$doc->addScript( ''modules/mod_slider40secs/js/noconflict.js'' );
?>

<script type="text/javascript">
var prevValue, totalImages;
prevValue=0;

function moveNext(step){

}


totalImages = (jQuery("#gallery li").length) - 1;
jQuery(''#gallery'').cycle({ 
    fx:     ''none'', 
    speed:  ''fast'', 
    timeout: 2000, 
    next:   ''#next'', 
    prev:   ''#prev'',
    skipInitializationCallbacks: true,
    before: function(currSlideElement, nextSlideElement, options, forwardFlag){
        jQuery( ".slider" ).slider({
            value : totalImages * options.nextSlide
        });
    }
});

jQuery( ".slider" ).slider({
    value:0,
    min: 0,
    max: totalImages * totalImages,
    step: totalImages,
    slide: function( event, ui ) {
        if(ui.value > prevValue){
            jQuery("#next").click();

        }
        else if(ui.value<prevValue){
            jQuery("#prev").click();
        }
        prevValue=ui.value;
    }
});

jQuery(".slider a").focusin("click", function(){
    jQuery(''#gallery'').cycle("pause");
});


</script>

<div class="main">
    <div class="wrapper">
        <div class="sliderGallery">
            <div class="gallery">
                <ul class="clearfix" id="gallery">
                    <?php
                    foreach($articleArray as $arti)
                    {
                        ?>
                        <li>
                            <div>
                                <?php echo($arti[''title'']); ?>
                                <?php echo($arti[''text'']); ?>
                            </div>

                        </li>
                        <?php
                    }
                    ?>
                </ul>
                <div class="navigation">
                    <a id="prev" href="javascript:void(0)">Prev</a>
                    <a id="next" href="javascript:void(0)">Next</a>
                </div><!--End of navigation -->
            </div><!--End  of gallery -->
            <div class="slider">
            </div><!--End of slider -->
        </div><!--End of slider gallery -->
    </div><!--End of wrapper -->
</div><!--End of main -->

¿Alguien puede ayudarme a identificar el error?

Anteriormente se llamaba al script en una función jQuery(document).ready() pero tampoco funcionaba de esa manera.

Actualmente estoy viendo solo artículos, pero no deslizador / etc. Usando Firebug puedo ver que los scripts se están cargando así que no hay problema.

Answer 1

Como dijo @Fnatte, el HTML aún no se ha creado.

EDITAR: Me perdí la parte donde dijiste que estaba en un módulo.

La solución es usar jQuery(window).load(function()

<script language="javascript" type="text/javascript">
// -->
/* <![CDATA[ */

var prevValue, totalImages;
prevValue=0;

jQuery(window).load(function() {

totalImages = (jQuery("#gallery li").length) - 1;
jQuery(''#gallery'').cycle({ 
    fx:     ''none'', 
    speed:  ''fast'', 
    timeout: 2000, 
    next:   ''#next'', 
    prev:   ''#prev'',
    skipInitializationCallbacks: true,
    before: function(currSlideElement, nextSlideElement, options, forwardFlag){
        jQuery( ".slider" ).slider({
            value : totalImages * options.nextSlide
        });
    }
});

jQuery( ".slider" ).slider({
    value:0,
    min: 0,
    max: totalImages * totalImages,
    step: totalImages,
    slide: function( event, ui ) {
        if(ui.value > prevValue){
            jQuery("#next").click();

        }
        else if(ui.value<prevValue){
            jQuery("#prev").click();
        }
        prevValue=ui.value;
    }
});

jQuery(".slider a").focusin("click", function(){
    jQuery(''#gallery'').cycle("pause");
});

});
/* ]]> */
//-->
</script>

Answer 2

En el momento en que se ejecuta su secuencia de comandos, los elementos HTML no se han creado. Una forma simple de resolverlo es mover las etiquetas de guión debajo de tus elementos HTML.

Lo siguiente no funcionará:

<script>
document.getElementById(''asd'').innerText = ''asd'';
</script>
<div id="asd"></div>

Sin embargo, si mueve la etiqueta del script al final, hará lo siguiente:

<div id="asd"></div>
<script>
document.getElementById(''asd'').innerText = ''asd'';
</script>