Adding Jquery to a Quicklook plugin

A while back I wrote a Quicklook plugin that displayed some text related to image files.

But I wanted to be able to show additional information when the user clicked a button or hovers over an image . The plugin uses a HTML  construction to put the preview together. Apple has examples on how to do this in its Qucklook Plugin introduction . So I am not going to go into that here. But what I was missing was how to use  Jquery.  The Quicklook plugin is sandboxed and is not allowed to load any data from the outside world.

The simple answer is add the jquery Library file to your bundle and then reference it in the html.

This example will toggle hide/show a text area in the quick look preview.


My jquery file was in a directory name jq. So I simply dragged it into my project as normal. Making sure it was set to copy and create folders.


1, Declare a URL variable  as  a   CFURLRef  .

#include  <QuickLook/QuickLook.h>


2, Inside the    OSStatus GeneratePreviewForURL(

Declare the Bundle.

CFBundleRef bundle1;

bundle1 QLPreviewRequestGetGeneratorBundle ( preview);

And Set the URL to the file in the bundle using CFBundleCopyResourceURL

Which returns the location of a resource contained in the specified bundle.

URLRef  = CFBundleCopyResourceURL  (bundle1, CFSTR ( “jquery.min.js” ), NULL CFSTR ( jq/ ));

 “jquery.min.js” the full file name.   “jq/”  the subfolder path .

3, Use the   appendFormat  to reference the query file.

[html appendString:@”<html><head>”];

[html  appendFormat : @” <script src=%@></script>” , URLRef ];


4, How to make a command

[html  appendString : @”<script>$(document).ready(function(){$(‘button’).click(function(){$(‘#textF’).toggle(1000);});});</script>” ];


5, The HTML

[html  appendString : @”<button>toggle</button>” ];

[html  appendString : @”</span> ><span data-mce-bogus=”1″ class=”mceItemHidden mceItemNbsp”> </span> This is the text to hide<span data-mce-bogus=”1″ class=”mceItemHidden mceItemNbsp”> </span>”];


The structure of the html is the same as normal html. <Head>,<script,<style>,<Body> and so on all go in the normal places..


But here we have to construct it using  appendFormat  and  appendString.

Normal Javascript works also.


[html  appendString : @”<a href=\”javascript:;\” onClick=\”document.getElementById(‘textF’).style.display=’none’;\”>Hide content again</a>” ];


Hi, Please Leave a Reply