Help get this topic noticed by sharing it on Twitter, Facebook, or email.
I’m happy

Partial fix for Fancybox users

I've had my site running Fancybox lightbox script for a while, and had an issue when wanting to integrate the Fotomoto toolbar. Those already using it know that there's incomplete support for it, but I decided to hack together a working version for the hell of it, and hopefully others can benefit too. NOTE: this is not usable out-of-the-box for the default styling of Fancybox, but requires style modification, which you may or may not be ok with.

On my site I made a transition from Slimbox2 to Fancybox, so I styled Fancybox to be similar, which explains the titleFormat gallery parameter shown, and the function formatGalleryPopupTitle method. If cutting/pasting the code to your own, remember to change the paths to the CSS/JavaScript/image files appropriately so they are found ok.

The guts of the changes are in the onComplete and onCleanup handlers. The first resizes/moves the Fotomoto toolbar to the appropriate place, the second ensures the toolbar is hidden on closure of the popup. Obviously if you have different styling to your Fancybox popup then this code will very likely need to be modified to suit your own needs.

So...that's it! Fotomoto support correctly mention that it Fancybox requires a custom for each site, but I figure it at least makes sense to post an example of how to do it, for all those not wanting to make a move away from Fancybox.


<link rel="stylesheet" type="text/css" href="css/fancybox/jquery.fancybox-1.3.1.css" media="screen, projection" />
<script type="text/javascript" src="scripts/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="scripts/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
'margin' : 100,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 500,
'overlayShow' : true,
'overlayOpacity' : '0.0',
'hideOnOverlayClick' : true,
'hideOnContentClick' : true,
'showCloseButton' : false,
'titlePosition' : 'inside',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<div id="fancyboxTitle"><span><a href="javascript:;" onclick="$.fancybox.close();"><img src="<?php echo $rellink; ?>/css/media/closelabel.gif" alt="Close" /></a></span><p>' + (title && title.length ? '<b>' + title + '</b>' : '' ) + 'Image ' + (currentIndex + 1) + ' of ' + currentArray.length + '</p></div>';
'onComplete' : function() {
// Move Fotomoto toolbar to appropriate position when popup is displayed.
var toolbar = $('div.FotomotoFloatedToolbar');
if (toolbar != null) {
var fbt = $('div.fancybox-title-inside');
var tiw = fbt.innerWidth();
var tpl = toolbar.css('padding-left').replace(/[^-\d\.]/g, '');
var tpr = toolbar.css('padding-right').replace(/[^-\d\.]/g, '');
toolbar.width(tiw - tpl - tpr);
toolbar.css('left', (fbt.offset().left) + 'px');
toolbar.css('top', (fbt.offset().top + fbt.height() + toolbar.height() - 1) + 'px');
'onCleanup' : function() {
// Hide Fotomoto toolbar before popup is closed.
var toolbar = $('div.FotomotoFloatedToolbar');
if (toolbar != null) {
toolbar.css('display', 'none');
<style type="text/css">
#fancyboxTitle {
font-family: Verdana,Arial,Geneva,Helvetica,sans-serif;
font-size: 0.83em;
color: #666;
text-align: left;
#fancyboxTitle b { display: block; margin-right: 80px; }
#fancyboxTitle span { float: right; }
#fancyboxTitle img { border: none; }
1 person likes
this idea