Fancybox watermark probleme image size

Question

I append a div into the fancybox to display a watermark in 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>

How can i only append the div into the fancybox if the image size is bigger than X?

Thanks in advance.

JFK JFK · Accepted Answer · 2015-08-08T21:47:06

You only need to add the criteria to the if statement like :

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

The full code (slightly different than yours)

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

Notice the contextmenu is bound to the fancybox wrap and not to the watermark since right-click can be achieved hovering the gallery navigation arrows. If you want to restrict the right-click in all the images including those outside of the gallery, then just take the .bind() method out of the if statement.

Also notice I am dynamically setting the width and the height of the watermark the same size as the fancybox inner box, but I could set the rest of its properties with a CSS rule.

Last, notice the applied class is declared in quotes since class is a reserved javascript keyword.

See JSFIDDLE In the demo, only the second image (which is wider than "x") will have a watermark

Fancybox watermark probleme image size

1 Answers