Over on my blog at www.stevebumbaugh.com I wanted to create a nice Web 2.0 image gallery using ThickBox, which is dependent on the jQuery JavaScript Library. Additionally I wanted to have jQuery configured as it is very handy and only a matter of time before I needed it. I've been using it for about a year now and feel lost without it. It's both a powerful and lightweight JavaScript library that seems to have steadily gained popularity since it was released in 2006. Apparently Microsoft and Nokia have recognized the power of jQuery as well, they are both moving to make jQuery part of their upcoming development platforms that include Microsoft's Visual Studio and Nokia's Web Run-Time.
Environment
Configuring jQuery 1.2.6
jQuery is simple enough to install if there are not any conflicting JavaScript libraries configured. To install, download the file jquery-1.2.6.js from jquery.com, add it to your project and add a script reference to the <head/> section of the site. For BlogEngine.NET add the script reference to the site.master file for the current theme. For this site, that reference looks like the following:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
alert('If jQuery is working properly you will see this message.');
});
//]]>
</script>
If jQuery is working properly an alert box will display, stating this fact once the page loads. This test will fail when using BlogEngine.NET because there is another JavaScript library in place that is interfering with the jQuery variable '$'. In FireFox 3 the error message reads, "$ is not defined," in Internet Explorer 7 the message reads, "Object expected." This can be resolved by reassigning the jQuery variable by placing the following code beneath the jQuery script reference:
<script type="text/javascript" src="/code/js/jquery/jquery-1.2.6.js"></script>
<script type="text/javascript">
$j = jQuery.noConflict();
</script>
Now, update the test code to use the new jQuery variable '$j':
<script type="text/javascript">
//<![CDATA[
$j(document).ready(function() {
alert('If jQuery is working properly you will see this message.');
});
//]]>
</script>
Now jQuery should be configured and the test code above should display the test message.
Configuring ThickBox 3.1
ThickBox is a Lightbox clone that is built using jQuery. Both can be used to display modal style windows containing images, but Thickbox can also display inline html content, iframed content and AJAX content. It is also very lightweight coming in around 10k compressed.
To install ThickBox, download the thickbox.js, the thickbox.css and the loadingAnimation.gif. Next, add thickbox.js and thickbox.css references to the <head/> section of the site.master file. Make sure the thickbox.js <script> block follows the <script> block for jQuery as well as the jQuery.noConflict(); inline script call:
<script type="text/javascript" src="/code/js/jquery/jquery-1.2.6.js"></script>
<script type="text/javascript">
$j = jQuery.noConflict();
</script>
<script type="text/javascript" src="/code/js/jquery/thickbox-3.1/thickbox.js"></script>
<style type="text/css" media="all">
@import "/code/css/thickbox-3.1/thickbox.css";
</style>
Open thickbox.js and adjust the variable tb_pathToImage to the path to
loadingAnimation.gif. Since the default jQuery variable '$' has been replaced with '$j' the thickbox.js source needs to be updated to reflect this. All the jQuery references '$' in the thickbox.js file need to be updated to '$j'. Careful not to blindly replace all '$' with '$j' in the file though. There is a regular expression contained within the file that will break if it is modified:
var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;
A global replace of '$(' with '$j(' should safely update the jQuery variable without overwriting the regular expression. The modified file should look like this: thickbox.js.
Additionally, there is a conflict between the thickbox.css file and the style.css file within the BlogEngine.NET theme. Using Firebug I was able to determine that the first line of thickbox.css was causing the problem. Commenting it out resolves the problem:
/* *{padding: 0; margin: 0;} */
The modified file should look like this: thickbox.css.
Summary
As expected when using multiple, interdependent technologies there are integration challenges to overcome or work around. Having previous experience setting up jQuery and ThickBox was invaluable to me when configuring it to work here and made it pretty simple. Hopefully this post will help people not as familiar with these technologies get jQuery and/or ThickBox up and running with BlogEngine.NET. I hope to put them to good use soon, but for now you can see the photo gallery that started this project at www.stevebumbaugh.com.
jQuery News
More information on jQuery, Microsoft and Nokia:
Subscribe