some joomla modules not working with different jquery versions conflicts in my custom template, how to solve it?

StackOverflow https://stackoverflow.com/questions/22483330

Question

i have designed joomla 3 custom template with zurb foundation framework, i think due to jquery conflicts some modules is working with latest and even light box gallery not working at all even with jquery noconflict code.

this is my custom template index.php data

?php /**  * @copyright  Copyright (C) 2013 Enter Infolabs - All Rights Reserved. **/
defined( '_JEXEC' ) or die( 'Restricted access' ); 
define( 'YOURBASEPATH', dirname(__FILE__) );

JHtml::_('behavior.framework', true);
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$doc->addScript('templates/' .$this->template. '/js/vendor/jquery.js');

$rightcolgrid  = "3";
?>
<!doctype html>
<html class="no-js" xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<jdoc:include type="head" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="icon" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/favicon.ico" type="image/png">
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css"/>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/foundation.css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/style.css" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Bubbler+One|Maven+Pro' 

rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/foundation-icons.css" />  
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
baseurl ?>/templates/template ?>/js/jquery-noconflict.js"> 
    <!--

      [if IE]><link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/ie.css" media="screen, projection" /><![endif]-->  

    </head>

    <body>

-------------------
----------------
-----------------

<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/foundation/foundation.topbar.js"></script>


    <script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/foundation.min.js"></script>    

<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/vendor/jquery.js"></script>
baseurl ?>/templates/template ?>/js/jquery-noconflict.js"> 
    <script>
      $(document).foundation();
    </script>
</body>
</html>

Can any solve the issue pls.

Was it helpful?

Solution

Besides ensuring you only load jQuery once (as @Lodder pointed out) you have a noConflict() call, that will un-assign the $ shorthand. This will make the

$(document).foundation()

fail. You should replace it with

jQuery(document).foundation()

Have you looked at siegeengine's port of foundation for Joomla? It could save you some headaches; while it has the same issue with noConflict and invoking foundation with the shorthand $, it might help.

Also, why not load the jQuery off a CDN?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top