Hello
Which fancybox? The WP one or from a plugin?
I implemented Fancybox 1.3.4 directly into my custom theme.
I have a custom post type that I use fancybox with for the sole purpose of load the custom post type content via fancybox.
The content loaded is a specific div from the single post page (#content) which contains the post content (a featured image, a custom carousel and a load of text…).
The images in the carousel appear but the featured image doesn’t appear yet the code is injected into the img tag but the image swapping i.e. the 1×1 pixel doesn’t get changed to the image url unless I actually scroll.
Can you give me some ULRs?
Like the plugin just to be sure, then if available a demo URL.
Thanks
I’ve shared the url via Google+ Hangout, please post back here
(i don’t get why you send this by g+ then asks me to post it back here, anyway…)
Which image is missing on this link? Can you show me a screenshot without lazyload?
Thanks
Image / Screenshot on Google Drive
I’ve uploaded the image / screenshot to Google drive… on the left is what is happening and the right is what should appear.
damn i dont get it, where do i have to find thi on the demo URL?
ok got it, the picture appears only when you scroll, but you do not have to use the lazyload in this boxes because the pictures are not defaultly displayed.
So, i’ll try to find the code to avoid this for you.
Which plugin is it, can you provide me the correct link? Thanks
It’s not a plugin but a manual implementation of the Fancybox 1.3.4.
if ( $.isFunction($.fn.fancybox) ) {
$('a:not(.post-edit-link)').fancybox({
'type': 'ajax',
'ajax': {
dataFilter: function(data) {
return $(data).find('#content').html();
}
},
'onComplete' : function( links, index ) {
}
});
}
The above finds all single post content within the element id #content.
the_post_thumbnail is called within the single page template along with the_content and separately stored gallery shortcode information (hence why the gallery loads without any injection from this plugin).
The ideal solution would be to prevent the plugin injecting data-lazy-original in the first place or to somehow activate the javascript function to carry out the image replacement
h.src = h.getAttribute("data-lazy-original");
h.removeAttribute("data-lazy-original")
ok, so yes, you have to avoid this attribute.
We have a filter to avoid the plugin to add it, but it will be tricky to add it at the right time i guess :/
See FAQ for 2 tips 😉
Neither tips in the FAQ suffice, I’ve tried to figure out how to implement them previously.
Tip #1 relays on a php hook which I can’t figure out how to implement via fancybox Ajax. If I implement via normal PHP then the lazy load will not work on either the ‘archives’ page or ‘single’ page at all since its disabled via the action hook
Tip #2 relays on somehow getting the tag added to the_post_thumbnail beforebefore the lazy load hooks in to it
Ok I got a temporary fix figured out
add_action( 'wp', 'deactivate_rocket_lazyload_on_single' );
function deactivate_rocket_lazyload_on_single() {
if ( is_single() && ! empty( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] ) &&
strtolower( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ]) == 'xmlhttprequest' ) {
add_filter( 'do_rocket_lazyload', '__return_false' );
}
}
You fix is neat! I love it.
