I have three items on my web site using two different versions of jquery. I have tried using no conflict, I don't completely understand the code though so everything I've tried hasn't worked and I know I'm probably missing something or adding something wrong. I'm running a slider, photo gallery and mobile(responsive) nav. I have version 1.10.1 for the gallery and slider but once I add 1.7.2 with the correct script, the nav works but the other two plugins do not.
<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<!--photo gallery js-->
<script src="js/vendor/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8">
</script>
<!--boiler plate js-->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script type='text/javascript' src='js/vendor/jquery.min.js'></script>
<script type='text/javascript' src='js/vendor/jquery.mobile.customized.min.js'></script>
<!--slider js-->
<script type='text/javascript' src='js/vendor/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='js/vendor/camera.min.js'></script>
<!--mobile nav js-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/vendor/jquery.mmenu.js"></script>
<!--mobile nav script-->
<script type="text/javascript">
$(function() {
$('nav#menu').mmenu({
slidingSubmenus: false
});
});
</script>
<!--slider script-->
<script>
jQuery(function() {
jQuery('#camera_wrap_1').camera({
thumbnails: true,
loader: 'none',
playPause: false,
navigation: false,
fx: 'scrollLeft',
time: 1500
});
});
</script>
Related
Lightslider Jquery Code and mootols not working together if i remove jquery api code, so mootools working otherwise if i put jquery api code so then lightslider working (it is using jquery) but mootools not work then.
Mootools
<script language="javascript" type="text/javascript" src="/script/mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="/script/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="/script/slideitmoo-1.1.js"></script>
<script language="javascript" type="text/javascript">
window.addEvents({
'domready': function(){
/* thumbnails example , div containers */
new SlideItMoo({
overallContainer: 'SlideItMoo_outer',
elementScrolled: 'SlideItMoo_inner',
thumbsContainer: 'SlideItMoo_items',
itemsVisible: 5,
elemsSlide: 2,
duration: 150,
itemsSelector: '.SlideItMoo_element',
itemWidth: 158,
showControls:1});
},
});
</script>
Lightslider
<link rel="stylesheet" type="text/css" href="/stylesheet/lightslider.css" />
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src="/script/lightslider.js"></script>
<script>
$(document).ready(function() {
jQuery("#content-slider").lightSlider({
loop:true,
auto: true,
keyPress:true
});
});
</script>
I got my solution i was trying myself then it is working.
Just need to change two things one api link location 2nd $ will be jQuery
Like this
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script language="javascript" type="text/javascript" src="/script/mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="/script/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="/script/slideitmoo-1.1.js"></script>
<script language="javascript" type="text/javascript">
window.addEvents({
'domready': function(){
/* thumbnails example , div containers */
new SlideItMoo({
overallContainer: 'SlideItMoo_outer',
elementScrolled: 'SlideItMoo_inner',
thumbsContainer: 'SlideItMoo_items',
itemsVisible: 5,
elemsSlide: 2,
duration: 150,
itemsSelector: '.SlideItMoo_element',
itemWidth: 158,
showControls:1});
},
});
</script>
<link rel="stylesheet" type="text/css" href="/stylesheet/lightslider.css" />
<script src="/script/lightslider.js"></script>
<script>
jQuery(document).ready(function() {
jQuery("#content-slider").lightSlider({
loop:true,
auto: true,
keyPress:true
});
});
</script>
I need to have a jquery countdown, carousal and responsive menu on my site, but can't get all of them to work together.. I have tried using the google libraries but then one, two or all of the scripts stop working all together.
Here is the code without the noconflict as it was not working...
<script type="text/javascript" src="/Includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/Includes/jquery.jcarousel.min.js"> </script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
<script type="text/javascript" src="/Includes/Resp_Menu_Files/js/jquery-1.10.1.min.js"> </script>
<script type="text/javascript" src="/Includes/Resp_Menu_Files/js/orion-menu.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery().orion({
speed: 500
});
});
</script>
Any suggestions?
<script type="text/javascript" src="/Includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/Includes/jquery.jcarousel.min.js"> </script>
<script type="text/javascript">
jq142 = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="/Includes/Resp_Menu_Files/js/jquery-1.10.1.min.js"> </script>
<script type="text/javascript" src="/Includes/Resp_Menu_Files/js/orion-menu.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jq142('#mycarousel').jcarousel();
jQuery().orion({
speed: 500
});
});
</script>
How can the two will run?.If I put first the datepicker the bxslider will not run and if the bxslider I put first the datepicker wil not run..thanks..
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function(){
$( "#datepicker" ).datepicker();
$("#icon").click(function() {
$("#datepicker").datepicker( "show" );
})
});
</script>
<!-- bxslider -->
<link href="bxslider/jquery.bxslider.css" rel="stylesheet" />
<script src="bxslider/jquery.js"></script>
<!-- bxSlider Javascript file -->
<script src="bxslider/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
});
});
</script>
How can the two will run?.If I put first the datepicker the bxslider will not run and if the bxslider I put first the datepicker wil not run..thanks..
You're including jQuery twice. Don't do that; including jQuery a second time will overwrite the jQuery object and any plugins that have been attached to it. Include jQuery only once and then include your plugins.
<head>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css" />
</head>
<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
$('.datepicker').datepicker({
showOn: 'button',
buttonImage: 'images/dp.png',
buttonImageOnly: true,
});
});
</script>
</body>
I was able to set shadowbox to initailize upon page load to show a photo, but I need it to show a bunch of photos, and after looking at the shadowbox site, I cannot find how to do this.
html for page:
<link rel="stylesheet" type="text/css" href="C:\Users\Jason\sitebuilder\sites\UltimateFinishAutoDetailing\files\shadowbox-3.0.3/shadowbox.css">
<script type="text/javascript" src="C:\Users\Jason\sitebuilder\sites\UltimateFinishAutoDetailing\files\shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<script type="text/javascript">
Shadowbox.init({
skipSetup: true
});
window.onload = function() {
Shadowbox.open({
content:'images/IMG00255-20110531-1435.jpg',
player: "img",
title: "Before and After- Hyundai Tiburon",
height: 400,
width: 700
});
};
</script>
I couldn't find a way to do it with shadowboxes built in functions but this is pretty simple and should work fine.
<!DOCTYPE html>
<html>
<head>
<title>Shadowbox</title>
</head>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<style type="text/css">
/* Hide all <a> tags */
a[rel~="shadowbox"]{
display: none;
}
</style>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<!-- on page load, fake a click to call shadowbox -->
<body onload="document.getElementById('first').click();">
<!-- put all gallery items like this. Only the first link needs the id "first". -->
</body>
</html>
hi friends my time picker is not working please some one help me
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"> </script>
<script type="text/javascript" src="../src/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.time').each(function () {
$('.time').timepicker({
hourGrid: 4,
minuteGrid: 10,
timeFormat: 'hh:mm tt'
});
});
});
You need to add timepicker library in your html
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js">
</script>
<!-- Add this script tag -->
<script type="text/javascript" src="[timepicker_LOCATION]/jquery-ui-timepicker-addon.js">
</script>
https://github.com/trentrichardson/jQuery-Timepicker-Addon
Note: Also there is no need to loop through to each .time class
Remove the loop
$('.time').each(function ()