Only replace {width} placeholder, without changing element

[ismay]

I'm using imager and also fluidbox, which is a relatively straightforward lightbox. It uses the following html:

<a href="/path/to/full/size/image">
    <img src="/path/to/thumbnail" alt="lorem ipsum" />
</a>
<!-- See here: https://github.com/terrymun/Fluidbox#basic -->

Where the <a> links to the full size image (displayed on click), and the <img> is just the thumbnail (example). Since the image that the <a> links to is only displayed on click, it doesn't have any width before that. Which means that imager can't measure the width.

Since these images are full screen it would be awesome if I could just pass the screenwidth to imager, as that is the width that the image'll transform to on click. Is there a way to deal with such a use case?

[ismay]

After some fiddling it works as it should with some jquery and data-width: jsfiddle. The only problem is that imager replaces <div>'s with an <img>, when all I need is for imager to replace the href attribute:

<a href="this/should/be/replaced/by/imager">
    <img src="#" />
</a>

As that is the markup that fluidbox expects. So basically for this to work it should be possible to only update the {width} placeholder, without changing the element to an <img>. Would that be possible?

[edwardhorsford]

@ismay I've recently wanted to do something similar. I know it's several years later, but posting here in case it's useful to someone.

My fork doesn't replace the element, and has an option to use the page width rather than container width. You can also pass in selectors for source and destination attributes.

[ismay]

Thanks! Actually, for responsive images I’m currently using a simple script that sets the sizes attr automatically; https://github.com/ismay/ismaywolff.nl/pull/982

Means you don’t have to manually calculate it, and allows you to have more intricate layouts with responsive images. It has some trade offs, but I like it.