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:

<div id="slider">
	<a href="http://dev7studios.com"><img src="/Ideal-Image-Slider/public/img/1.jpg" data-src-2x="/Ideal-Image-Slider/public/img/1@2x.jpg" alt=""></a>
	<a href="http://gilbitron.me"><img data-src="/Ideal-Image-Slider/public/img/2.jpg" data-src-2x="/Ideal-Image-Slider/public/img/2@2x.jpg" src="" alt=""></a>
	<a href="http://www.google.com"><img data-src="/Ideal-Image-Slider/public/img/3.jpg" data-src-2x="/Ideal-Image-Slider/public/img/3@2x.jpg" src="" alt=""></a>
	<a href="http://example.com"><img data-src="/Ideal-Image-Slider/public/img/4.jpg" data-src-2x="/Ideal-Image-Slider/public/img/4@2x.jpg" src="" alt=""></a>
</div>

Code after the plugin is applied:

<div id="slider" class="ideal-image-slider iis-effect-slide" style="height: 400px;">
	<a data-src-2x="/Ideal-Image-Slider/public/img/1@2x.jpg" data-src="/Ideal-Image-Slider/public/img/1@2x.jpg" href="http://dev7studios.com" role="tabpanel" aria-hidden="false" class="iis-slide iis-current-slide" style="transition-duration: 700ms; background-image: url(http://gilbitron.github.io/Ideal-Image-Slider/public/img/1@2x.jpg);"></a>
	<a data-src="/Ideal-Image-Slider/public/img/2@2x.jpg" data-src-2x="/Ideal-Image-Slider/public/img/2@2x.jpg" href="http://gilbitron.me" role="tabpanel" aria-hidden="true" class="iis-slide iis-next-slide" style="transition-duration: 700ms; background-image: url(http://gilbitron.github.io/Ideal-Image-Slider/public/img/2@2x.jpg);"></a>
	<a data-src="/Ideal-Image-Slider/public/img/3@2x.jpg" data-src-2x="/Ideal-Image-Slider/public/img/3@2x.jpg" href="http://www.google.com" role="tabpanel" aria-hidden="true" class="iis-slide" style="transition-duration: 700ms;"></a>
	<a data-src="/Ideal-Image-Slider/public/img/4@2x.jpg" data-src-2x="/Ideal-Image-Slider/public/img/4@2x.jpg" href="http://example.com" role="tabpanel" aria-hidden="true" class="iis-slide iis-previous-slide" style="transition-duration: 700ms; background-image: url(http://gilbitron.github.io/Ideal-Image-Slider/public/img/4@2x.jpg);"></a>
	<a class="iis-previous-nav"></a>
	<a class="iis-next-nav"></a>
</div>

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:

<div id="slider">
	<a href="http://dev7studios.com">
	<a href="http://gilbitron.me">
	<a href="http://www.google.com">
	<a href="http://example.com">
</div>

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

<div id="slider">
	<img src="/Ideal-Image-Slider/public/img/1.jpg" data-src-2x="/Ideal-Image-Slider/public/img/1@2x.jpg" alt="Slide 1">
	<img data-src="/Ideal-Image-Slider/public/img/2.jpg" data-src-2x="/Ideal-Image-Slider/public/img/2@2x.jpg" src="" alt="Slide 2">
	<img data-src="/Ideal-Image-Slider/public/img/3.jpg" data-src-2x="/Ideal-Image-Slider/public/img/3@2x.jpg" src="" alt="Slide 3">
	<img data-src="/Ideal-Image-Slider/public/img/4.jpg" data-src-2x="/Ideal-Image-Slider/public/img/4@2x.jpg" src="" alt="Slide 4">
</div>

The code after the plugin is applied will look like:

