jquery - Adding fancy box to a WP theme -

i'm new making own wp themes. right i'm trying figure out how add lightbox type functionality it. googled topic extensively , decent tutorial able find is: http://code.tutsplus.com/tutorials/add-a-responsive-lightbox-to-your-wordpress-theme--wp-28100

it uses fancybox. tried following instructions on , on again - no use. don't fancybox functionality on images though - if click on image, opens full image's path, rather lightbox.

can't figure out i'm doing wrong. i'm far expert when comes ensuing correctly.

if there better way it, or if lightbox considered better fancybox - i'm open sorts of suggestions , directions.

here test page - http://www.aspenwebsites.com/lothlorien/gallery/

basically, created 'lightbox' folder in theme's 'inc' folder , dumped there source files downloaded fancybox github.

per tutorial created lightbox.js file following content:

(function($) {  // initialize lightbox links 'fancybox' class $(".fancybox").fancybox();  // initialize lightbox automatically links images extensions .jpg, .jpeg, .png or .gif $("a[href$='.jpg'], a[href$='.png'], a[href$='.jpeg'], a[href$='.gif']").fancybox();  // initialize lightbox , add rel="gallery" gallery images when gallery set using [gallery link="file"] lightbox gallery exists $(".gallery a[href$='.jpg'], .gallery a[href$='.png'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif']").attr('rel','gallery').fancybox();  // initalize lightbox links 'video' class , 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 functions.php 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 html markup 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 tutorial takes. thought i'd required add class in order trigger jquery, tutorial had shown above.

as far enqueing query - i'm assuming done twenty fourteen theme i'm using base, honest, i'm not sure how verify that.

as figured out in our conversation, removing last values in wp_enqueue_scripts calls ( false, true ) did it.