Javascript Lightbox 2 Issue - javascript

I'm quite new at this, so please be thorough with the explanation.
I'm using the Lightbox 2 jQuery file, along with another jQuery file to execute a menu slide animation and a fade animation on my images.
I'm assuming that there is conflict between the two jQuery files, but I'm not sure how to resolve it.
Any advice? I read something about jQuery.noConflict(), but I'm not sure how to implement it, or it if will work.
<script src="../Scripts/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div#ScrollBox img').animate({
opacity:.5
});
$('div#ScrollBox img').hover(function(){
$(this).stop().animate({opacity:1}, 'fast');
}, function(){
$(this).stop().animate({opacity:.5}, 'slow');
});
});
</script>
<!--LIGHTBOX-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />

It looks like you are loading two different jQuery versions (1.10.2 and 2.0.2), which is, I believe, causing the problem. I would recommend removing the 1.10.2 jQuery script, and one of the following (in order of effort, in case you want to try all 3):
-see if your lightbox plugin still works
-find a newer version of the same lightbox
-use a different lightbox, for example fancybox
In any case, make sure that your end result only has one version of jQuery being loaded.

Is there a reason you need both? They should have pretty much the same code so you only need to include one. I would use whichever is the latest.
It would help if you included in your post the lines of code where you explicitly add them so we can see what you are doing.

Related

Conflict Preventing Background Video from Showing

On my site http://tsawebmaster1.hhstsa.com/drones/index.html, I have a background video that is supposed to show using the bigvideo.js plugin. For some reason it is not showing. How can this be solved?
I believe this has something to do with multiple jquery files overriding each other. Is this possible and the issue?
Open up your console. You can see the following error:
document.getElementByTagName is not a function
You are missing an 's'
the correct method is:
var elements = document.getElementsByTagName(name);
Pic
Yes, you can use Jquery No Conflict as follow:
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>

Jquery div fadeIn on load not working

I just have a Div ".text" that i want to fade in on a subdomain page… I googled on stackoverflow and came up with this:
<script type='text/javascript'>
$(function(){ // $(document).ready shorthand
$('.text').hide().fadeIn('400');
});
</script>
The CSS is just font styling… I even tried it before with a display:none; and without the .hide() but somehow it does not work… I load this jQuery:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
Do I need another one? Or do I need to name the subdomain in the script? I wanted to put the script in my index.php file… I just can not explain it to myself…
Load the script file next to including the Jquery plugin.
Since there is no fault in your code.
This may be the problem.
I think because you are feeding in fadeIn('400') 400 is an int value not a string. Try using
fadeIn(1600)
and you might see a more noticeable fade effect.

Programmatically create dropzone instance with jQuery not working?

I have a bit of an issue with getting Dropzone to work with jQuery. I was wondering if anyone could help.
I've tried both jQuery version 1.11.1 and 2.1.1 and neither seems to work. I've made it to work with straightforward Javascript but, I was planning on doing some major scripting and want dropzone to work with jQuery to save a few variables from being created to transfer data.
The Dropzone documentation mentions a jQuery plugin. But, I can't find it anywhere in the source and it's only mentioned here:
http://www.dropzonejs.com/#toc_4
With no information as to where it actually is.
I'm planning on using Dropzone with a div rather than a form and with no server code involved. It's a static one-off-use web page. For the time being I'm just following the documentation.
Here's some of my code:
HTML
<link href="css/dropzone.css" type="text/css" rel="stylesheet" />
<script src="dropzone.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
</head>
<body>
<div id="dropthat" class="dropzone"></div>
<script src="script.js"></script>
jQuery
$(document).ready(function() {
$("div#dropthat").dropzone({ url: "/file/post" });
//Below is my older, working Javascript code, still here for comparison.
//var myDropzone = new Dropzone("div#dropthat", { url: "/file/post" });
});
I'm sure I've either missed something really small or it is indeed a problem with the lack of the jQuery plugin file. Does anyone know about the jQuery plugin file and it's name? I've run a search for jQuery in the source files for dropzone but can't find anything. It seems like Dropzone was made as a jQuery plugin first and has only recently become a standalone. Or maybe it's my version of jQuery.
If worst comes to worst, I can always grab variables using JavaScript event listeners rather than jQuery.
I'm not entirely sure what are you asking for, but if you want to know about the relationship between your library and JQuery, just look inside the source code:
if (typeof jQuery !== "undefined" && jQuery !== null) {
jQuery.fn.dropzone = function(options) {
return this.each(function() {
return new Dropzone(this, options);
});
};
}
First it checks if jQuery is already loaded on your page and if it does, then it attaches itself as a plugin, which means: in order to use the jQuery plugin you need to ensure that your jQuery library script runs before Dropzone.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="dropzone.js"></script>
Notes:
- I looked inside the source code provided in the INSTALLATION section from here
- Git wiki (maybe it will help you during development)

