Porting Quattro template to newest jquery [SOLVED]

[wmdvanzyl]

Hi All.

I have the Quattro theme from Goran :yourock: (http://www.i-arts.eu/quattro/) running and i want to update it to use the newest jquery version. I therefor need to update all the jquery plugins used by the Quattro theme. I also added the accordion stuff.

The problem is with the teaser slider at the top: the description div seems to be functioning perfectly, but the images are not. They only work if i select the fade fx and the next and prev buttons do not work.

Should i try to sort this out and if so, what seems to be the problem here? Or should i rather try to replace cycle with cycle2 and use the built-in overlays instead?

Here are the javascript includes:

Code: Select all

 <__script__ src="//code.jquery.com/jquery-1.11.0.min.js"></__script>
    
    {* jquery for accordian *}
    <__script__ type="text/javascript" src="{root_url}/uploads/jquery/jquery.easing.1.3.js"></__script> 
    <__script__ type="text/javascript" src="{root_url}/uploads/jquery/liteaccordion.jquery.min.js"></__script> 
   
    {* js for Navigation *}
    <__script__ type="text/javascript" src="{root_url}/uploads/jquery/hoverIntent.js"></__script>   
    <__script__ type="text/javascript" src="{root_url}/uploads/jquery/superfish.min.js"></__script> 
   
    {* cycle plugin for teaser slide and news scroller *}
    {if ($teaser == "+") or ($snews == "+")}
        <__script__ type="text/javascript" src="{root_url}/uploads/jquery/jquery.cycle.lite.min.js"></__script> 
    {/if}
    <__script__ type="text/javascript">
        {* jquery cycle plugin functions, get loaded only if header slider/teaser is activated, see http://malsup.com/jquery for more parameters *}
        {if $teaser == "+"}
            {literal}
            jQuery(function(){
                $('.teaser').cycle({ 
                    fx:     'fade',
                    speed:   600,
                    timeout: 10000,
                    next:   '#next',
                    prev:   '#prev'
                    }); 
                
                $('.description').cycle({ 
                    fx:     'fade', 
                    speed:   600, 
                    timeout: 10000, 
                    next:   '#next', 
                    prev:   '#prev'
                    }); 
            }); 
            {/literal} 
        {/if}
    </__script>  
  
    {* calling other functions for jQuery plugins used in template*}   
    <__script__ type="text/javascript" src="{root_url}/uploads/jquery/functions.js"></__script> 

[Dr.CSS]

The cycle JS you call is from late 2010 so most likely you will have to get the newer version or the cycle2 JS for it to work with jQuery 1.11.0...

[wmdvanzyl]

The cycle JS is the newest "lite" version on the site, so if that doesn't work then going cycle2 is the only option.

UPDATE: It worked!