<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen"/>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#previous'
});
});
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen"/>
<script type="text/javascript">
$(function() {
$('a. lightbox').lightBox();
});
</script>
</script>
The problem: When i use the code in separate files files, it works just fine, but when i add the lightbox to the carousel script or vice versa. Both of them stop working.
I just started using jQuery and plugins. Ran into a problem and i don't quite know how to fix it, or whats wrong. I want to have a carousel and a lightbox in my website, but whenever i add the script, it goes, it stops working.
Got the source files for the lightbox from http://leandrovieira.com/projects/jquery/lightbox/ and the jquery library from the jquery website. for both the carousel and the lightbox.
Reply will be much appreciated.
Now the lightbox only works but not the carousel
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen"/>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#previous'
// choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
<script type="text/javascript" src="js/jquery.js"></script><script
type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen"/>
<script type="text/javascript">
$(function() {
$('a.lightbox').lightBox();
});
</script>
Related
I have got this html div
<div id="CropToolDiv"></div>
And this Jquery
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#CropToolDiv').draggable();
$('#CropToolDiv').resizable();
});
</script>
But it gives an error
$(...).draggable is not a function
What am i doing wrong?
Put your code
<script type="text/javascript">
$(document).ready(function() {
$('#CropToolDiv').draggable();
$('#CropToolDiv').resizable();
});
</script>
At the bottom of the page.. See -- It works here
FIDDLE
Could you please help me sort the issue out.
After inserting datepicker code, now my imageslider does not appear. All i see is a white space.
I think some javascripts are conflicting ?
But cannot find out which one.
Please help me.
<script type="text/javascript" src="js/jquery.min.js" ></script>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<script type="text/javascript" src="jquery.1.4.2.js"></script>
<script type="text/javascript" src="jsDatePick.jquery.min.1.3.js"></script>
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"inputField",
dateFormat:"%d-%M-%Y"
});
new JsDatePick({
useMode:2,
target:"inputField2",
dateFormat:"%d-%M-%Y"
});
};
</script>
<script src="js/jquery.jcarousel.min.js"></script>
<script src="layerslider/jQuery/jquery-easing-1.3.js" type="text/javascript"></script>
<script src="layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#layerslider').layerSlider({
skinsPath : 'layerslider/skins/',
skin : 'florida',
navStartStop : false,
thumbnailNavigation : 'hover',
hoverPrevNext : true,
responsive : true,
responsiveUnder : 1200,
thumbnailNavigation : false,
sublayerContainer : 1200
});
});
</script>
<script type="text/javascript" src="js/doubletaptogo.js" ></script>
<script defer src="js/jquery.flexslider-min.js"></script>
First of all, write some neat code and check it.
script type="text/javascript" src="js/doubletaptogo.js" ></script>
Should be:
<script type="text/javascript" src="js/doubletaptogo.js" ></script>
Then, when i look at your HTML, it looks like you are loading jQuery twice? And always load your stylesheets first, you can read this topic why: Is the recommendation to include CSS before JavaScript invalid?
Also, check if the plugins you are using, are compatible with jQuery 1.4.2 it is possible they are using some things that jQuery 1.4.2 doesn't offer.
I have a problem when I using slider and nivo lightbox together in one php file.
Ok, I have this code:
<script type="text/javascript" src="js/slider/jquerySlider.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.mobile.customized.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/slider/camera.min.js"></script>
<script>
jQuery(function(){
jQuery('#camera_wrap_1').camera({
thumbnails: false,
loader: 'bar',
pagination: false,
height: '300px',
});
});
</script>
<!--Nivo LightBox-->
<link rel="stylesheet" href="css/nivo-lightbox.css" type="text/css" />
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<script type="text/javascript" src="js/nivoLightbox/jquery.min.js"></script>
<script type="text/javascript" src="js/nivoLightbox/nivo-lightbox.min.js"></script>
<script>
$(document).ready(function(){
$('a').nivoLightbox();
});
</script>
Now it's working only Nivo Lightbox, slider doesn't work. If I delete row with
src="js/nivoLightbox/jquery.min.js, slider now working and the lightbox doesn't.
I think that jQuerySlider.min.js is another version of jquery.min.js. In general, all two scripts are some versions of jQuery library. When I both delete and replaced it one, the newest, it still doesn't work.
Please can anyone rewrite this code to working solution?
you can find your solution below..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.mobile.customized.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/slider/camera.min.js"></script>
<!--Nivo LightBox-->
<link rel="stylesheet" href="css/nivo-lightbox.css" type="text/css" />
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<script type="text/javascript" src="js/nivoLightbox/nivo-lightbox.min.js"></script>
<script>
$(document).ready(function(){
$('#camera_wrap_1').camera({
thumbnails: false,
loader: 'bar',
pagination: false,
height: '300px',
});
$('a').nivoLightbox();
});
</script>
Please, I need some help with this.
This is the code piece that is failing
<!-- Begin Photofolio library -->
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery-photostack.js"></script>
<script type="text/javascript" src="scripts/jquery-coin-slider.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#portfolioslider').coinslider({
width: 480,
height: 280,
navigation: false,
links: false,
hoverPause: true
});
$("#tabcontainer").tabs({
event: "click"
});
});
</script>
<!-- End Photofolio -->
<!-- Begin REDX -->
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="themes/orman/orman.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
And when I load the page, it shows me this error:
TypeError: $(...).coinslider is not a function
I have tried to use "jQuery" identifier, but it didn't work. I don't know if I did ir right, since I just replaced all "$" with "jQuery" and didn't do more than that.
What is wrong in my code?
Regards
When you use two different versions of jquery (which is not recommended), you can use jQuery.noConflict api.jquery.com/jQuery.noConflict/
I would suggest to check your src="scripts/jquery-coin-slider.min.js" to check what function makes it work. Maybe .coinslider is not inside that js file.
I'm using this basic template with a slider in the home but when I add a simple fancybox script for a single image, the fancybox doesn't work.
What of these js is overlapping fancybox?
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.cycle.all.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/lib/jquery.mousewheel.pack.js?v=3.1.3"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="/source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.mp-slider').cycle({
pager: '#mp-pags',
timeout:7000,
pagerAnchorBuilder: pagerFactory
});
function pagerFactory(index, slide) {
var titles = []
titles[0] = $("#mp-pags-cont li:eq(0)").text()
titles[1] = $("#mp-pags-cont li:eq(1)").text()
titles[2] = $("#mp-pags-cont li:eq(2)").text()
return '<li>'+(titles[index])+'</li>';
};
$(document).ready(function() {
$(".fancybox").fancybox();
});
});
</script>
Best way to find out with something like this is to comment out one script at a time until you find the one causing the issue. Then you can look more closely at that script and figure out where the conflict is.
pagerAnchorBuilder: pagerFactory
may be problematic. don't you want to call:
pagerAnchorBuilder: pagerFactory(a,b)
with parameters?