Use jQuery zoom on background image

Question

I'd like to use the jQuery zoom on background images. The problem is, it works on images with img tags only. Is there any way to use it on background-images aswell? I can't use img tag, because this value comes from javascript. For example, I have this div:

<div class="main-image" style="background-image: url("image.jpg");"></div>

 $(document).ready(function() {
            $('.main-image').zoom();
        });

 (function() {
                let gallerys = document.querySelectorAll('.gallery');
                gallerys.forEach(gallery => {
                    updateGalleryPictures(gallery);
                });
            })();

            function updateGalleryPictures(gallery) {
                // Get gallery's thumbnail images
                let thumbnails = gallery.querySelectorAll('.thumbnail');
                // Change the background-image property on click
                thumbnails.forEach(thumbnail => {
                    thumbnail.addEventListener('click', () => {
                        updateMainImage(gallery, thumbnail.src)
                    });
                });
                // Initialize background-image property using the 1st thumbnail image
                let firstThumbnail = thumbnails[0];
                if (firstThumbnail === null || firstThumbnail === undefined) return;
                updateMainImage(gallery, firstThumbnail.src)
            }

            function updateMainImage(gallery, src) {
                // Get main image and check if it exists
                let mainImage = gallery.querySelector('.main-image');
                if (mainImage === null) return;
                mainImage.style.backgroundImage = 'url(' + src + ')';
            }

Answer 1

The following is the source code of the plugin in question.https://github.com/jackmoore/zoom/blob/master/jquery.zoom.js - it is not designed to work on background images as you can see from lines https://github.com/jackmoore/zoom/blob/master/jquery.zoom.js#L117 and https://github.com/jackmoore/zoom/blob/master/jquery.zoom.js#L231 two properties which aren't available on divs.

You may get some mileage using pure CSS moving on mousemove something like:

 $('.main-image').mousemove(function(e){ var amountMovedX = (e.pageX * -1 / 2); var amountMovedY = (e.pageY * -1 / 2); $(this).css({ 'background-size': '200%', 'background-position': amountMovedX + 'px ' + amountMovedY + 'px'} ); });

 .main-image { background-image:url('https://www.travelandleisure.com/sites/default/files/styles/tnl_redesign_article_landing_page/public/1453920892/DUBAI-554088081-ABOVE0116.jpg?itok=dcoZnCrc'); background-size: 100%; display:block; height:200px; width:200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-image"> </div>