edition-php-drupal-standard
edition-php-drupal-standard copied to clipboard
Lightbox didn't work in pattern lab
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!