I have a wordpress plugin lightbox2 and a news scroller on my page.
My head section looks like this
<script type="text/javascript" src="wp-content/themes/soundsright/menu.js"></script>
<script type='text/javascript' src='wp-includes/js/prototype.js?ver=1.6'></script>
<script type='text/javascript' src='wp-includes/js/scriptaculous/wp-scriptaculous.js?ver=1.8.0'></script>
<script type='text/javascript' src='wp-includes/js/scriptaculous/effects.js?ver=1.8.0'></script>
<script type='text/javascript' src='wp-content/plugins/lightbox-2/lightbox.js?ver=1.8'></script>
<script type='text/javascript' src='wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
<!-- begin lightbox scripts -->
<script type="text/javascript">
//<![CDATA[
document.write('<link rel="stylesheet" href="wp-content/plugins/lightbox-2/Themes/Grey/lightbox.css" type="text/css" media="screen" />');
//]]>
</script>
<!-- end lightbox scripts -->
<!-- SwfObj Plugin version SWFOBJ_VERSION -->
<script type="text/javascript" src="wp-content/plugins/swfobj/swfobject.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/soundsright/liscroll.js"></script>
<script type="text/javascript">
$(function(){
$("ul#ticker01").liScroll({travelocity: 0.03});
});
</script>
As it is now, the news scroller works but not the lightbox plugin. When I remove
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
then the lightbox works but not the news scroller.
I thought removing this jQuery refrence would have solved the problem cause wordpress already loads the same version of jQuery in this line
<script type='text/javascript' src='wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
Any ideas what I'm doing wrong here?
I think this will be because of the function()
clashing, we had something similar recently; you need to more precisely match it to jQuery (basically the $ reference will be owned by prototype or one of the other javascripts so you replace it with jQuery) eg
jQuery(function(){
jQuery("ul#ticker01").liScroll({travelocity: 0.03});
});
$ is used by both Prototype and jQuery:
Since both JQuery and Prototype use $ sign, use Jquery in non conflict mode
jQuery.noConflict();
JQuery(function(){
JQuery("ul#ticker01").liScroll({travelocity: 0.03});
});
and use $ for Prototype
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.