Sugama's Tech BLOG

I tried Thickbox3.1 to make the images on this blog clickable. The images shown in article areas are limited sized thumbnails. By clicking them, the original image appears in florting window.

It's laborious to put anchar tags for all images, which is needed to be done for running Thickbox. So I automated the markup.

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
    
    // Setup for thickbox
    $('.sentences img').each(function () {
        
        var url = $(this).attr('src').replace(/¥?.+/, '');
        var alt = $(this).attr('alt');
        
        $(this).wrap(
            "<a href='%1' title='%2' class='thickbox'></a>"
            .replace('%1', url)
            .replace('%2', alt)
        );
    });
});
//]]>
</script>

<script type="text/javascript" src="/lib/js/jquery.thickbox.js"></script>
<link rel="stylesheet" href="/lib/js/thickbox/thickbox.css" type="text/css" media="screen" />

Beacuse Thickbox plugin uses $(document).ready in itself, you shoud setup anchar tag before loading thickbox.js.