mybigadventures.com

We made the most of the sunshine today with a trip out to National Trust Packwood house and gardens. Given the nice weather we decided to give the house a miss and spend the time wandering around the garden.

The sun was out, the sky was blue and the flowers were in full bloom, making for a lovely day out. We spotted some dragon fly and butterflies and even a hummingbird moth that zipped around a little too quickly for a decent photo. All in all, a nice day out, enjoy the photos!

Hello one and all contrary to popular belief we are still alive and well. Sorry about the long pause in updates, tinternet access has been a bit of an issue so we've only popped on a couple of times to check email and book hostels. I'm afraid this is only a short one as we have to go out and get breakfast and get on with the day. We'll see if we can get some pictures and what not uploaded soon, but these computers appear to be locked down so might be a little while yet. For those that have lost our progress, we are now in Berlin, Germany having been to Solvorn in northern Norway, Oslo (again) and Copenhagen, Denmark since the last blog! Hope everyone is well, cheerio ta ta for now! 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.