Imagen de Ideal Image Slider

Ideal Image Slider problems with link in IE

Ideal Image Slider  is a plugin built in Vanilla Js. Link: http://gilbitron.github.io/Ideal-Image-Slider/

It is a very used plugin that I have enjoyed. Some of the most interesting features are the use of image HDPI(Retina), its responsive nature and the touch navigation availability.

One of the problems I have found is the integration with IE. In the cases the image has a link it doesn’t work.

Where is the error?

For example when there is a, the code is:

Code after the plugin is applied:

It takes the img src as background. But, what happens in IE? The plugin does not collect the data well and the code after the plugin is applied looks like this:

However if you don’t add a link and leave it with just the img:

The code after the plugin is applied will look like:

Quick and easy solution:

We maintain the structure of images without link but we add one more attribute for the such link: data-href. Javascript then collects that data. We can also add a data-target to determine whether to open a new window or not.

Example:

Now the code after the plugin is applied just needs one final trick:

Setting the href attribute with the value data-href makes the final trick:

With this solution you can use this fantastic plugin that works in all browsers from IE9 on.