JavaScript不工作在Joomla文章

Question

我想实现这个（dannyvankooten点com/jquery插件/ mapz /）图像平移脚本到Joomla文章。我在Joomla外测试了它（http://tylypahka.tk/karttatesting/），它的工作完美。但是，当我在Joomla文章中尝试时，平移不起作用（http://tylypahka.tk/kartta）。

我把完全相同的代码放到Joomla模板的头，我已在测试版本：

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script> 
<script src="https://jquery-ui.googlecode.com/svn-history/r2596/branches/dev/spinner/external/mousewheel/jquery.mousewheel.min.js" type="text/javascript" ></script> 
<script src="http://tylypahka.tk/js/jquery.mapz.js" type="text/javascript"></script> 
<script type="text/javascript" src="http://tylypahka.tk/js/jquery.maphilight.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#map").mapz({ 
    zoom : true, 
    createmaps : true, 
    mousewheel : true 
    }); 
}); 
</script> 
<script type="text/javascript">$(function() { 
     $('.map').maphilight(); 
     $('#squidheadlink').mouseover(function(e) { 
      $('#squidhead').mouseover(); 
     }).mouseout(function(e) { 
      $('#squidhead').mouseout(); 
     }).click(function(e) { e.preventDefault(); }); 
    });</script> 
<style> 
.map-viewport{ position:relative; width:860px; height:883px; overflow:hidden; background-color:black;} 
.level{ position:absolute; left:0; top:0; z-index:10;} 
.current-level{ z-index:20; } 
#map{ width:1297px; height:883px; position:absolute; left:0; top:0; cursor:move;} 
</style> 

而且完全相同的代码的文章：

<div class="map-viewport"> 
    <div id="map"> 
    <img src="http://img42.imageshack.us/img42/8954/tylypahkanportit.png" width="1297" height="883" usemap="#html-map" class="current-level level map" /> 
    </div> 
    <map name="html-map"> 
    <area id="squidhead" shape="rect" coords="311,494,434,634" href="http://www.image-maps.com/" alt="" title=""/> 
    </map> 
</div> 

jQuery的自动加载中的Joomla现场，所以它不应该是问题。任何想法我在这里做错了吗？

所有建议和帮助将非常感谢！

Answer 1

您正在使用$这是jQuery的简写代码，但的Joomla还加载MooTools的，被分配的非常相同的选择器：所以只需将所有$（）更改为jquery（），并且您应该能够正常工作。您只需要在外层执行此操作，然后将$作为参数传递：

jQuery(function($){ 
    // inside this handler you can use the $ since you passed it as a parameter to the function: 
    // btw, this is nicer than jQuery(document).ready... 
    $('#someid').show(); 
}); 

Answer 2

这将是最好的包括使用Joomla编码标准的头脑中的代码也检查它尚未被导入，因为这将导致冲突。

因此，首先，下载Sourcerer，这将允许您添加代码到您的文章。

然后，添加以下使用源码人员：

$document = JFactory::getDocument(); 
if(!JFactory::getApplication()->get('jqueryui')){ 
    JFactory::getApplication()->set('jqueryui',true); 
    $document->addScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"); 
} 
$document->addScript("https://jquery-ui.googlecode.com/svn-history/r2596/branches/dev/spinner/external/mousewheel/jquery.mousewheel.min.js"); 
$document->addScript("http://tylypahka.tk/js/jquery.mapz.js"); 
$document->addScript("http://tylypahka.tk/js/jquery.maphilight.js"); 
$document->addScriptDeclaration(' 
$(document).ready(function() { 
    $("#map").mapz({ 
    zoom : true, 
    createmaps : true, 
    mousewheel : true 
    }); 
}); 
'); 
$document->addScriptDeclaration(' 
$(function() { 
     $('.map').maphilight(); 
     $('#squidheadlink').mouseover(function(e) { 
      $('#squidhead').mouseover(); 
     }).mouseout(function(e) { 
      $('#squidhead').mouseout(); 
     }).click(function(e) { e.preventDefault(); }); 
    }); 
'); 

$document->addStyleDeclaration(.map-viewport { position:relative; width:860px; height:883px; overflow:hidden; background-color:black;} 
.level{ position:absolute; left:0; top:0; z-index:10;} 
.current-level{ z-index:20; } 
#map{ width:1297px; height:883px; position:absolute; left:0; top:0; cursor:move;}); 

希望这个作品，并帮助