Question: using responsive-images.js to gallery

[pawelmil]

Hi, I succesfuly used your script with responsive slider. I wonder if i can use it in gallery for images.
My code is
How can I make link to responsive image?
Thanks in advance.

[kvendrik]

Hi @pawelmil,

Nice to hear you're using reponsive-images.js! :)

I however can't seem to be able to open your link. Can you post a new one?

[pawelmil]

I'm sorry, I missed markdown. My gallery link is:
<a rel="fancypop" class="zoom" title="[[+name]]" href="[[+image]]">.....</a>
I can generate different versions of [[+image]]. It would be great to use your script not only for inline images but also for linked.

[kvendrik]

Its not completely clear to me how your code works. Is there an IMG tag inside the anchor or is the IMG injected into the anchor later using JavaScript?

[pawelmil]

gallery script can generate static thumbnails to "images" folder.
eg. [[+image:small]]" is /tpl/images/im320x200.jpg

[kvendrik]

Hi Pawelmil,

I will take this into account as a future feature. For now you can do this by going to line 143 in responsive-img.js which is where it assigns the src link to the image and add some code there so the same link is also added to its parent anchor tag. Something like:

//change img src to basePath + response
image.setAttribute('src', new_source);

//also add the src to the parent anchor tag
image.parentNode.setAttribute('href', new_source);

Let me know if that worked. ;)

[pawelmil]

Hi, your script works as you intended.
Untill you release another version supporting href, I need to apply this rule only for specific css class, becouse some inline images on my site links to documents and I don't want script to change their href. I would be greatful if you can help me with this.
P.S. I understand that in new version of script linked images will be independent of inline images, so it will be possible to make a text link to responsive image.
Thanks for your help!

[kvendrik]

Hi @pawelmil,

You could do that by checking the class on the image before adding the anchor.

There are different ways to do this but considering browser support you might want to go with the first one as it should also work below IE9, it is however a little less accurate. I also listed 2 other solutions so you can choose one that fits your project and browser support requirements.

IE9 and below solution

//change img src to basePath + response
image.setAttribute('src', new_source);

//if the image has a specific class
//also add the src to the parent anchor tag
if(image.className.indexOf('YOUR_CLASS') !== -1){
    image.parentNode.setAttribute('href', new_source);
}

IE9+

//change img src to basePath + response
image.setAttribute('src', new_source);

//if the image has a specific class
//also add the src to the parent anchor tag
if(image.className.split(' ').indexOf('YOUR_CLASS') !== -1){
    image.parentNode.setAttribute('href', new_source);
}

IE10+

//change img src to basePath + response
image.setAttribute('src', new_source);

//if the image has a specific class
//also add the src to the parent anchor tag
if(image.classList.contains('YOUR_CLASS')){
    image.parentNode.setAttribute('href', new_source);
}

Anyway, glad to help and let me know if it worked. ;)

[pawelmil]

I tested first version - it works ok. Thanks for your time!