Press DIV to open the embedded background in a new tab.

Question

I am dynamically pasting a background image into DIVs.

<div class="mc-image " title="The Bridges" style="background-image: url(image.jpg);" data-href="link.html"></div>
<div class="mc-image " title="The Bridges" style="background-image: url(image2.jpg);" data-href="link2.html"></div>

There may be up to 5 or 6 of them. On the phone, I want to open these background images in a new tab so that people can view the whole image (zoom, pinch, etc.).

What can i use for jQuery?

Answer 1

Found a way

jQuery('.mc-image').on('click', function() {
      var bg = jQuery(this).css('background-image').replace(/^url\(['"]?/,'').replace(/['"]?\)$/,'');
      window.open(bg);
  });