Thanks for your speedy reply.
I added the following line of code and the CSS is correct but fancybox still wont work.
Could you please help me out?
Link: https://www.dcpearls.nl/about/media/?id=339836239468648
Code added:
<link rel='stylesheet' id='srzfbstyles-css' href='https://www.dcpearls.nl/wp-content/plugins/srizon-facebook-album/css/srzfbstyles.css?ver=3.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='srzsbcss-css' href='https://www.dcpearls.nl/wp-content/plugins/srizon-facebook-album/js/sb/srzsb.css?ver=3.5.1' type='text/css' media='all' />
<script type='text/javascript' src='https://www.dcpearls.nl/wp-content/plugins/srizon-facebook-album/js/sb/srzsb.js?ver=3.5.1'></script>
<script type="text/javascript">
jQuery(function(){
jQuery.fn.getTitle = function() { // Copy the title of every IMG tag and add it to its parent A so that fancybox can show titles
var arr = jQuery("a.fancybox");
jQuery.each(arr, function() {
var title = jQuery(this).children("img").attr("title");
jQuery(this).attr('title',title);
})
}
// Supported file extensions
var thumbnails = jQuery("a:has(img)").not(".nolightbox").filter( function() { return /\.(jpe?g|png|gif|bmp)$/i.test(jQuery(this).attr('href')) });
thumbnails.addClass("fancybox").attr("rel","fancybox").getTitle();
jQuery("a.fancybox").fancybox({
'cyclic': false,
'autoScale': true,
'padding': 10,
'opacity': true,
'speedIn': 500,
'speedOut': 500,
'changeSpeed': 300,
'overlayShow': true,
'overlayOpacity': "0.3",
'overlayColor': "#666666",
'titleShow': true,
'titlePosition': 'inside',
'enableEscapeButton': true,
'showCloseButton': true,
'showNavArrows': true,
'hideOnOverlayClick': true,
'hideOnContentClick': false,
'width': 560,
'height': 340,
'transitionIn': "fade",
'transitionOut': "fade",
'centerOnScroll': true
});
jQuery(".jfbalbum > div.imgboxouter > a").fancybox({
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 600,
'speedOut': 200,
'type': 'image'
});
})
</script>