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;}); 

希望這個作品，並幫助