Happy Birthday, Dad!
Saturday, June 27, 2015
Happy birthday, Dad! 65 today! Looking forward to celebrating with you! xx
Linked Album |
 | Posted by Danica Scott at 07:10 |
| comments 1 |
Happy Birthday Mum!
Thursday, June 25, 2015
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
 | Posted by Ben Taylor at 07:03 |
| comments 1 |
Mobile Image swipe in FancyBox 2
Sunday, June 7, 2015
Having added some media queries to make the site more mobile friendly, it very quickly came to my attention that the fancy new gallery was not mobile friendly. After a quick google I found the the same question had been published on stackoverflow.
All that was required was copying the following into the _setDimenion function
$(F.outer).on('swipeleft', function() {
F.next();
});
$(F.outer).on('swiperight', function() {
F.prev();
});
and then the following two JQuery plugins need to be included in your code
plugins.jquery.com/event.move/
plugins.jquery.com/event.swipe/
Simple!
It looks like the new fancybox 3 beta version natively supports swipe - but hey ho!
See More: #programming |
| Posted by Ben Taylor at 21:44 |
| comments 0 |
Customising FancyBox 2 with comments
Sunday, June 7, 2015
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.
| Posted by Ben Taylor at 21:17 |
| comments 0 |
