fancyBox working in an Octopress-powered blog:

This can be used as a general guide to installing any javascript/jQuery plugin for use with Octopress. There are a few key steps in getting any of these to work:

• First, install all plugin files into appropriate director(ies). Create a test.html in the root and test that the script functions.
• Next, insert all the javascript, jQuery, and stylesheet code into /octopress/source/_includes/head.html (this will likely also involve updating the paths to the plugin’s dependencies with {{ root_url }}/path/to/dependencies Also change the links in the plugin’s stylesheet(s) if necessary.
• You will most likely have to utilize jQuery.noConflict() to prevent conflicts with Ender.js, which also utilizes the $ variable.
• If there are display issues with the plugin in Octopress-generated files but NOT in test.html, it is most likely due to conflicts between the plugin’s stylesheet and Octopress’s screen.css stylesheet. Troubleshoot this by running rake generate and editing octopress/public/stylesheets/screen.css on the fly. For me, this was a couple hours of trial-and-error (most of this time spent learning what each CSS selector does, especially re: transparency)

Now there probably is a more elegant solution to getting this to work, but this is how I got fancyBox to work with Octopress:

1. Downloaded fancyBox v2.0.4.
2. I wasn’t interested ‘gallery’ feature, so I left out the ‘helper’ files and optional code. I extracted:
   • .png and .gif image files to /octopress/images/fancybox/
   • jquery.fancybox.css to /octopress/stylesheets/
   • jquery.fancybox.pack.js to /octopress/javascripts/
3. Opened /octopress/source/_includes/head.html, inserted:

   1 2 3 4 5 6 7 8 9 10 11 12 13

   <!-- Add jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <!-- Add fancyBox --> <link rel="stylesheet" href="{{ root_url }}/stylesheets/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" /> <script type="text/javascript" src="{{ root_url }}/javascripts/jquery.fancybox.pack.js?v=2.0.4"></script> <!-- Add fancyBox jQuery --> <script type="text/javascript"> jQuery.noConflict(); // prevents conflicts with Ender.js, use jQuery instead of $ jQuery(document).ready(function() { jQuery(".fancybox").fancybox(); }); </script> <!-- End fancyBox insert -->

4. Edited /octopress/source/stylesheets/jquery.fancybox.css, located the following lines:

   1 2 3

   background: url('fancybox_loading.gif'); background: transparent url('blank.gif'); /* helps IE */ background-image: url('fancybox_sprite.png');

   and replaced them with

   1 2 3

   background: url('../images/fancybox/fancybox_loading.gif'); background: transparent url('../images/fancybox/blank.gif'); /* helps IE */ background-image: url('../images/fancybox/fancybox_sprite.png');

   At this point, the plugin works, but it isn’t pretty:

   

5. To fix these display problems, go back into /octopress/source/stylesheets/jquery.fancybox.css and, near the top, right under .fancybox-wrap {, edit position: absolute; to say position: fixed;. Under .fancybox-opened {, add:

   1 2 3

   -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;

   and under .fancybox-close, .fancybox-prev span, .fancybox-next span { add:

   1 2	background-color: transparent; border: 0;

   These edits (1) ensure the viewport isn’t shifted to the right by a hundred or so pixels, resulting in unnecessary sideways scrolling, (2) round the corners of the lightbox, and (3) make the “x” close lightbox window button transparent, respectively.

Here’s my jquery.fancybox.css from /octopress/source/stylesheets/jquery.fancybox.css and head.html from /octopress/source/_includes/head.html. Install fancyBox into the correct directories as mentioned above and overwrite these 2 files and fancyBox should work fine.