It’s always a good idea to separate content from behaviour, and this is the reason I don’t like the idea of adding rel attributes to my anchor tags in order to support Lightbox. I may decide one day that I want to use Highslide or another library instead, and I certainly don’t want to massage the HTML of my existing posts or put in hacks to support the new library.
When adding an image to a post using Windows Live Writer the resulting HTML looks similar to that below. An image tag that displays the thumbnail image is nested inside an anchor tag that links to the full size image.
<a href="foo.jpg">
<img title="Foo" alt="Foo" src="foo_thumb.jpg" />
</a>
If you provide an alternate description for the image in WLW, it is as you would expect, applied only to the image tag. Many of the variations of the Lightbox library get the description to display in the Lightbox from a title attribute on the anchor tag. This is a problem that jQuery and jQuery lightBox can solve for us without our needing to touch the HTML generated by WLW.
jQuery lightBox is a jQuery implementation of Lightbox. It enables you to add the Lightbox effect to any image, or more specifically anchor tag, that you can select with a jQuery selector. The power of jQuery selectors can do the heavy lifting to find the images, so there is no need to add attributes to the HTML content that serve only as identifiers for the Lightbox script.
Download jQuery lightBox and upload it to your BlogEngine.NET website. Add the markup below to the head tag in the site.master file for your theme. Make sure you update the folder names to match your upload location and the file names to match the version you downloaded. You may also need to update the image paths in the jQuery lightBox script (jquery.lightbox-0.5.js). If you already have a reference to the jQuery library you do not need to add the one included with the plugin (jquery.js). I am currently using the plugin with jQuery v1.3.1 without any problems.
<link
rel="stylesheet"
href="/Extensions/Lightbox/css/jquery.lightbox-0.5.css"
type="text/css"
media="screen"
/>
<script
src="/js.axd?path=Extensions/Lightbox/js/jquery.js"
type="text/javascript"
></script>
<script
src="/js.axd?path=Extensions/Lightbox/js/jquery.lightbox-0.5.js"
type="text/javascript"
></script>
<script type="text/javascript">
(function($) {
$(function() {
$('div.text:has(a):has(img)').each(function() {
$(this).find('a:has(img)').each(function() {
this.title = $(this).children('img').get(0).title;
}).lightBox();
});
})(jQuery.noConflict());
</script>
The strange anonymous function in the JavaScript code is to prevent a naming conflict between jQuery and BlogEngine.NET, as well as other JavaScript libraries such as Prototype that use $ as a function name.
The script identifies all the div tags with a class of text, that contain anchor tags, that in turn contain image tags. This restricts the Lightbox effect to images in post content and provides a way to create a Lightbox grouping for all images in the same post. Images that are in a group can be viewed inside the same Lightbox using next and previous buttons. The script also copies the title attribute from the nested image tag to the parent anchor tag. This ensures that descriptions you add for the image in WLW are presented in the Lightbox.
With only a little bit of effort we can keep our HTML clean and get the cool Lightbox effect as well. Below are some sample images you can test out to get a feel for the effect. You will notice that each image has a description and that you can navigate through them as a group.
