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>
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.
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 trying to setup an elFinder window on my website. So I downloaded the latest release of from GitHub and followed it's instructions.
I included every file they asked for:
<!-- elFinder -->
<script type="text/javascript" src="../includes/elfinder/js/elfinder.min.js"></script>
<script type="text/javascript" src="../includes/elfinder/js/i18n/elfinder.nl.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.dialog.js"></script>
And I include this into my head-section as well:
<script type="text/javascript">
$().ready(function() {
var elf = $('#elfinder').elfinder({
lang: 'nl', // language (OPTIONAL)
url : '../includes/elfinder/php/connector.php' // connector URL (REQUIRED)
}).elfinder('instance');
});
</script>
But for some reason, all I get is this image:
But those files are, obviously, included... So I'm wondering what I'm doing wrong since I can't get my finger on the issue...
Why don't you combine the jQuery UI files into one?
Yes the order of includes does matter.
Here a working demo.
Here is the code
HTML
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://elfinder.org/demo/css/elfinder.min.css" />
</head>
<div id="elfinder"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script src="http://elfinder.org/demo/js/elfinder.min.js" ></script>
Javascript
$().ready(function() {
var f = $('#elfinder').elfinder({
url : '/connector'
}).elfinder('instance');
});
have you tried changing the order of inclusion?
<!-- elFinder -->
<script type="text/javascript" src="../includes/elfinder/js/elfinder.min.js"></script>
<script type="text/javascript" src="../includes/elfinder/js/i18n/elfinder.nl.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../includes/js/jquery-ui/development-bundle/ui/jquery.ui.dialog.js"></script>
Let me know ;)
<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>