I am using WordPress. Fancy box and a lazy loader plugin. However, since adding the lazy load plugin the fancy box has stopped working.
When you initiate the fancybox plugin, you do so with some javascript like so:
var select = $('a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]');
select.attr('rel', 'fancybox');
select.fancybox();
This fires with the rest of the javascript when the document has loaded.
However, now I am getting this error:
select.fancybox is not a function
I am assuming that the lazy loading plugin is taking the images out of the equation so this function isnt able to do anything.
I have tried attaching it again afterwards but I feel like I am going in the wrong direction:
$('html').on('mousemove', 'a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]', function(){
$(this).attr('rel', 'fancybox');
$(this).fancybox();
});
Any ideas?
WordPress now includes browser-level lazy-loading attribute for all images, using the 'loading' image attribute (loading="lazy"). Perhaps you no longer need the lazy loading plugin?
See here:
https://make.wordpress.org/core/2020/01/29/lazy-loading-images-in-wordpress-core/
Related
I'm working with the Wordpress Search & Filter plugin and it's exactly what I needed for filtering though my gallery and shop content! I would like to make my selections submit every time a dropdown is changed, as opposed to having to click the submit button. (See link below).
In researching other posts, I've found that the solution is to implement this into my theme's java script file:
$(".searchandfilter select").change(function() {
$(".searchandfilter").submit();
});
I have put the line into my WooThemes Canvas's 'general.js' file but it seems to make no difference. I still need to click on the submit button to make changes. I've tried placing it in various other js files but I've had no luck. The page in questions is this one:
http://richardrosenman.com/wordpress/portfolio/
Does anyone have any insight as to what I'm doing wrong? I would REALLY appreciate any help as I'm stuck (and somewhat of a novice with Javascript!).
Thanks!
jQuery is loaded with jQuery.noConflict(); therefore you cannot use $ as selector (other libraries may be using it), instead use jQuery as selector:
jQuery(document).ready(function(){
jQuery(".searchandfilter select").change(function() {
jQuery(".searchandfilter").submit();
});
});
I think you can add it to general.js end of file since I see that file is loaded.
I'm using the slidedeck jquery plugin which basically puts slides on my page. Everything works fine, but the problem is with the css loading part. Below these slides i have an import statement for another page. This page which i'm importing fetches quite a bit of data from the database before being completely displayed.
So whenever i open my page for a second or two the display for my page goes hay wire. The probable cause of this may be that i'm putting most of my jquery including the one for these slides in the document.onready function. So since the document is not loaded completely for that period of time slides are also not displayed. (as in they are displayed but in a weird manner......they are all over the page!!!!)
Is there some way i can make sure that my css and jquery get loaded first and then a call is made to this page which i'm importing or something like that. i just want that my display comes fine right in the beginning.
this is the slidedeck jquery plugin i'm using
slidedeck : http://www.slidedeck.com/
ahh i actually found a solution for my problem. Now what i'm doing is that i'm keeping the div (say id="slideDeckContainer") containing this slidedeck initially as hidden (using css style=display:none). Only after the page is done loading inside the $(document).ready(function(){....}); i call $('#slideDeckContainer).show(); on the div. (since the $(document).ready(function(){...}) is callled only after the page is loaded)
Definitely not the best solution but for now it works :).
instead of $(document).ready(function() { //code here }); you can use $(document).load(function() { //code here}); The load function fires after everything in the selector has loaded. In this case, we are selecting the document, so this function will run only after the CSS, javascript, and DOM have finished loading. Another suggestion is to give the DOM elements that you are loading content into a defined width and a height. This way, before the loading finishes, there will be space reserved for the loading content and it won't mess up your page layout.
i have jquery plugin jquery-1.4.2.min.js. while loading this file the following error is showing. but if i use it in another screen or another program it is loading successfully... i am unable to find the reason. Can any one help me please.
Thank you
Mihir
Make sure you are not referencing (linking) jQuery more than once in the page and that the plug-in is referenced after the jQuery reference. What sometimes happens (especially with auto script management) is jQuery is loaded, the plug-in is loaded in the jQuery instance, then jQuery is loaded again, which effectively resets any plug ins.
I'm using a jQuery gallery script called Galleria, in conjunction with a wordpress theme I'm working on. The problem (as you can see) is that no image loads right off the bat, as it should. Is there any sort of workaround you can think of, to force the image to be loaded into that ? Thanks!
Maybe you could trigger a "click" event on one of the thumbnail images that the plugin wraps itself around.
In the unordered list of the images you want to show, add the following to the opening li-tag of the image you want to load by default:
class="active"
Now that image will load off the bat.
Grtz,
Denios
I'm a jQuery newb. I'm building a Online Shop and I'm using jQuery plugin 'Thickbox' (http://jquery.com/demo/thickbox). The Online Shop is set up to display a 'Enlarged Image' which runs the Thickbox JS script and shows an image.
A problem occurs as the data is placed on the page thru a CMS system (using Ajax I believe?). When you choose another product from the 'Choose Type' select drop down new data from the CMS system is placed on the page and the Thickbox script isn't applied as it can't see the new data.
I've been playing around with a fix I've found (http://www.codynolden.com/blog/2009/01/thickbox-and-ajax-using-livequery) but I can't seem to apply it to my website?
A live example of my site: http://madisonlane.businesscatalyst.com/_product_36331/AAA-_Autumn_Dress
Any ideas?
in thickbox.js:
$(domChunk).click(function(){
was replaced with this:
$(domChunk).live(click, function(){
Stuart got it right: thank you so much!
I was stuck with a similar problem issue: in my case, the target of an appended link (through jQuery .append() method ) was not loaded in a thickbox.
My jQuery code was executed in a document.ready() function:
$("#subpages").append('','<a href="..." class="thickbox" [...]');
Simply adding:
tb_init('.thickbox'); //required to reinitialize thickbox as DOM was manipulated
just after the last line fixed the problem.
Are you using an IFRAMED thickbox? You may have better luck with that, since by default thickbox is just displayed in a DIV. You need to add &TB_iframe=true to your URL's querystring to get this
I may not be reading your question right, but from the way it sounds, content is being destroyed and created with new item selections, right?
If that's the case, you'll need to call tb_init('.some-selector') when you load new content. I recall having to do this for conditionally setting up a thickbox once. Thickbox works by going through your page and wiring up click events to link with class "thickbox." By using tb_init(), you can wire your stuff up at any time on any selector you like. Check out the source code for Thickbox to see what I mean.