jquerywordpressfancyboxgallerylightbox

Adding fancy box to a WP theme


I'm fairly new to making my own WP themes. Right now I'm trying to figure out how to add a lightbox type functionality to it. I googled the topic extensively and the only decent tutorial I was able to find is here

It uses FancyBox. I tried following the instructions over and over again - no use. I don't get the FancyBox functionality on my images though - if I click on the image, it just opens up the full image's path, rather than a lightbox.

Can't figure out what I'm doing wrong. I'm far from an expert when it comes to ensuring everything is correct.

If there is a better way to do it, or if Lightbox is considered better than Fancybox - I'm open to all sorts of suggestions and directions.

Here is my test page - http://www.aspenwebsites.com/lothlorien/gallery/

Basically, I created a 'lightbox' folder in my theme's 'inc' folder and dumped there all the source files I downloaded from the Fancybox Github.

Per the tutorial, I then created a lightbox.js file with the following content:

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

// Initialize 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);

Then in my functions.php I added:

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

And the HTML markup I used was:

<a href="http://www.aspenwebsites.com/lothlorien/wp-content/uploads/2014/09/M31-Efremov-2.jpg"><img src="http://www.aspenwebsites.com/lothlorien/wp-content/uploads/2014/09/M31-Efremov-2.jpg"></a>

According to the tutorial that is all it takes. I thought I'd be required to add some class in order to trigger jQuery, but the tutorial had just as shown above.

As far as the enquiring query itself - I'm assuming this is done by the twenty-fourteen themes I'm using as a base, but to be honest, I'm not sure exactly how to verify that.


Solution

  • As we figured out in our conversation, removing the last values in the wp_enqueue_scripts calls ( false, true ) did it.