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.

score 1 · Answer 1 · answered Nov 03 '12 at 10:34

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>

answered Nov 03 '12 at 10:34

Matteus Hemström

3,796
2
26
34

Now I see the slide bar but it the slider still doesn't work. – mr_abbasi Nov 03 '12 at 10:43
@jackJoe I realized that it actually was conflict friendly and removed my edit. – Matteus Hemström Nov 03 '12 at 11:03
@Fnatte: It says `TypeError: jQuery(".slider").slider is not a function @ http://localhost/FourtySecondsWeb/:402`. Also when clicking on the scrollbar it says: -- `TypeError: jQuery("#gallery").cycle is not a function @ http://localhost/FourtySecondsWeb/:425` – mr_abbasi Nov 03 '12 at 12:46
@mr_abbasi So it seems like jQuery UI is not imported correctly. Try with the latest version of both jQuery and jQuery UI. – Matteus Hemström Nov 03 '12 at 12:57
@Fnatte: The problem stems from the fact that two separate modules are loading jquery separately and if we disable the other this one works. Any solutions? – mr_abbasi Nov 05 '12 at 19:06
@mr_abbasi You could try something like http://stackoverflow.com/a/1566644/86298, or https://groups.google.com/d/msg/joomla-dev-cms/HfgjK07fYN8/LYIjmi_T_8kJ – Matteus Hemström Nov 05 '12 at 19:25

jackJoe · Answer 2 · 2012-11-03T10:49:38.963

0

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>

edited Nov 03 '12 at 10:49

answered Nov 03 '12 at 10:43

jackJoe

11,078
8
49
64

Putting in document.ready() doesn't work it just shows all the articles then. No Slider. – mr_abbasi Nov 03 '12 at 10:49
@user1705934 see my update, use `jQuery(window).load(function()` – jackJoe Nov 03 '12 at 10:50
@jackDoe doesn't work with `jQuery(window).load(function()` as well – mr_abbasi Nov 03 '12 at 10:56
@mr_abbasi I have tow suggestions: 1- place the code I suggested at the end of the HTML; 2- place the code I suggested and place it into an external js file and call it as you have with the other javascript external files. – jackJoe Nov 03 '12 at 11:03
It does not work if u do `jQuery.load()` if it's inline or called from a separate jscript file – mr_abbasi Nov 03 '12 at 11:11
@Irfan: It says `TypeError: jQuery(".slider").slider is not a function @ http://localhost/FourtySecondsWeb/:402`. Also when clicking on the scrollbar it says: `TypeError: jQuery("#gallery").cycle is not a function @ http://localhost/FourtySecondsWeb/:425 ` – mr_abbasi Nov 03 '12 at 12:46
@mr_abbasi:check all js are included and use jQuery.noConflict();May this will help. – Irfan Nov 03 '12 at 12:49

Using jQuery Cycle in a Joomla Module

2 Answers2