Fancybox not working. why?

0 Views

Ok, I tried to implement a fancybox lightbox in my custom theme.

I enqueued my scripts in functions.php:

Read More
function ikos_add_lightbox() {
wp_enqueue_script( 'fancybox', get_template_directory_uri() . '/inc/lightbox/js/jquery.fancybox.pack.js', array( 'jquery' ), false, true );
wp_enqueue_script( 'lightbox', get_template_directory_uri() . '/inc/lightbox/js/lightbox.js', array( 'fancybox' ), false, true );
wp_enqueue_style( 'lightbox-style', get_template_directory_uri() . '/inc/lightbox/css/jquery.fancybox.css' );
}
add_action( 'wp_enqueue_scripts', 'ikos_add_lightbox' );

In my js for the lightbox: 

(function($) {

// Initialize the Lightbox for any links with the 'fancybox' class
$(".fancybox").fancybox();

// Initialize the Lightbox automatically for any links to images with extensions .jpg, .jpeg, .png or .gif
$("a[href$='.jpg'], a[href$='.png'], a[href$='.jpeg'], a[href$='.gif']").fancybox();

// Initialize the Lightbox and add rel="gallery" to all gallery images when the gallery is set up using  so that a Lightbox Gallery exists
$(".gallery a[href$='.jpg'], .gallery a[href$='.png'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif']").attr('rel','gallery').fancybox();

// Initalize the Lightbox for any links with the 'video' class and provide improved video embed support
$(".video").fancybox({
    maxWidth        : 800,
    maxHeight       : 600,
    fitToView       : false,
    width           : '70%',
    height          : '70%',
    autoSize        : false,
    closeClick      : false,
    openEffect      : 'none',
    closeEffect     : 'none'
});

})(jQuery);

So this is supposed to work like commented in the js…
My code for the gallery trying to use the lightbox right now: 

<?php
    if ( $attachments = get_children( array(
    'post_type' => 'attachment',
    'post_mime_type'=>'image',   //return all image attachment only
    'numberposts' => -1,   //get all the attachments
    'post_parent' => $post->ID
)));

foreach ($attachments as $attachment) {

$src = wp_get_attachment_image_src( $attachment->ID, full);

$html = '<a class="fancybox" href="'.$src[0].'">';
$html .= wp_get_attachment_image( $attachment->ID, 'gallery-thumb') .'</a>';
echo $html;
}
?>

It is supposed to work with any .jpg, .gif or .png but didn’t because my images are all .jpg.
So I added the class .fancybox to the link and nothing…
So I even tried to add the gallery rel but nothing happens…

Console log shows no errors :/

Any help is highly appreciated!

Post Views: 0

Related posts

2 comments

  1. oh and the images work, but they link to the image itself and that’s it.

    Are you sure the images are showing with their links? Your PHP code did not work with me, I had to use this instead:

    $attachments = get_posts( array( 
       'post_type' => 'attachment',
       'post_mime_type'=>'image',
       'posts_per_page' => -1,
       'post_status' => 'any',
       'post_parent' => $post->ID);
);
if ( $attachments ) {
    foreach ( $attachments as $attachment ) {
        $src = wp_get_attachment_image_src( $attachment->ID, full);     
        $html = '<a href="'.$src[0].'">';
        $html .= wp_get_attachment_image( $attachment->ID, 'gallery-thumb') .'</a>';
        echo $html;
    }
}

    In case your PHP is working just fine, go ahead and try one of the following:

    1. Remove your Lightbox wp_enqueue_script from your PHP function (possible conflict with Fancybox).
    2. If step 1 still didn’t work, check which version of Fancybox you are using and Google if it’s working with your current WordPress version.

    I got Fancybox working on the attachments using the PHP code above with your JS code and a simple wp_enqueue_script for Fancybox. I’m using the following:

    1. Fancybox V2.1.5
    2. WordPress V3.6.1

Comments are closed.