1

I have a lightbox which is getting the background image of another div and then stripping the url() to then put the link inside of an which is working in all browsers except Firefox and can't work out why this would be happening, in Firefox for me it is adding '' around the "" within the src which is breaking the link.

_getImagePath: function($el) {
    var imagePath,
        spanEl = $el.find('span.js-cell-image-background'),
        imgEl = $el.find('img.cell-image__image');
    if(spanEl.length) {
      imagePath = spanEl.css('backgroundImage');
      imagePath = imagePath.replace('url(', '').replace(')', '');
    } else if(imgEl.length) {
      imagePath = imgEl.attr('src');
    }

    return imagePath;

  },
Luke Wilde
  • 11
  • 1
  • Possible duplicate - http://stackoverflow.com/questions/25413455/why-is-my-image-onload-not-firing-in-firefox-and-internet-explorer and http://stackoverflow.com/questions/3238472/why-does-firefox-3-6-alter-jquery-and-css-properties – Rob Scott Jun 01 '15 at 13:25

2 Answers2

1

Just remove the "" as you do the brackets:

imagePath = imagePath.replace('url(', '')
                     .replace(')', '')
                     .replace(/^"/, '')
                     .replace(/"$/, '')

or in one:

imagePath = imagePath.replace(/^url\(\"?/, '').replace(/\"?\)$/, '')

As you've found, the backgroundImage property is browser-dependent. As an example, I have a site, opened in 3x browsers, opened console and typed:

$(".icon-home").css("backgroundImage")

Chrome:

"url(http://..url../images/home.png)"

Firefox:

"url("http://..url../images/home.png")"

IE10:

"url("http://..url../images/home.png")"
freedomn-m
  • 27,664
  • 8
  • 35
  • 57
0

Thank you for the reply freedomn-m I managed to solve this a few minutes before you posted by just changing this line:

imagePath = imagePath.replace('url(', '').replace(')', '');

To this:

imagePath = imagePath.replace(/url\(["]*/,'').replace(/["]*\)/,'');

Thanks, Luke.

Luke Wilde
  • 11
  • 1