Add watermark to all images with specified ID or class

[Eldenroot]

Hi, si possible to add a watermark into all images that contains specific ID or class opened via FancyBox? Thank you very much!

[fancyapps]

Hi,

See this demo - https://codepen.io/fancyapps/pen/wmXOqN - watermark image is applied using CSS for slides that have corresponding class name.

[Eldenroot]

Thank you, is there any list of all "tutorials" anywhere? Really useful, thank you

[fancyapps]

There is no special section for tutorials, but documentation contains a number of demos - https://fancyapps.com/fancybox/3/docs/#images

[Eldenroot]

Maybe would be nice to make something like: other useful tutorials and add links for these... because your Fancybox is just perfect! :) Thank you!

[Eldenroot]

I am getting a hard times to add my watermark image (100x200px) only to the right bottom corner :( I tried position property but without any success. If you will have a minute, could you please help me? Thank you

[fancyapps]

Hard times? But why? background-position: bottom right; should do that, example:

https://codepen.io/anon/pen/pVKXBa

[Eldenroot]

@fancyapps - you are a genius, thank you very much. Just last thing - where to put code for preload image? I use this in my page - pastebin - https://pastebin.com/k4Qi3VcB

Thank you very much for great support!

[Eldenroot]

@fancyapps - Hi my friend, is possible somehow "ignore" small images (not to add a watermark to them?) It looks funny -

Thank you!

[fancyapps]

Just use callbacks, for example:

afterLoad : function(instance, current) {
    if (current.width > 500 && current.height > 500 ) {
      current.$slide.addClass('watermark');
    }
  }

https://codepen.io/anon/pen/PyJoVJ

[Eldenroot]

Unfortunately not working, watermark is not added :( afterLoad is not firing :(

Here is my code:

function init() {
        $('.post_body img').each(function() {
            var currentImage = $(this);
            var pid = currentImage.parents('.post_body.scaleimages').attr('id');
            if (currentImage.hasClass('smilie') == false && currentImage.parent().is('a') == false) {
                currentImage.wrap("<a title='" + lang.clickToEnlarge + "' target='_blank' data-fancybox='" + pid + "' data-type='image' href='" + currentImage.attr("src")  + "'>");
            }
        });

        // Language ENG 
        $.fancybox.defaults.lang = 'en';
        $.fancybox.defaults.i18n.en = lang;

        // FancyBox default settings
        $('[data-fancybox]').fancybox({
            loop : true, // Enable infinite gallery navigation
            protect: false, // Disable right-click and use simple image protection for images
            keyboard: true, // Enable keyboard navigation
            arrows: true, // Display navigation arrows at the screen edges
            infobar: true, // Should display counter at the top left corner
            thumbs : { // Thumbnails sidebox option
            autoStart   : false, // Show/hide sidebar with thumbnails of images
            hideOnClose : true, // Automatically hide thumbnails box on close
            },
            afterLoad : function(instance, current) {
                if (current.width > 250 && current.height > 250 ) {
                    current.$slide.addClass('watermark');
                }
            },

            buttons : [ //Buttons displayed in FancyBox - to hide any of them just comment them out
                'slideShow', // Slideshow button
                'fullScreen', // Full screen button
                'thumbs', // Thumbnails button
                'share', // Share button
                'download', // Download button
                'zoom', // Zoom button
                'close' // Close button
            ]
        });
    }

I tried beforeShow, aferShow still nothing :(

[fancyapps]

Well, make sure you use valid selector, e.g, if you write $('.something').fancybox(...) then check if $('.something') returns your elements. If not, then defaults will be applied.

[Eldenroot]

@fancyapps - I dont get it srry. Still cannot figure it out.

I use this code on my webpage: https://pastebin.com/nWnS3veZ

Where to exactly place and how it should look like when I wanna apply this to $('[data-fancybox="images watermark"]').fancybox({ - thank you!

[fancyapps]

Did you check if $('[data-fancybox="images watermark"]') returns anything? I suspect that it would return 0 items, because you have a space there.

[Eldenroot]

I use this CSS for watermarks

`/ FancyBox CSS code, úprava rozložení prohlížeče / .fancybox-caption { text-align: left !important; }

/ FancyBox - vodotisk - watermark / .fancybox-slide.watermark .fancybox-spaceball { background-image: url('/wiki/watermark_forum.png'); background-size: 300px 70px; background-position: bottom right; background-repeat: no-repeat; opacity: 0.50; }

/ FancyBox - vodotisk - hide while scaling (zooming in/out) / .fancybox-is-scaling .fancybox-spaceball { background-image: none !important; }`

[acwolff]

With my jAlbum Fancybox skin you can show a watermark without any programming as you can see in this example album.

[Eldenroot]

I wanna use stock FancyBox because I like it and I have been using it since the fist version :) I just need to someone Js skilled who can help me to get it work, thank you!

[fancyapps]

@Eldenroot I really do not know what to say... I asked you two questions and you did not answer to any of them. And I really have no idea why you (and other people) post (partial) source code - it is totally useless.

Anyway, I do not understand what could be problem in these two simple steps:

Step 1 - Initialise fancybox with custom options and set custom classname to the slide Step 2 - Add your CSS

[Eldenroot]

@fancyapps - please dont be rude, I just kindly asked for a small help from your side - I have no other issues, just this one (I have tried a lot of approaches but without any success). Anyway, I will try to find out the solution during this weekend, thank you for your input and I am sorry for my question :(

[fancyapps]

Oh, man, if you would have given a link to your page or some demo, I believe I would have provided an answer in no time.

[acwolff]

@fancyapps I think you mean me with your remark “ (and other people)”, so I am sorry too for my remark.

I did sent you an e-mail, but I am not sure I used the correct e-mail adres.

[Eldenroot]

I use this code, it works fine when I use it on Codepen: https://codepen.io/anon/pen/NexQGa

When I combine all my JS together and use 2 classes for FancyBox - it works fine too: https://codepen.io/anon/pen/WLrVpM

However when I use it on my site (when I add afterload), FancyBox works but my custom setting is not loaded. Without afterload works fine, code is identical :(

[fancyapps]

The code looks OK and it works on codepen, so .. there must be some difference. Without seeing your page, where I could inspect your issue, I can only think of two possible causes:

1) You forgot to include your code inside $(document).ready(function() { }); 2) You have some JS error on your page (any JS error can break something else)

Or maybe you forgot to add data-fancybox="watermark" to your links?

I hope you understand that I just can not give you proper answer, it is just not possible.

[Eldenroot]

1) nope, it is included 2) no JS errors

Even translations added in my custom setting are not loaded (afterload code added, without afterload works fine). I will try to debug i and let you know during tommorow. There must be a typo in my code or I am missing something.