Using jQuery Cycle in a Joomla Module

Question

I am developing a jQuery content slider module for a client. The content slider is supposed to slide between different content elements. The slider worked perfectly in plain html/javascript but I'm encountering trouble converting it to a Joomla module.

Here is the code:

<?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 -->

Can anyone please help me identify the mistake?

The script was previously being called in a jQuery(document).ready() function but it did not work that way as well.

I'm currently seeing single articles but no slider/etc. Using Firebug I can see that the scripts are being loaded so no problem there.

Answer 1

At the time your script is executed, the HTML-elements have not been created. One simple way to solve it is to move the script tags below your HTML-elements.

The following will not work:

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

However, if you move the script tag to the bottom it will:

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

Answer 2

As @Fnatte said, the HTML haven't been created yet.

EDIT: I missed the part where you said that this was in a module.

The solution is to use 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>