<div id="slider" class="ideal-image-slider iis-effect-slide" style="height: 400px;">
	<a data-src-2x="/Ideal-Image-Slider/public/img/1@2x.jpg" data-src="/Ideal-Image-Slider/public/img/1@2x.jpg" role="tabpanel" aria-hidden="false" class="iis-slide iis-current-slide" style="transition-duration: 700ms; background-image: url(http://gilbitron.github.io/Ideal-Image-Slider/public/img/1@2x.jpg);">Slide 1</a>
	<a data-src="/Ideal-Image-Slider/public/img/2@2x.jpg" data-src-2x="/Ideal-Image-Slider/public/img/2@2x.jpg" role="tabpanel" aria-hidden="true" class="iis-slide iis-next-slide" style="transition-duration: 700ms; background-image: url(http://gilbitron.github.io/Ideal-Image-Slider/public/img/2@2x.jpg);">Slide 2</a>
	<a data-src="/Ideal-Image-Slider/public/img/3@2x.jpg" data-src-2x="/Ideal-Image-Slider/public/img/3@2x.jpg" role="tabpanel" aria-hidden="true" class="iis-slide" style="transition-duration: 700ms;">Slide 3</a>
	<a data-src="/Ideal-Image-Slider/public/img/4@2x.jpg" data-src-2x="/Ideal-Image-Slider/public/img/4@2x.jpg" role="tabpanel" aria-hidden="true" class="iis-slide iis-previous-slide" style="transition-duration: 700ms; background-image: url(http://gilbitron.github.io/Ideal-Image-Slider/public/img/4@2x.jpg);">Slide 4</a>
	<a class="iis-previous-nav"></a>
	<a class="iis-next-nav"></a>
</div>

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:

<div id="slider">
	<img data-href="http://dev7studios.com" src="/Ideal-Image-Slider/public/img/1.jpg" data-src-2x="/Ideal-Image-Slider/public/img/1@2x.jpg" alt="Slide 1">
	<img data-href="http://gilbitron.me" data-src="/Ideal-Image-Slider/public/img/2.jpg" data-src-2x="/Ideal-Image-Slider/public/img/2@2x.jpg" src="" alt="Slide 2">
	<img data-href="http://www.google.com" data-src="/Ideal-Image-Slider/public/img/3.jpg" data-src-2x="/Ideal-Image-Slider/public/img/3@2x.jpg" src="" alt="Slide 3">
	<img data-href="http://example.com" data-src="/Ideal-Image-Slider/public/img/4.jpg" data-src-2x="/Ideal-Image-Slider/public/img/4@2x.jpg" src="" alt="Slide 4">
</div>

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

<div id="slider" class="ideal-image-slider iis-effect-slide" style="height: 400px;">
	<a data-href="http://dev7studios.com" data-src-2x="/Ideal-Image-Slider/public/img/1@2x.jpg" data-src="/Ideal-Image-Slider/public/img/1@2x.jpg" role="tabpanel" aria-hidden="false" class="iis-slide iis-current-slide" style="transition-duration: 700ms; background-image: url(http://gilbitron.github.io/Ideal-Image-Slider/public/img/1@2x.jpg);">Slide 1</a>
	<a data-href="http://gilbitron.me" data-src="/Ideal-Image-Slider/public/img/2@2x.jpg" data-src-2x="/Ideal-Image-Slider/public/img/2@2x.jpg" role="tabpanel" aria-hidden="true" class="iis-slide iis-next-slide" style="transition-duration: 700ms; background-image: url(http://gilbitron.github.io/Ideal-Image-Slider/public/img/2@2x.jpg);">Slide 2</a>
	<a data-href="http://www.google.com" data-src="/Ideal-Image-Slider/public/img/3@2x.jpg" data-src-2x="/Ideal-Image-Slider/public/img/3@2x.jpg" role="tabpanel" aria-hidden="true" class="iis-slide" style="transition-duration: 700ms;">Slide 3</a>
	<a data-href="http://example.com" data-src="/Ideal-Image-Slider/public/img/4@2x.jpg" data-src-2x="/Ideal-Image-Slider/public/img/4@2x.jpg" role="tabpanel" aria-hidden="true" class="iis-slide iis-previous-slide" style="transition-duration: 700ms; background-image: url(http://gilbitron.github.io/Ideal-Image-Slider/public/img/4@2x.jpg);">Slide 4</a>
	<a class="iis-previous-nav"></a>
	<a class="iis-next-nav"></a>
</div>

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

    $('a[data-href]').each(function() {
        $(this).attr('href', $(this).attr('data-href'));
    });

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