Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

What I'm aiming to do is add fancybox to a site I'm developing, but I only want to enqueue the JS/CSS etc if the page/post needs it.

My thoughts are that I would need to check all the anchor tags on the post or page , and if the anchor tags link to any form of image (jpg, png,gif) then I will enqueue the necessary assets.

Does this seem like the correct approach? Is this a job for regex, somehow applied to a filter of the_content?

I'm ok with everything else, just need the test.

The code below adds a .fancybox class to all the anchors that link to the specified filetypes so maybe I can somehow check for the class name? PS I don't want to use a plugin to load fancybox, prefer to do this myself.

jQuery("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").fancybox();

Update: this is a simple check that I have so far which will check the content for anchors. Just need to adapt for having a class name and I think I'm there, seems to work ok.

function content_image_check( $content ) {

if( strpos( $content, "<a" ) ) {
   echo 'yes';
} else {
   echo 'no'; 
}

return $content;
}

add_filter('the_content', 'content_image_check'); 

Update 4

I'm using a XPath query. This is the closest I've gotten so far. It will enqueue the css and js only if there's anchors on the page with images inside them. I'd like to modify the query so it can find the anchors with a class of 'fancybox' but For some reason the query cannot see the 'fancybox' class name being added from jQuery when I try with $hrefs = $xp->query("//a/img/../@class['fancybox']");

The other option would be to sort by anchors with an href that has a filename that ends in .jpg, .gif, png. I'd be happy with that.

function content_image_check( $content ) {


$dom = new DOMDocument();
$dom->loadHTML($content);

$xp = new DOMXPath( $dom );
$hrefs = $xp->query("//a/img/../@href");


$count = $hrefs->length;
print_r( $count);

return $content;
}

if ( $count ) {
    wp_enqueue_script( 'fancybox' ); // js
    wp_enqueue_style( 'fancybox' ); // css
}

add_filter('the_content', 'content_image_check'); 

I've obviously registered the css and js elsewhere and only enqueue it when needed.

share|improve this question

1 Answer 1

This method has worked in the past for checking if a shortcode exists on a page. You will have to test it and see if it fires in time to enqueue the javascript>

add_filter('the_posts', 'c3_image_check'); 
function c3_image_check($posts){
    if (empty($posts)) return $posts;
    $img_found = false; 
    foreach ($posts as $post) {
        if (stripos($post->post_content, '<img src=')) {
            $img_found = true; // bingo!
            break;
        }
    }
    if ($img_found) {
        wp_enqueue_script( 'jquery.fancybox', LIB .'/jquery.fancybox.min.js', array( 'jquery' ) );
    }

    return $posts;
}
share|improve this answer
    
@chris-o thanks, updated my question to show what I have so far. I decided to go with a filter as per your example and try and detect if there are anchor links to start off with –  Andrew May 29 '12 at 9:58
    
Report back how it worked. –  Chris_O May 29 '12 at 10:01
    
What I have so far is in the original question above, still working on trying to detect a class within the anchor :) I could of course just add "fancybox" instead of <a but that would be clumsy –  Andrew May 29 '12 at 10:04

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.