mybigadventures.com

Happy birthday, Dad! 65 today! Looking forward to celebrating with you! xx

A couple of weeks ago I gave the existing hand coded lightbox an overhaul and replaced it with the much better looking JQuery FancyBox 2 plugin fancyapps.com/fancybox/. It was very quick and easy to set up and was soon working. It wasn't long however before I started tinkering. Previously I had a comments section in place, and it wasn't clear how to make this work with the new fancybox set up. I had a look around on the Internet and found a few implementations that customised the title section for each photo, but this wasn't quite what I wanted. In the end I decided on a custom comments box to the right of the screen (You can see this in action by browsing any of the photo albums).

The first job was actually getting a box on the right side of the screen. This turned out to be a little more challenging than first anticipated. In the end, it was achieved by specifiying a margin in the fancybox options, and then using the aftershow callback to populate the comments. I've included the code below for those that are interested:

$('.fancybox').attr('rel', 'gallery').fancybox({
    margin: [20, 300, 20, 20],

    afterShow: function(){
        var commentsContainer = "<div class='lightboxcomments'></div>";
        if ($(document).find('.lightboxcomments').length == 0) {
            $('.fancybox-overlay').append(commentsContainer);
        }

        //CODE GOES HERE TO POPULATE COMMENTS
     }
});

Each time it loads a new photo, it checks to see if the comment div exists and if not, it adds it to the DOM. It then uses a JQuery getJSON() call with a callback to populate the comments when loaded from the database.   I'm sure there are probably better / more efficient ways to achieve the same thing, but it does the job well for now. 

This is just a quick note to wish mum a very happy 60th birthday. We're sorry we can't be there to spend the day with you but hope you enjoyed last weekend and have a great time at the seaside