通过@Ashik的帮助，我终于把这个东西搞定了，也不必放弃显示标题，因为我旋转了
.fancybox-inner并覆盖了一些CSS，这样就可以保留白色边框。我还从
$(document).ready()函数中初始化了fancybox，所以我必须有点不同地绑定按钮。
最后，这是一个比较长的答案，如果我漏掉了什么，请告诉我，因为完全有可能！此外，我们不需要支持IE（感谢上帝），所以它可能或可能不会在那里正常工作。
我去掉了普通的箭头和关闭按钮，这需要您添加fancy box按钮助手CSS和JS文件：
<link href="/Content/css/jquery.fancybox.css" rel="stylesheet"/>
<link href="/Content/css/jquery.fancybox-buttons.css" rel="stylesheet"/>
<script src="/Content/Scripts/fancybox/jquery.fancybox.js"></script>
<script src="/Content/Scripts/fancybox/jquery.fancybox.pack.js"></script>
<script src="/Content/Scripts/fancybox/jquery.fancybox-buttons.js"></script>
然后，初始化fancy box是在
$(document).ready()中完成的，就像我说的那样，如下所示（请注意，我删除了箭头和关闭按钮，并使用按钮助手的
tpl属性添加它们回来）。在
tpl属性中，我还创建了一个自定义旋转按钮，其中包含一个
onclick和一个自定义的
data-rotation属性，用于保存当前旋转状态：
$(document).ready(function() {
$(".fancybox").fancybox({
loop : true,
helpers: {
buttons: {
position: 'top',
tpl : '<div id="fancybox-buttons"><ul><li><a class="btnPrev" title="Previous" href="javascript:;"></a></li><li><a id="fancybox-rotate-button" title="Rotate" data-rotation="0" onclick="FancyBoxRotateButton()"></a></li><li><a class="btnNext" title="Next" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:jQuery.fancybox.close();"></a></li></ul></div>'
}
},
closeBtn: false, // you will use the tpl buttons now
arrows : false // you will use the tpl buttons now
});
这是自定义旋转按钮的onclick函数：
window.FancyBoxRotateButton = function() {
var fancyboxInner = $('.fancybox-inner');
var fancyBoxRotateButton = $('#fancybox-rotate-button');
var currentRotation = parseInt(fancyBoxRotateButton.data("rotation"));
var rotation = 'rotate(-' + (90 * ++currentRotation) + 'deg)';
fancyboxInner.css({
'-moz-transform' : rotation,
'-webkit-transform': rotation,
'-o-transform' : rotation,
'transform' : rotation
});
fancyBoxRotateButton.data("rotation", currentRotation.toString());
}
最后，我们需要修复白色边框，然后我还要更改自定义按钮
的大小，并设置自定义旋转按钮的图片。可能有更好的方法来做到这一点（如果您知道其中之一，请告诉我！），但我只是删除了.fancybox-skin的背景和盒子阴影，并将其添加到.fancybox-inner中：
#fancybox-buttons ul{
width: 130px;
}
#fancybox-buttons #fancybox-rotate-button {
background-image: url('/Content/images/fancybox_rotate.png')
}
.fancybox-skin {
background: none !important;
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: none !important;
-moz-box-shadow : none !important;
box-shadow : none !important;
}
.fancybox-inner {
border-radius : 4px;
border : 2px solid white;
padding : 10px;
background : white none repeat scroll 0 0;
-webkit-box-shadow: 0 10px 25px #000000;
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow : 0 10px 25px #000000;
-moz-box-shadow : 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow : 0 10px 25px #000000;
box-shadow : 0 10px 25px rgba(0, 0, 0, 0.5);
}
希望能对某人有所帮助！
