lightgallery library + lg-thumbnail plugin - javascript

I'm trying to setup lightgallery with lg-thumbnail plugin in a WordPress installation.
https://sachinchoolur.github.io/lightGallery/docs/api.html
https://sachinchoolur.github.io/lightGallery/docs/api.html#lg-thumbnial
Lightgallery alone seems to work without problems (so, HTML markup and enqueued script is OK) with this JS init:
$(document).ready(function() {
$("#gallery-1").lightGallery();
});
So, my next step is to include lg-thumbnail plugin. After enqueue plugin JS I add thumbnail:true:
$(document).ready(function() {
$("#gallery-1").lightGallery({
thumbnail:true
});
});
But nothing happens. There is no errors in the console. Seems like there is no lg-thumbnail plugin present at all.
But, script is in its place:
What am I doing wrong?
How can I diagnose the problem?
Thank you!

Sorry about that, everything works fine, including thumbnail plugin. I was worng with what was the plugin function. I thought that this plugin acts on the thumbnails before lightbox was launched, but actually insert thumbnails in the lightbox after it is launched.
My apologies.

Related

No CSS and JS loading on Wordpress site after enabling plugin

Quick question: as someone who is using Wordpress a lot, I am first time ever noticing that I can't see any Javascript files associated with my plugin (ULike plugin) on my website when I enable that specific plugin. The HTML is loaded, but CSS and JS files are entirely missing and thus not loaded on the page...
I ran out of options. I already removed cache, enabled debug mode in Wordpress (didn't give any errors), checked the console and logs...
Any idea what might cause this error and what else I can do to check what is going wrong?
It might be an error with your URL ( www ) while loading CSS and JS.
Fixing all the links of CSS and JS should work.
I have an answer to my own question. It was because <?php wp_head() ?> was not added in my header.php that is was not working.
Problem solved!

Move jQuery to footer in WordPress? (through scripts.php & functions.pphp)

I'm trying to move jquery to my wordpress footer-page (to optimize pagespeed and keep google happy), but can't quite figure out how to do it.
It looks like jquery.js + 3 other js.files are located in scripts.php (through "wp_enqueue_script"), which in turn is referenced in functions.php.
I'm somewhat comfortable editing wordpress php & css files, but do not know how to write php actually and feel I need a little help so I won't break my site.
How and where do I move javascript so it's loaded last?
wp_enqueue_script can place a script in the footer. You will need to "deregister" it and then re-register and enqueue:
add_action("wp_enqueue_scripts", function()
{
wp_deregister_script('jquery');
wp_register_script('jquery', "path_to_jquery", false, 'whatever', true);
wp_enqueue_script("jquery");
});
The last argument passed as true places the script in the footer. The code above should be placed in functions.php.
Thanks for your help! Although I did try the code, in the end I found a wordpress plugin that seems to do the trick called "scripts-to-footer" - works like a charm so far.

jQuery interfering with Twitter bootstrap carousel

While creating a website using Twitter Bootstrap's carousel, it seems that some scripts are interfering from it auto-sliding when the website is loaded. But it works fine once you click one of the controls in the carousel. It then slides every 5 seconds, the default time.
I'd rather not post a jsfiddle because of the size, so the production website will have to do (not sure if this is against the rules - otherwise I'll delete it).
Now there are some plugins I'm using (Newsletter and Contact Form 7) which also include scripts from jQuery. I'm not sure how to implement the noconflict from jQuery, or if it will even help.
Can anyone spot the problem?
I got this working by saving a copy of your site to my local drive, I moved the bootstrap .js file to the bottom of the file right above </body> and called the carousel manually so it ends up looking like this
<script type="text/javascript" src="./PRO-Intermediair Your Next Step!_files/bootstrap.min.js"></script>
<script type="text/javascript">
$('.carousel').carousel();
</script>
</body></html>
edit
I posted a copy so you can see http://tctel.com/pro/

How can I do to fix the jquery portfolio error?

I have a problem with the implementation of a portfolio in a single page.
The portfolio that I enter this code has
$(window).load(function() {
$('#work').flexslider({
animation: "slide",
controlsContainer: '.flex-container'
});
//Add one flexslider for project
$('#proj_slider01').flexslider();
$('#proj_slider02').flexslider();
$('#proj_slider03').flexslider();
$('#proj_slider04').flexslider();
$('#proj_slider05').flexslider();
$('#proj_slider06').flexslider();
$('#proj_slider07').flexslider();
$('#proj_slider08').flexslider();
$('#proj_slider09').flexslider();
});
Unfortunately I can not publish all the code of a website done in a single page. So if you want to see the site the link is http://goo.gl/W2Xq7 and can find the real portfolio in this link http://goo.gl/jgD3o. If you don't understand where il the problem, you can ask me the link for the source code.
Where is the problem in my site and how can I do to fix it?
You are loading jQuery more than once into page. The scond version wipes out plugins that are attached to first version. Only load jQuery.js one time, and load it before all plugins and dependent code

jQuery tabs is loaded but not working in WordPress

I am trying to work with jQuery UI tabs in WordPress but I keep getting the "jQuery("#").tabs is not a function" error.
I thought the tabs file might not be loading but looking in firebug it shows it is loading. I am also using modernizr so I thought there might be a conflict with that but using jQuery.noConflict(); did not solve the problem either. At first I used to load jQuery but for some reason it wouldn't work. Now I just linking directly to the files and they are loading.
If it helps, I am trying to get tabs working for this tutorial. The website I working on is lbk.newcoastmedia.com/wordpress
Thanks for any help!
I see the following scripts being loaded on your page:
modernizr-1.6.min.js
l10n.js
jquery.js
galleria.js
and
<script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);
});
</script>
$.tabs is an extension of jQuery UI, and I don't see jQuery UI or the tabs extension loaded on your page. Look at the very bottom of the source at your link and you'll see the following two scripts, which I believe are what you're missing.
ui.core.js
ui.tabs.js
Your debugger is alerting you that $.tabs is not a method because it really hasn't been defined yet.
Just had this problem on Drupal and resolved it by downloading a custom build of the jQuery UI library WITH Tabs selected. Apparently the default jQuery UI library that shipped with Drupal didn't have this module, so perhaps this is also the case with WP.

Categories

Resources