1

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

I enqueued my scripts in functions.php:

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 [gallery link="file"] 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!

  • In your 3rd code sample, insert var_dump( $post->ID ); right after the <?php tag. What does that print out? – Pat J Sep 30 '13 at 16:33
  • It prints "int(31)" ...oh and the images work, but they link to the image itself and that's it.. (just if it was not clear) – Cynthia Lara Sep 30 '13 at 16:36
  • 31 is the ID for my custom post type where the php code is from but what does it means int(31)? – Cynthia Lara Sep 30 '13 at 16:43
  • int(31) just means that it's an integer of value 31. So that seems correct. I was just trying to eliminate one possibility. – Pat J Sep 30 '13 at 17:02
  • possible duplicate of Page template that uses lightbox to display post images – kaiser Oct 23 '13 at 17:46
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
  • Can you tell me how you enqueued the scripts and where please? My imgs have links with my code but won't work, I tried using yours but still can't make it work – Cynthia Lara Oct 1 '13 at 15:43
  • Enqueued the jquery.fancybox.pack.js file in functions.php (like you did). Make sure you download the latest version specified in the answer. Don't enqueue Lightbox, you don't need that for Fancybox to work. – P-S Oct 2 '13 at 11:55
  • Then where did you placed my js code? Because thats the file where I placed it heh – Cynthia Lara Oct 2 '13 at 14:28
0

OMG I just got the easiest answer in this question:

Page template that uses lightbox to display post images

I didn't know thickbox was built in :D

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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