Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image width getter attribute #81

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Image width getter attribute #81

wants to merge 3 commits into from

Conversation

nkp
Copy link
Contributor

@nkp nkp commented Feb 18, 2014

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
Copy link
Contributor

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 thom4parisot added this to the 0.3.0 - Lazyloading Stability milestone Feb 21, 2014
@thom4parisot
Copy link
Contributor

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

Thanks :-)

@thom4parisot thom4parisot modified the milestones: 0.3.0 – Convenience features, 0.3.0 - Lazyloading Stability Mar 17, 2014
@thom4parisot
Copy link
Contributor

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

@thom4parisot
Copy link
Contributor

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

@thom4parisot
Copy link
Contributor

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;
  };
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants