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.
As we figured out in our conversation, removing the last values in the wp_enqueue_scripts calls ( false, true ) did it.