I believe that I have followed the instructions to setup this javascript plugin, but it does not seem to be working. (plugin: http://dev7studios.com/nivo-lightbox#/documentation)
I can see the links to the css, theme and javascript files correctly showing in my (I can see that it is correctly seeing these files too).
(i've commented out the jquery as this is already loaded for my wordpress theme.
The lightbox doesn't seem to be running though. Any tips on why this isn't picking up my images and showing them in the lightbox?
once I get this going I still need to figure out how to wrap my images with an attribute for "data-lightbox-gallery" so I can get the galleries working as well.
Image management: nextgen gallery
image layout: Justified Image Gallery
URL: http://www.sandbox.imageworkshop.com/projects/william-angliss-institute/
If you open the console on this page - you'll see that there are two javascript errors.
1.Uncaught TypeError: Property '$' of object [object Object] is not a function (index):71
I looked into the source code of your page and on line 71 you have this:
$(document).ready(function(){
$('a').nivoLightbox();
});
This means that jQuery is not working. You need to use a no-conflict wrapper.
2.Uncaught TypeError: Object [object Object] has no method 'orbit'
On this line you use .orbit() to make a home page slider... but not on the home page. You get this error because jQuery couldn't find a block with the id of #featured.
To avoid such mistakes you need to check if the block is on the page, possibly like so:
var home_slider = $('#featured');
if( home_slider [0] ) { //if jQuery object is not empty
home_slider.orbit({
//yor params here
})
}
If you get rid of these errors - you'll most likely see the nivo-lightbox :)
Related
OK, I am baffled on how to get Bootstrap 3 Tooltip working.
Bootstrap Tooltip "instructions"
http://getbootstrap.com/javascript/#tooltips
Says to trigger using:
$('#example').tooltip(options)
then HTML to write
Hover over me
No matter what I do, I cannot seem to get it working. There is no ID named example in their example, and adding said ID does not work (I wrap the script in a script tag and have added it before and after the anchor).
But, after looking around on Google, I found the following code, which when added makes the Tooltip work as it should.
$(function () { $("[data-toggle='tooltip']").tooltip(); });
So, my question is, How the hell do I get it working with the provided Bootstrap code! What am I missing? They really need to work on their instructions. This should not take this long to figure out when it should be simple!
I was able to recreate this in a fiddle. Check the console on your browser if you are getting javascript errors. Looking at the code you have provided though it hits me that you might be mixing two things together. The options need to be defined in your javascript code and not in HTML, like this:
$(document).ready(function() {
var option = {
title: "example",
placement: "bottom"
};
$("#example").tooltip(option);
});
Well, this is about how to read the document of bootstrap.
$('#example').tooltip(options)
just presents how to use the jquery method, and it is not right for the following html:
Hover over me
The method must be called in order to active the tooltips plugin. So, in order to make the html working with the plugin, you need to do two steps:
add an id into the html, say,
Hover over me
call the jquery method,
$('#tips').tooltip(options)
This is a page I'm currently working on as a project
$(function() {
$(".modal-launcher, #modal-background").click(function() {
$(".modal-content, #modal-background").toggleClass("active");
$(".vid-1i").attr("src", "link1");
$(".vid-2i").attr("src", "link2");
$(".vid-3i").attr("src", "link3");
$(".vid-4i").attr("src", "link4");
$(".vid-5i").attr("src", "link5");
$(".vid-6i").attr("src", "link6");
$(".vid-7i").attr("src", "link7");
$(".vid-8i").attr("src", "link8");
//$('html').toggleClass('active').css('top', -(document.documentElement.scrollTop) + 'px');//
});
});
above the actual links are replaced just to display a quick idea of the bad jQuery.
In it, I am attempting to create my own popup launcher for videos; however, I am having trouble using jQuery to replace the "" src of an iframe element to a YouTube link. I am unable to figure out why the jQuery is not working. I understand that the jQuery is, of course, working properly, and that it is me who has written the code incorrectly, but here I am asking if anyone is able to figure out what it is I've done wrong, or what can be changed to make it work.
For some reason, the last video in the jQuery list is always the one retrieved.
Understand that the images are missing from the page due to them being local files and not network locations. Clicking above the captions that read like "Match One" will have the "intended" result, regardless if the image is showing or not.
Coming back to this and understanding more of JavaScript and jQuery, my problem was simply misunderstanding the code. In order to do something like this, one function per link would be more suitable.
function video1()
{
$("#popup, #modal-background").toggleClass("active");
$("#popup").prop("src", "https://www.youtube.com/embed/7h1s15n74r3all1nk");
document.getElementById('scroll').style.cssText ='overflow:hidden';
}
complementary html would look like this:
<div onclick="video1()"></div>
The previous code would run each line, effectively setting the last link as the source of the element. The new code is button independent, ensuring only one link belongs to each button.
I'm trying to use pickadate.js for a text input but I cannot get it to work on my server. I made a fiddle and it works fine, but when I copy that code over (I even put everything in the HTML box of the Fiddle so the code is 100% the same), I get the following errors
Uncaught SyntaxError: Unexpected identifier picker.js:487
Uncaught ReferenceError: Picker is not defined picker.date.js:23
Uncaught TypeError: Object [object Object] has no method 'pickadate'
Here is the code. There is absolutely no other code on the page than this.
<input type = "textbox" id="pickadate_input"></input>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "http://amsul.ca/pickadate.js/lib/picker.js"></script>
<script src = "http://amsul.ca/pickadate.js/lib/picker.date.js"></script>
<script>
$('#pickadate_input').pickadate()
</script>
Here is a working fiddle with the same code. Notice that there are no scripts included on the left. What would cause the different results?
Line 487 in picker.js has a weird chracter in it:
options = thingIsObject && $.isPlainObject( value ) ? value : options || {}
after the "?", take this out and it should work.
Have you tried hosting the files locally?
Is your site running https? If so, your site may not be loading insecure content since the picker resources start with http.
If you use Google Chrome, you can look at the Network tab in the Chrome Developer Tools to see if those JavaScript files are loading successfully.
I'm using the following theme for our site: http://themes.vivantdesigns.com/vpad/#dashboard.html
I want an ajax loader to show NEXT to the link/tab, when a user clicks a link within the drilldown menu on the left. As you can see from the link, content is dynamically loaded within a:
<section id="main-section">Pagename.html loaded here</section>
So basically, I want the ajax loader to show to the right of the menu links and disappear when the dynamic content loads. It will be hard to see this pause on the demo link, but heavier database queries will cause it to sit there a moment, and slower connections of course.
Any immediate help is appreciated very much.
I've tried show/hide onClick methods, hiding class on document ready, and nothing seems to work cleanly.
Okay, after a lot of screwing around trying to find where the ajax was happening, I think I've worked it out (little familiarity with jQuery/never heard of hashchange or bbq before), so give this a shot.
Assuming you have access to it, the page you referenced is including a JavaScript file called global.js.
Add an initially hidden "loading" image/div/whatever next to each menu item, with an id set similarly to the menu item's name e.g. id="mediaLoading".
Open global.js and head down to line 117:
$('#'+id).length && $('#'+id).remove();
After this line the ajax call is made, so add the code to show the ajax loader, e.g.
var loaderId = h.replace(/^\#/, "") + "Loading";
document.getElementById(loaderId).style.display = 'block';
//or $("#" + loaderId).show() or whatever you would use in jQuery
Finally, to re-hide it, add similar code into the inline 'complete' function (which would now be around line 127):
complete: function(jqXHR, textStatus) {
document.getElementById(loaderId).style.display = 'none';
}
Hope that solves it. It was difficult to test locally.
Keep in mind that since the file's called "global," that obviously might impact a bunch of other pages, so you may want to use null-checks for the loader or a separate file...
I have currently implemented this image slider http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html on a site but for some reason I get the error message "mc is not defined".
Unfortunately I can't show a link to the site since it's not accessible to the public yet.
When I look in the javascript file I can see that the mc variable is not defined anywhere. But when I strip it out I just get another error saying "css_ims is not defined". If I uncomment this line I get yet another error message now saying "css_cims is not defined". So far the gallery is still working but when I uncomment the last error it breaks.
I'm really lost on what I can do about this to fix it.
I'm sorry that I'm not able to post a direct link to the page but the source code for the JavaScript can be found on the site with the tutorial in the beginning of this post.
Any ideas or suggestions are much welcome.
You should remove the line with: mc.init();
and also the whole function from line 53:
$(window).load(function(){
$.each(css_ims,function(){(new Image()).src=_siteRoot+'css/images/'+this;});
$.each(css_cims,function(){
var css_im=this;
$.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
(new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
});
});
});
Few days ago I integrated the same slider on one of my sites. The error/issue is with:
$(window).load(function(){
$.each(css_ims,function(){(new Image()).src=_siteRoot+'css/images/'+this;});
$.each(css_cims,function(){
var css_im=this;
$.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
(new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
});
});
});
From line 52 to line 60 needs to be removed my guess is that this indeed was planned for something else, or the option to change colors.
Thanks,
Emil
Go back to the demo site and pull down the scripts.js from the live demo, you'll notice that one does not reference mc at all, there is no mc.init() call at all. The article writer probably linked to a different version of that file.