Problems with jQuery animations when using auto-pager

I have an auto-pager set up on my page to allow for infinite scrolling. I also used jQuery to change the opacity of images when they're hovered over. however, the animation only works on the first page, not the consecutive pages that are automatically loaded. any idea why this happens? or are there any methods of fixing this? thanks.
this is the code i'm using for the images and the auto-pager:
<script type="text/javascript">
$(document).ready(function(){
$(".post").animate({opacity:.8});
$(".post").hover(function(){$(this).stop().animate({opacity:1}, "fast");}, function(){
$(this).stop().animate({opacity:.8}, "slow");
});
});
</script>
<script type="text/javascript" src="http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js"></script>
Where are your codes? We're not magicians...
To the extent of trying to figure out what you're saying here, I think there's a huge possibility that your code is not applying to the newer, auto-paged ones. See if you could put a more dynamic code into your system, and apply that AFTER the auto-pager has loaded the images.

jQuery conflict in WordPress Plugin - jQuery vs. WordPress Core

I have a custom developed WordPress plugin that is using jQuery 1.4 and for some reason it is conflicting with the core of the WordPress js code... not sure, but I think it's also jQuery, no?
Anyway, I assumed it was this datepicker script I was using called "anytime.js" however, after debugging it turns out that the conflict was still happening after removing the link within the plugin to "anytime.js" but finally resolved when I got rid of the link to jquery.1.4.min.js ...
So, Any ideas for how to avoid the conflict? Is WordPress jQuery-based and that's the cause or is it something else?
Here's the relevant code found within the plugin:
function datepicker_header(){
$theme_dir = get_bloginfo('wpurl').'/wp-content/plugins/postevents/js/';?>
<link rel="stylesheet" type="text/css" href="<?=$theme_dir?>anytime.css" />
<link rel="stylesheet" type="text/css" href="<?=$theme_dir?>ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type='text/javascript'></script>
<script src="<?=$theme_dir?>anytime.js" type='text/javascript'></script>
<script type="text/javascript">
$(function(){
AnyTime.picker( "startdate", { format: "%m-%d-%Y", firstDOW: 1, baseYear: '<?=date('Y')?>', earliest: '<?=date('m-d-Y')?>' } );
AnyTime.picker( "enddate", { format: "%m-%d-%Y", firstDOW: 1, baseYear: '<?=date('Y')?>', earliest: '<?=date('m-d-Y')?>' } );
});
</script>
EDIT
I think I may have caused some confusion. I should explain functionality. There is a plugin called "Post Events" that has a jQuery based datepicker. The datepicker relies on jQuery to run. The specific and unusual problem is that while the plugin is active, it causes the new WordPress 3.0 draggable menus to fail from the WP admin panel. All other functionality is working, however, disabling the datepicker does not result in the menus becoming draggable. Instead, only deleting the link to "/libs/jquery/1.4.2..." in the code above causes the menus to become draggable again.
EDIT #2
While I can only indicate one correct answer, both #Matthew as well as #polarblau's corrections below were required to fix the problem!
This code will check to see if jQuery is already loaded... then loads it if it's not already (this code loads from Google code - you can update the URL to a local file if you like).
if(typeof(jQuery)=='undefined'){
var loadjQuery = document.createElement("script");
loadjQuery.setAttribute("type","text/javascript");
loadjQuery.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js");
document.getElementsByTagName("head")[0].appendChild(loadjQuery);
}
I do have to note, however, that this will only work if loaded AFTER another potential instance of jQuery (there's no guarantee that an instance of jQuery won't be loaded later, unless it performs this same check).
This is useful in situations where jQuery is loaded SOMETIMES and you need it to ALWAYS be loaded, no matter what. In that case, place this code at some point after the original would have loaded, but before you use any jQuery functionality.
One more thing: I sometimes WordPress gets fussy with the $ in jQuery code. You can get around this by simply typing out 'jQuery' (or performing a find/replace) instead of $ anywhere the $ is needed.
See this link about properly adding scripts to Wordpress:
http://weblogtoolscollection.com/archives/2010/05/06/adding-scripts-properly-to-wordpress-part-1-wp_enqueue_script/
And yes, Wordpress uses JQuery for some of it's functionality...
Try:
jQuery(function(){
AnyTime.picker( "startdate", { format: "%m-%d-%Y", firstDOW: 1, baseYear: '<?=date('Y')?>', earliest: '<?=date('m-d-Y')?>' } );
AnyTime.picker( "enddate", { format: "%m-%d-%Y", firstDOW: 1, baseYear: '<?=date('Y')?>', earliest: '<?=date('m-d-Y')?>' } );
});
Generally it's a good practice to wrap your scripts and plugins which are using jQuery into their own scope:
(function($){
//... your plugin, etc. here
})(jQuery);

Categories