Question

我将一个div添加到fancybox中以在fancybox gallery中显示水印

<script>
$(".fancybox2").fancybox({
    beforeShow: function () {
        /* Add watermark to gallery elements only */
        if (this.group.length > 1) {
            $('<div class="watermarker"></div>')
                .bind("", function (e) {
                return false; /* Disables right click */
            }).prependTo($.fancybox.inner);
        }
    }
});

</script>

如果图像尺寸大于X，我怎么能只将div附加到fancybox？

提前致谢。

Answer 1

您只需将条件添加到'image1','image2','image3'语句中，如：

if

完整代码（与您的略有不同）

if (this.group.length > 1 && this.width > x && this.height > y)

请注意jQuery(document).ready(function ($) { $(".fancybox2").fancybox({ beforeShow: function () { /* Add watermark to gallery elements only */ if (this.group.length > 1 && this.width > 800) { $.fancybox.wrap.bind("contextmenu", function (e) { return false; }); $('<div />', { "class": "watermarker", style: "width:" + this.width + "px; height:" + this.height + "px;" }).prependTo($.fancybox.inner); } } }); }); // ready 绑定到fancybox contextmenu而不是wrap，因为可以实现右键单击悬停图库导航箭头。如果您想限制所有图片（包括图库之外的图片）的右键点击，只需从watermark语句中取出.bind()方法。

另请注意，我正在动态设置if的{{1}}和width与{fancybox 内部框相同的尺寸，但我可以设置其余属性使用CSS规则。

最后，请注意应用的类是用引号声明的，因为 class 是一个保留的javascript关键字。

请参阅 JSFIDDLE 在演示中，只有第二个图像（宽于“x”）将具有水印

Fancybox水印问题图像大小

1 个答案: