我得到了joomla网站。。需要维护它。。这是我第一次和joomla一起工作。这是我需要添加滑块的模板。。我试图找到好的模块，但我在joomla上找不到任何好的滑块，所以我得到了滑块。我想在joomlatemplete上添加这个。我确实在我的本地机器上添加了这个，它工作得很好，但当我将这个代码添加到服务器时，它不工作，任何建议，即使我只是制作了自己的模式，它也不工作
这是滑动的代码
<div id="zf1" class="zoomflow">
<div class="items">
<div class="item-tobe" data-source="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/img/margalla.jpg">
<div style="" class="captionCon">
<div style=" padding-top: 10px;
padding-right: 59%;left: 0px; bottom: 10px; height:100px; width: 100%;" data-delay="" data-effect="slidebottom fade" class="caption bg-lightblue style_noir"><strong>Margalla Hill & National Park</strong> - Sponsored by The Dawood Foundation Click here to View<a rel="{handler: 'iframe', size: {x: 590, y: 440}}" href="http://player.vimeo.com/video/105872235?color=a8a8a8" class="films-play-btn-01 modal"> </a>
</div>
</div>
</div>
<div class="item-tobe" data-source="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/img/chitral.jpg">
<div style="" class="captionCon">
<div style=" padding-top: 10px;
padding-right: 59%;left: 0px; bottom: 10px; height:100px;width: 100%;" data-delay="" data-effect="slidebottom fade" class="caption bg-lightblue style_noir"><strong>Chitral Gol & National Park</strong> - Sponsored by The Dawood Foundation Click here to View<a rel="{handler: 'iframe', size: {x: 590, y: 440}}" href="http://player.vimeo.com/video/105873756?color=a8a8a8" class="films-play-btn-01 modal"> </a>
</div>
</div>
</div>
<div class="item-tobe" data-source="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/img/3.jpg">
<div style="" class="captionCon">
<div style="left: 0px; bottom: 10px; width: 100%;" data-delay="" data-effect="slidebottom fade" class="caption bg-lightblue style_noir"><strong>The Give Back Project</strong> - Sponsored by <a href="http://bit.ly/nM4R6u" target="_blank"> - </a>
</div>
</div>
</div>
<div class="item-tobe" data-source="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/img/1.jpg">
<div style="" class="captionCon">
<div style="left: 0px; bottom: 10px; width: 100%;" data-delay="" data-effect="slidebottom fade" class="caption bg-lightblue style_noir"><strong>The Give Back Project</strong> - Sponsored by <a href="http://bit.ly/nM4R6u" target="_blank"> - </a>
</div>
</div>
</div>
<div class="item-tobe" data-source="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/img/2.jpg">
<div style="" class="captionCon">
<div style="left: 0px; bottom: 10px; width: 100%;" data-delay="" data-effect="slidebottom fade" class="caption bg-lightblue style_noir"><strong>The Give Back Project</strong> - Sponsored by <a href="http://bit.ly/nM4R6u" target="_blank"> - </a>
</div>
</div>
</div>
</div>
<!-- Hide this for slider test
<div class="docu-thumbnails-wrapper">
<a href="https://vimeo.com/105873756" class="chitral-docu-link" target="_blank">Documentary Thumbnail</a>
</div>
<div class="docu-thumbnails-wrapper">
<a href="https://vimeo.com/105872235" class="margallah-docu-link" target="_blank">Documentary Thumbnail</a>
</div>
-->
</div>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/zoomflow/zoomflow.js" type="text/javascript"></script>
<script>
/*
jQuick(document).ready(function($){
jQuick(".zoomflow").zoomflow({
settings_slideshowTime:5
});
});
*/
jQuery(document).ready(function($){
jQuery("#zf1").zoomflow({
settings_slideshowTime:5
,design_padding:150
});
jQuery("#zf2").zoomflow({
settings_slideshowTime:5
,settings_mode:'only-two'
,design_padding:150
,design_ratio:"4:3"
});
jQuery("#zf-logos").zoomflow({
settings_slideshowTime:5
,design_padding:150
,design_ratio:"1:1"
});
});
</script>
这是模式的代码
<script>
$(document).ready(function() {
$(function() {
var html = '<div class="header-unit"><a class="boxclose" id="boxclose" onclick="closePopup()"></a><div id="video-container"><video autoplay loop class="fillWidth mute"><source src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/video/provdo.mp4" type="video/mp4"/>Your browser does not support the video tag. I suggest you upgrade your browser.</video></div><!-- end video-container --></div><!-- end .header-unit -->';
var docHeight = $(document).height();
$("body").append("<div id='overlay'>"+html+"</div>");
$("#overlay")
.height(docHeight)
.css({
'position': 'fixed',
'top': 0,
'left': 0,
'background-color': 'rgba(0, 0, 0, 0.9)',
'width': '100%',
'z-index': 5000
});
});
});
function closePopup(){
$(".mute").trigger("pause");
$('.mute').animate({
left: '50%',
top:'40%',
opacity: '0.5',
height: '10px',
width: '10px'
},500,function(){
$('#overlay').fadeOut('fast');
});
}
</script>
这两个代码在我的本地机器上运行良好，但在实时服务器上不工作我在实时服务器上收到这些错误和警告。。未捕获的类型错误：无法读取未定义的属性"0"
未捕获的类型错误：无法读取未定义的属性"replace"
警告：ScrollMagic的网络资源无效。请使用'http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.debug.js"！
Joomla以noconflict模式加载jquery。
您必须将代码更改为：
jQuery(document).ready(function() {
jQuery(function() {
var html = '<div class="header-unit"><a class="boxclose" id="boxclose" onclick="closePopup()"></a><div id="video-container"><video autoplay loop class="fillWidth mute"><source src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/video/provdo.mp4" type="video/mp4"/>Your browser does not support the video tag. I suggest you upgrade your browser.</video></div><!-- end video-container --></div><!-- end .header-unit -->';
var docHeight = jQuery(document).height();
jQuery("body").append("<div id='overlay'>"+html+"</div>");
jQuery("#overlay")
.height(docHeight)
.css({
'position': 'fixed',
'top': 0,
'left': 0,
'background-color': 'rgba(0, 0, 0, 0.9)',
'width': '100%',
'z-index': 5000
});
});
});
function closePopup(){
jQuery(".mute").trigger("pause");
jQuery('.mute').animate({
left: '50%',
top:'40%',
opacity: '0.5',
height: '10px',
width: '10px'
},500,function(){
jQuery('#overlay').fadeOut('fast');
});
}
参考：jQuery.noConflict（）