[英]Jquery tabs conflicting with revolution slider
I am trying to create a page containing revolution slider and a tabs script. 我正在尝试创建一个包含革命滑块和制表符脚本的页面。
You can find the page here: http://lovebomb.nl/dating 你可以在这里找到这个页面: http : //lovebomb.nl/dating
But somehow the scripts are conflicting with one another. 但不知何故,脚本彼此冲突。
This part of the revolution slider: 这部分旋转滑块:
var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function() {
if (tpj.fn.cssOriginal!=undefined)
tpj.fn.css = tpj.fn.cssOriginal;
tpj('.fullwidthbanner').revolution(
{
delay:9000,
startwidth:1024,
startheight:616,
onHoverStop:"on", // Stop Banner Timet at Hover on Slide on/off
thumbWidth:100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight:50,
thumbAmount:3,
navigationStyle:"round", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
navigationHAlign:"center", // Vertical Align top,center,bottom
navigationVAlign:"top", // Horizontal Align left,center,right
navigationHOffset:0,
navigationVOffset:20,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:0,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,
touchenabled:"off", // Enable Swipe Function : on/off
stopAtSlide:1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
stopAfterLoops:0, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
hideCaptionAtLimit:0, // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
hideAllCaptionAtLilmit:0, // Hide all The Captions if Width of Browser is less then this value
hideSliderAtLimit:0, // Hide the whole slider, and stop also functions if Width of Browser is less than this value
fullWidth:"on",
shadow:0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
});
});
Seems to be conflicting with this part of the tabs script: 似乎与标签脚本的这一部分冲突:
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
These scripts are combined in one JS file which can be found here: http://lovebomb.nl/dating/tabs.js 这些脚本组合在一个JS文件中,可以在这里找到: http : //lovebomb.nl/dating/tabs.js
I used this site as a base for the tabs script: http://www.snelgeldonlineverdienen.nl/ 我使用这个站点作为标签脚本的基础: http : //www.snelgeldonlineverdienen.nl/
The only difference is the jquery and the jquery UI version. 唯一的区别是jquery和jquery UI版本。 If I use the version of jquery of this page, the revolution slider does not work anymore.
如果我使用此页面的jquery版本,则旋转滑块不再起作用。
I am already trying to fix the tabs for about 4 hours. 我已经尝试将标签修复大约4个小时。
Really could use some help. 真的可以使用一些帮助。
Thanks in advance :) 提前致谢 :)
Luuk Luuk
At the beginning of tabs.js we have the declaration: 在tabs.js的开头我们有声明:
var tpj=jQuery;
tpj.noConflict();
this sets the variable tpj to the jQuery object, and then puts jQuery into noConflict() : 这将变量tpj设置为jQuery对象,然后将jQuery放入noConflict() :
"Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $ . If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict() ."
“许多JavaScript库使用$作为函数或变量名,就像jQuery一样。在jQuery的情况下,$只是jQuery的别名,因此所有功能都可以在不使用$的情况下使用。如果你需要在jQuery旁边使用另一个JavaScript库,通过调用$ .noConflict()将$返回到其他库的控制权。“
Now that jQuery is in no conflict mode you can no longer use the $ to access jQuery. 既然jQuery没有冲突模式,你就不能再使用$来访问jQuery了。 So when we run the code at the bottom of tabs.js:
所以当我们运行tabs.js底部的代码时:
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
We get the error 我们得到了错误
"Uncaught TypeError: Property '$' of object [object Object] is not a function"
“未捕获的TypeError:对象[对象对象]的属性'$'不是函数”
because $ no longer references jQuery . 因为$不再引用jQuery 。 To access jQuery we must use jQuery or tpj
要访问jQuery,我们必须使用jQuery或tpj
if we alter the tabs.js changing $ to either jQuery or tpj 如果我们改变tabs.js将$更改为 jQuery或tpj
tpj(document).ready(function(){
tpj('#tabs div').hide();
tpj('#tabs div:first').show();
tpj('#tabs ul li:first').addClass('active');
tpj('#tabs ul li a').click(function(){
tpj('#tabs ul li').removeClass('active');
tpj(this).parent().addClass('active');
var currentTab = tpj(this).attr('href');
tpj('#tabs div').hide();
tpj(currentTab).show();
return false;
});
});
the code should execute correctly. 代码应该正确执行。
Use Latest jQuery library Version( 1.7.1 +) and Try to modify above code to following and combine both to single file in init.js and place at bottom of all *.js files included in a page. 使用最新的jQuery库版本(1.7.1 +)并尝试修改上面的代码以跟随并将它们组合到init.js中的单个文件中,并放置在页面中包含的所有* .js文件的底部。
jQuery(document).ready(function() {
if (jQuery.fn.cssOriginal!=undefined)
jQuery.fn.css = jQuery.fn.cssOriginal;
jQuery('.fullwidthbanner').revolution({
delay:9000,
startwidth:1024,
startheight:616,
onHoverStop:"on", // Stop Banner Timet at Hover on Slide on/off
thumbWidth:100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight:50,
thumbAmount:3,
navigationStyle:"round", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
navigationHAlign:"center", // Vertical Align top,center,bottom
navigationVAlign:"top", // Horizontal Align left,center,right
navigationHOffset:0,
navigationVOffset:20,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:0,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,
touchenabled:"off", // Enable Swipe Function : on/off
stopAtSlide:1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
stopAfterLoops:0, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
hideCaptionAtLimit:0, // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
hideAllCaptionAtLilmit:0, // Hide all The Captions if Width of Browser is less then this value
hideSliderAtLimit:0, // Hide the whole slider, and stop also functions if Width of Browser is less than this value
fullWidth:"on",
shadow:0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
});
});
jQuery(document).ready(function(){
jQuery('#tabs div').hide();
jQuery('#tabs div:first').show();
jQuery('#tabs ul li:first').addClass('active');
jQuery('#tabs ul li a').click(function(){
jQuery('#tabs ul li').removeClass('active');
jQuery(this).parent().addClass('active');
var currentTab = jQuery(this).attr('href');
jQuery('#tabs div').hide();
jQuery(currentTab).show();
return false;
});
});
Came across this issue while getting a canned html/css/js landing page template to work on Meteor. 在获取罐装html / css / js登陆页面模板以在Meteor上工作时遇到此问题。 In my case removing the jquery-1.11.1.min.js and jquery-1.11.1.min.map files from the solution fixed the problem because I already have the latest version installed as a package.
在我的情况下,从解决方案中删除jquery-1.11.1.min.js和jquery-1.11.1.min.map文件修复了问题,因为我已经安装了最新版本的软件包。 Hope this helps a solution searcher in the future.
希望这有助于未来的解决方案搜索者。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.