Ok, I think it’s because I’m using the Pin-it button.
I did a few things, and now it works. I’m not sure which one helped. This could be a hack messy solution, but, hey. It works now. (If you are going to do this or something like this for your site, please make sure your URLS use the correct URLS and file names for your theme name/folder names, all that stuff.
– I made sure all of my images had class=”fancybox” eg.
<a href="" class="fancybox">
– I downloaded the original fancybox (here), and I uploaded these files: “jquery.fancybox.css” uploaded to wp-content/themes/twentytwelve/css
“jquery.fancybox.js” uploaded to wp-content/themes/twentytwelve/js
“jquery.fancybox.pack.js” uploaded to wp-content/themes/twentytwelve/js
– Then, I edited my theme’s header.php file, inside the <head> tag… I made sure I had the correct URLs for linking the fancybox css and javascript.
<script src="http://blog.juliakostreva.com/wp-content/themes/twentytwelve/js/fancybox/jquery.fancybox.js" type="text/javascript"></script>
<script src="http://blog.juliakostreva.com/wp-content/themes/twentytwelve/js/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://blog.juliakostreva.com/wp-content/themes/twentytwelve/css/jquery.fancybox.css" />
– I saw this article, and “In your header.php template file, add the following PHP code in your <head>:
<?php wp_enqueue_script('jquery.fancybox.js', '/wp-content/themes/twentytwelve/js/fancybox/jquery.fancybox.js'); ?>
– I skipped #3 in that tutorial, because I didn’t know what it was.
– I did #4 in that tutorial:
“Lastly, for this to work, the uploaded image must link to a larger version of itself. As of WordPress 3.4, it seems that uploaded images automatically link to a page with the media embedded. To change this, go to http://www.yoursite.com/wp-admin/options.php and find the field labeled “image_default_link_type”. This field may be empty or contain “post”, but you want to change it to “file”. Scroll to the bottom and save.”
– Then finally, I also followed the instructions of this article, and I went to my footer.php document, and right before the closing body tags I typed
<script>
$('.fancybox').fancybox({
//set the next and previous effects so that they make sense
//the elastic method is confusing to the user
nextEffect: 'fade',
prevEffect: 'fade',
//set the position of the title
helpers : {
title: {
// title position options:
// 'float', 'inside', 'outside' or 'over'
type: 'inside'
}
},
beforeShow: function () {
//if you don't already have titles
//you can just make the title the pinterest button
//add pinterest button for title
this.title = '<a class="pin-it-button" href="http://pinterest.com/pin/create/button/?url='+
encodeURIComponent(document.location.href)+
'&media='+
//set your image path here
encodeURIComponent('http://absoluteimagepath.com/path/to/image/'+this.href)+
'&description=Pin from ScottGale.com">'+
'<img title="Pin It" src="http://assets.pinterest.com/images/PinExt.png" alt="" border="0" /></a>';
}
});
</script>
So. Now the fancybox works when I click it.
And, my pin-it button works, too.
It does not, however, have that nice little “Pin it” button inside the fancybox (from Scott Gale’s tutorial). I’m still figuring out how to implement that.
lol That was a long way to get there.
