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.


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();

$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.

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!
    if ($img_found) {
        wp_enqueue_script( 'jquery.fancybox', LIB .'/jquery.fancybox.min.js', array( 'jquery' ) );

    return $posts;
  • @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
    Commented May 29, 2012 at 9:58
  • Report back how it worked.
    – Chris_O
    Commented May 29, 2012 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
    Commented May 29, 2012 at 10:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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