Using Fancybox for photo thumbnails to view larger image

Boonex added Fancybox jquery lightbox to the distribution but seems to only be using it for viewing the blog attached image thing.  What a waste.  However, with a bit of rewriting the code, we can use fancybox to view the larger image of a thumbnail.  We will maintain the link under the thumbnail so we can still visit the photo page to leave comments.

We need to load the fancybox js and css files.  We will do that in the header file, /templates/base/_header.html, or in the corresponding template in case the _header.html file is being rewritten by a template.

<script type="text/javascript" src="<bx_url_root />plugins/fancybox/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="<bx_url_root />plugins/fancybox/jquery.fancybox.css" type="text/css" />

We also need to add our fancybox control to the _header.html as well.

    <script type="text/javascript" language="javascript">
$(document).on('click', '.single_image', function() {
  // remove the class to ensure this will only run once
  $(this).removeClass('single_image');
  // now attach fancybox and click to open it
  $(this).fancybox().click();
  // prevent default action
  return false;
});
</script>

In the fancybox control this only opens one image in a lightbox;  hopefully slideshows will be possible as well.

Now we need to make some changes to the BxBaseSearchResultSharedMedia.php file found in /templates/base/scripts

In the file find the function:

    function _getSharedThumb ($iId, $sFileLink, $sHash = '')
    {
        $sIdent = strlen($sHash) > 0 ? $sHash : $iId;
        $aUnit = array(
            'imgUrl' => $this->getImgUrl($sIdent),
            'fancyUrl' => str_replace("browse","file",$this->getImgUrl($sIdent)),
            'spacer' => getTemplateIcon('spacer.gif'),
            'fileLink' => $sFileLink,
            'bx_if:admin' => array(
                'condition' => $this->bAdminMode,
                'content' => array('id' => $iId)
            )
        );
        return $this->oModule->_oTemplate->parseHtmlByName('thumb.html', $aUnit);
    }

Add the bits in red; this will create our URL we need for the resized image stored when a photo is uploaded.

Now we need to make a change to the code that creates the thumbnail.  In /modules/boonex/photos/templates/base, find thumb.html.

<div class="sys_file_search_pic bx_photos_file_search_pic" style="background-image: url('__imgUrl__');">
    <bx_if:admin>
        <div class="bx_sys_unit_checkbox">
            <input type="checkbox" name="entry[]" value="__id__"/>
        </div>
    </bx_if:admin>
    <a class="single_image" href="__fancyUrl__"><img src="__spacer__"></a>
</div>

make the changes in red above.

Clear the caches and reload the page.  Now when you click on the thumnail image, you will open the resized imaged in a lightbox.  The URL under the thumbnail will take you to the image page.  This will also work on the album page.  For the album I also want to include a slideshow; that will be coming soon.

Note: there is a change to the fancybox attachment to work with the dynamically loaded browse boxes from my earlier post.  Currently this attachment will work to just load a single image.  I hope to have galleries/slideshows at a later time.