2

How can I configure featherlight so that it doesn't resize the images when a user clicks a smaller version? If it's too big for the window, I'd like to have scrollbars. Here's the HTML I'm using:

<a href="#" data-featherlight="http://i.imgur.com/crDSlzw.jpg">
<img src="http://i.imgur.com/crDSlzw.jpg" width="200px">
</a>

Currently, when I click a large image, it shows up in a lightbox, but it's so small that I can't read the text in the image.

Example on CodePen: http://codepen.io/xyzerb/pen/gPWxmE

Thanks in advance!

Zerb
  • 21
  • 4

1 Answers1

2

You could specify a callback for onResize in which you clear the inline css:

var dontResize = function() {
  this.$content.css('width', '').css('height', '');
}

You can use it inline:

<a data-featherlight-on-resize="dontResize" ... >

Or even change all of them by using the default:

$.Featherlight.prototype.onResize = dontResize;
Marc-André Lafortune
  • 78,216
  • 16
  • 166
  • 166
  • Thank you for your help. I'd like to change all of them by default using the third method you show, but I'm not sure where to add that code. Would I need to add that as a script on each page? – Zerb Jan 07 '16 at 22:36
  • I'm still having trouble. I created a tiny demo on CodePen: [http://codepen.io/xyzerb/pen/gPWxmE](http://codepen.io/xyzerb/pen/gPWxmE) For my purposes, the large image of Colbert should load at 100% zoom with scrollbars rather than automatically resize to fit the window. Thanks again for your time and patience. I'll be taking an introductory JavaScript class soon, so perhaps I'll be able to ask more intelligent questions in the near future. – Zerb Jan 08 '16 at 16:00