Javascript не работает в статье Joomla

Я пытаюсь внедрить этот (dannyvankooten dot com/jquery-plugins/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, так что это не должно быть проблемой. Любые идеи, что я делаю неправильно здесь?

Все предложения и помощь будут высоко оценены!


javascript image joomla panning
person Ilari    schedule 02.03.2013    source источник
comment
проверьте, действительно ли ваш шаблон загружает jQuery, а не MooTools. MooTools также использует имя функции $(), что может привести к тому, что ваш код перестанет работать.   -  person Hazzit    schedule 02.03.2013
comment
Да, он загружает jQuery. Я вообще не использую MooTools на своем сайте, но спасибо :)   -  person Ilari    schedule 02.03.2013
comment
Тот факт, что вы не используете MooTools, не означает, что он не загружен, и по умолчанию он не позволит вам использовать jQuery с $. Проверьте консоль ошибок в firebug   -  person Marko D    schedule 02.03.2013
comment
Спасибо, попробую избавиться от загрузки MooTools, когда это не нужно   -  person Ilari    schedule 03.03.2013

Ответы (2)


arrow_upward
3
arrow_downward

Вы используете $, который является сокращенным кодом для 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();
});
person Riccardo Zorn    schedule 02.03.2013

arrow_upward
0
arrow_downward

Было бы лучше включить код в голову, используя стандарты кодирования Joomla, а также проверить, что он еще не был импортирован, так как это вызовет конфликты.

Итак, во-первых, скачайте Sourcerer, который позволит вам добавлять код в свои статьи.

Затем добавьте следующее с помощью 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;});

Надеюсь, это работает и помогает

person Lodder    schedule 02.03.2013
comment
Спасибо за ответ, но результат тот же. Похоже, Javascript по какой-то причине не видит, что есть div с именем map. Кроме того, стиль не применялся, если он был установлен с помощью Javascript. Так что явно что-то не так с Javascript и Joomla. - person Ilari; 02.03.2013