Image width getter attribute

[nkp]

For lack of a better name, adds a 'getter' for interpreting an image's width for determining the appropriate resolution in a way other than 'clientWidth'.

Why?

This is useful for when one wants the responsive size to be dependent on something other than the image's present size.

To use an image carousel as an example:

<div id="carousel" style="width:500px">
<!-- Inactive (hidden) panes have display:none. This rewrites the JS clientWidth/clientHeight attributes to 0 -->
<img href="first-200.jpg" class="inactive" style="display:none;"/>
<!-- Active (visible) panes have the correct clientWidth/clientHeight -->
<img href="second-500.jpg" class="active" style="display:block;"/>
</div>
<script>
new Imager(document.getElementById('carousel'), 
                    {widthGetter: function (image){return image.parentNode.clientWidth;}});
</script>

Why not?

This functionality can be achieved by hot-swapping Imager.determineAppropriateResolution at runtime.

[thom4parisot]

The width is determined by the container width.

This idea is pretty nice although I don't favour adding callbacks everywhere, adding extra overhead for something which can already be mastered through CSS.

Is this something you can't achieve through CSS?

[thom4parisot]

@nkp do you have an input on my previous questions, about the feasibility in CSS?

Thanks :-)

[thom4parisot]

Regarding the state of #86, is it working in the case of your carousel?

[thom4parisot]

Hello @nkp, just a quick nudge on this regarding my questions. Thanks :-)

[thom4parisot]

Hello looking back at your proposal, I am still not convinced your needs requires an extra feature.

You could achieve that through the availableWidths option:

var imgr = new Imager({ availableWidths: stickToCarouselWidth('#my-carousel') });

function stickToCarouselWidth(elementSelector){
  var carouselWidth = document.querySelector(elementSelector).width;

  return function getImageWidth(image){
    return carouselWidth;
  };
}