edition-php-drupal-standard icon indicating copy to clipboard operation
edition-php-drupal-standard copied to clipboard

Lightbox didn't work in pattern lab

Open febdao opened this issue 8 years ago • 0 comments

Hi there, I use Slick Lightbox to create a popup gallery, but it doesn't work in pattern lab. Did I do something wrong?


Update: I got this bug when click image (to open lightbox)

patternlab-pattern.min.js?1478227777:1 Resource interpreted as Document but transferred with MIME type image/jpeg

If I manually remove


<script id="pl-js-insert-1478227777">
  (function() {
    if (self != top) {
      var cb = '1478227777';
      var js = [ { 'src': 'styleguide/bower_components/jwerty.min.js', 'dep': [ 'styleguide/js/patternlab-pattern.min.js' ] } ];
      scriptLoader.run(js,cb,'pl-js-insert');
    }
  })();
</script>

In /prototype/public/styleguide/html/styleguide.html, the popup will work.

How can I resolve this issue?


This bug from patternlab-pattern.js

  var aTags = document.getElementsByTagName('a');
  for (var i = 0; i < aTags.length; i++) {
    aTags[i].onclick = function(e) {
      var href   = this.getAttribute("href");
      var target = this.getAttribute("target");
      if ((target !== undefined) && ((target == "_parent") || (target == "_blank"))) {
        // just do normal stuff
      } else if (href && href !== "#") {
        e.preventDefault();
        window.location.replace(href);
      } else {
        e.preventDefault();
        return false;
      }
    };
  }

So, If the popup with markup like this

  <div>
    <ul>
      <li><a href="http://placekitten.com/1600/1300" data-caption="Lorem ipsum 1600x1300">http://placekitten.com/1600/1300</a></li>
      <li><a href="http://placekitten.com/1630/1280" data-caption="Lorem ipsum 1630x1280">http://placekitten.com/1630/1280</a></li>
      <li><a href="http://placekitten.com/1500/1250" data-caption="Lorem ipsum 1500x1250">http://placekitten.com/1500/1250</a></li>
    </ul>
  </div>

when we click to a tag, the script above will change the location of iframe to href of a tag. So at this time, I think we shouldn't use the popup with a tag.

Btw, pattern lab team please give us the best solution in this case! Thanks a lot!

febdao avatar Nov 04 '16 04:11 febdao