Try to detect background-position

[flipzoom]

Issue description:

Not really a bug, a suggestion for improvement. I use the method that a background image is defined via CSS. So not the IMG tag method. The "background-position" is already defined by CSS via the CMS and a focal point.

Since the great Jarallax plugin can read the image-src from the CSS background-image here, it would surely be possible to adopt also the "background-position" for the option "imgPosition", if defined. This saves me unnecessary code adjustments to define the attribute "data-img-position". And is also redundant.

So it would be great, if a check is added, if in the CSS element, where the background-image originates, the background-position is also defined and if yes, to use it as an option.

By the way, thanks again for the great plugin!

Version used:

1.12.0

[flipzoom]

Hey @nk-o I quickly tested it and I think there are only two small changes needed.

In the file "jarallax.js", add the following to line 579:

if (self.image.src === null) {
        self.image.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
        self.image.bgImage = self.css(self.$item, 'background-image');
        self.image.bgPosition = (self.css(self.$item, 'background-position') !== '0% 0%') ? self.css(self.$item, 'background-position') : self.options.imgPosition; // Line 579 - Try to get css background-position
      }

and also in the file "jarallax.js", change the following on line 663:

if (self.image.src) {
          imageStyles = self.extend({
            'background-position': self.image.bgPosition, // Line 663 - Change this
            'background-size': self.options.imgSize,
            'background-repeat': self.options.imgRepeat,
            'background-image': self.image.bgImage || "url(\"".concat(self.image.src, "\")")
          }, containerStyles, imageStyles);
        }

The behavior is then as follows:

• Highest priority if "background-position" is defined via CSS
• If not, the default options are used
• Still adjustable by data-attribute "data-img-position", but CSS has priority if defined

[nk-o]

Hi.

I have checked it with our code. The problem with this line:

self.css(self.$item, 'background-position') !== '0% 0%'

I understand for what this check, but if we will add this possibility and user decide to use the position 0% 0% on the image, it will never work. The same problem for properties background-size and background-repeat.

So, your solution will be confusing in some rare situations. I can't add this to the core.

[flipzoom]

Hi, yeah, you're right. I understand the problem. Unfortunately, every browser will output 0% 0% as default, even if the property is not set at all. 😒

Other idea, how about including this as an optional global configuration? For example:

self.defaults = {
    type: 'scroll',
    autoDetectImgPosition: false, 
    [...]
}

That would solve the problem, in my view. Then everyone can decide to use this option OR to use the data attribute.

self.image.bgPosition = (self.options.autoDetectImgPosition) ? self.css(self.$item, 'background-position') : self.options.imgPosition;