[Plugin: Meteor Slides] jquery conflict

Hi, I checked out Lazy Load and noticed that the developer has a notice up that “Lazy Load is currently not usable. It does not work with the latest browsers as expected”. Not that that is related to this issue exactly, but something to watch out for.

It looks like you can exclude a certain container from being affected by Lazy Load, check out this post. So for you it might look like this:

jQuery("div").not(".meteor-slides").find("img").lazyload

Syntax is not quite right. That line does kill lazyload, but for the entire site. Suggestions on how to tweak the line?

I’ll have to test it and see. A lot of the examples I found were users who wanted to exclude Lazy Load from multiple areas like the footer and sidebar, so they were specifically targeting just the main content container with LL, would this be a possibility in your case?

I don’t mind having lazyload work in the footer and sidebar but if you’re experimenting with solutions to isolate it, I’d appreciate hearing what you come up with. Many thanks.

I tested this out and wasn’t able to get the code to exclude a container to work either.

I was able to get it to load just the content div in Twenty Ten with this code:

$("#content img").lazyload();

That would work if you are using the slideshow template tag or widget, but not with the shortcode.

That makes sense. In this case, I was using it with the shortcode, so I’ll just leave it as-is. My site is not too image-intensive, so lazyload is not a critical feature and I can live without it. Thank you for checking it out.

You’re welcome, glad to help.

Hi, I’m using Thematic theme framework wich has some filters and hooks.
I wanted a Meteor Slideshow called “main” on my Front Page so I used this function:

// Meteor Slideshow in Front Page
function home_slideshow() {
	if ( is_front_page() && function_exists( 'meteor_slideshow' ) ) {
		meteor_slideshow("main");
	}
}
add_action('thematic_abovecontent', 'home_slideshow');

Notice that I put it “Above the Content DIV” with thematic_abovecontent() hook.

Then I stepped with the Lazyload problem, so I override the plugin’s function with this one (you have to put this on your theme’s functions.php):

// Custom Lazyload
function custom_jquery_lazy_load_ready() {
  $placeholdergif = plugins_url('images/grey.gif', __FILE__);
  echo <<<EOF
<script type="text/javascript">
jQuery(document).ready(function($){
  if (navigator.platform == "iPad") return;
  jQuery("#header,#content,#primary,#secondary,#footer").find("img").lazyload({
    effect:"fadeIn",
    placeholder: "$placeholdergif"
  });
});
</script>
EOF;
}
remove_action('wp_head', 'jquery_lazy_load_ready', 12);
add_action('wp_head', 'custom_jquery_lazy_load_ready', 12);

It works because my slideshow is not in the content. It would be better if I could just exclude the containers I want with “.not(this)” but I don’t know how to (I suck at javascript). Any clue?

Thanks!

Lazy Load isn’t being maintained and I don’t think you can get it to exclude certain containers, you have to specifically include the ones you want.

Thank you JLeuze. ??

function custom_jquery_lazy_load_ready() {
  $placeholdergif = plugins_url('jquery-image-lazy-loading/images/grey.gif');
  echo <<<EOF
<script type="text/javascript">
jQuery(document).ready(function($){
  if (navigator.platform == "iPad") return;
  jQuery("div").find('img:not(.attachment-featured-slide)').lazyload({
    effect:"fadeIn",
    placeholder: "$placeholdergif"
  });
});
</script>
EOF;
}
remove_action('wp_head', 'jquery_lazy_load_ready', 12);
add_action('wp_head', 'custom_jquery_lazy_load_ready', 12);

Thank you @danmichel it works!
although this one’s simpler:

// Custom Lazyload
function custom_jquery_lazy_load_ready() {
  $placeholdergif = plugins_url('jquery-image-lazy-loading/images/grey.gif');
  echo <<<EOF
<script type="text/javascript">
jQuery(document).ready(function($){
  if (navigator.platform == "iPad") return;
  jQuery("img:not('.attachment-featured-slide')").lazyload({
    effect:"fadeIn",
    placeholder: "$placeholdergif"
  });
});
</script>
EOF;
}
remove_action('wp_head', 'jquery_lazy_load_ready', 12);
add_action('wp_head', 'custom_jquery_lazy_load_ready', 12);

Could not have done it without your sample.

If you want to exclude multiple classes, coma separate them:

// Custom Lazyload
function custom_jquery_lazy_load_ready() {
  $placeholdergif = plugins_url('jquery-image-lazy-loading/images/grey.gif');
  echo <<<EOF
<script type="text/javascript">
jQuery(document).ready(function($){
  if (navigator.platform == "iPad") return;
  jQuery("img:not('.attachment-featured-slide','.my-class','#my-id')").lazyload({
    effect:"fadeIn",
    placeholder: "$placeholdergif"
  });
});
</script>
EOF;
}
remove_action('wp_head', 'jquery_lazy_load_ready', 12);
add_action('wp_head', 'custom_jquery_lazy_load_ready', 12);