Question

我试图在我的Joomla 2.5网站中使用jQuery来交换2张图片。我可以在静态html页面中使用它，但不能在Joomla中使用它，这是我在Joomla中尝试使用的内容：http://www.ssdtutorials.com/tutorials/title/change-image-click.html 非常感谢有人的帮助，这是我的代码;

<div id="wrapper">

<div id="imageContainer">
<img src="templates/horme2/images/image1.jpg" alt="01" 
width="399" height="299" class="active" />
<img src="templates/horme2/images/image2.jpg" alt="01" 
width="399" height="299" />

 </div>

</div>



* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
 }
body {
 text-align: center;
 font-family: Arial, Verdana, Sans-serif;
 font-size: 12px;
padding: 30px 0;    
}
body,a {
color: #333;
}
#wrapper {
 width: 280px;
margin: 0 auto;
}
#imageContainer {
 width: 280px;
 height: 280px;
 position: relative;
overflow: hidden;
background: #eee;
}
#imageContainer img {
 position: absolute;
 top: 0;
 left: 0;
z-index: 1;
}
#imageContainer img.active {
z-index: 3;
}

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script type="text/javascript">

var imageObject = {
clickSwap : function(obj) {
    obj.click(function() {
        var activeImage = $(this).children('img.active');
        activeImage.removeClass('active');
        if (activeImage.next().length > 0) {
            activeImage.next().addClass('active');
        } else {
            $(this).children('img:first-child').addClass('active');
        }
        return false;
    });
}
};
$(function() {
imageObject.clickSwap($('#imageContainer'));
});

Answer 1

我认为，您应该将代码放在标题部分。

这可以通过两种方式完成：

在你的index.php中，将代码放在标题中。
如果代码属于特定扩展名：

：一种。内联示例：

<?php
$document = JFactory::getDocument();
$document->addScriptDeclaration('
    window.event("domready", function() {
        alert("An inline JavaScript Declaration");
    });
');
?>

<强> B中。文件示例：

<?php
$document = JFactory::getDocument();
$document->addScript('/media/system/js/sample.js');
?>

代码来源 - 更多信息：http://docs.joomla.org/Adding_JavaScript

jquery在Joomla 2.5中无效

1 个答案: