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!

Improve this question
6
  • In your 3rd code sample, insert var_dump( $post->ID ); right after the <?php tag. What does that print out?
    – Pat J
    Commented Sep 30, 2013 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)
    – artist learning to code
    Commented Sep 30, 2013 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)?
    – artist learning to code
    Commented Sep 30, 2013 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
    Commented Sep 30, 2013 at 17:02
  • possible duplicate of Page template that uses lightbox to display post images
    – kaiser
    Commented Oct 23, 2013 at 17:46

2 Answers 2

Reset to default
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
Improve this answer
3
  • 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
    – artist learning to code
    Commented Oct 1, 2013 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
    Commented Oct 2, 2013 at 11:55
  • Then where did you placed my js code? Because thats the file where I placed it heh
    – artist learning to code
    Commented Oct 2, 2013 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

Improve this answer

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.