Linking Slides in IE11

[DannyCooper]

Turning the slides to links:

<a href="http://google.com"><img src="/Ideal-Image-Slider/public/img/1.jpg" alt="Slide 1"></a>

Works in Firefox/Chrome, however in IE11 it creates a white space where the slide should be.

[sr8]

Experiencing the same problem here. Anyone found a solution yet?

[jaredSiebert]

Experiencing the same problem in IE 9, 10, and 11. Any solution?

[jaredSiebert]

Ok, so I needed something pretty quick here, and as this has been an open bug since September I figured I'd hack something together. Yes, it is a jQuery solution, but it does the job.

$(".iis-slide").each(function(){ var href = $(this).data('href'); $(this).attr('href', href); });

I run the above code after the slider init code. Also, rather than wrapping the image in a link tag, I added a data attribute to the image tag.

eg. <img src="/path/to/myimage.jpg" data-href="http://www.my-link.com" />

I'm sure there's better ways to resolve this, but this was a quick and easy solution. Hope this helps anyone looking for a solution until a proper one is implemented.

[sr8]

That would work, but I stayed away from such an approach as it starts to add bloat. If SEO is of any importance, I'd recommend not doing this. It's essentially a bandage-fix, and doesn't fix the root cause.

Since it's been an open issue for so long with no resolution in sight, my hopes for a real fix are slim, and any make shift work arounds coule end up being permanent. I ended up going for an entirely different library (iDangerous swiper). Good luck.

[One4design]

Hi Jared, Thanks for you workaround! It's been a big help to me. Hope there's is permanent fix soon for this ideal slider :) Thanks again!

[allaroundtheworld1997]

Hi Jared, where exactly do you put your code? (Can't get it to working...) Thanks in advance Phil

[One4design]

Allaroundtheworld, you can use this:

$( document ).ready(function() 
{
$(".iis-slide").each(function()
{ 
var href = $(this).data('href'); $(this).attr('href', href); 
});
}
);  

Place it above the slider script.

[allaroundtheworld1997]

Sorry to bother you again with a stupid question :)

You mean I should place it in the html file above "slider.start();"? Or in the ideal-image-slide.js file?

[jaredSiebert]

Hi Phil - You should be triggering this code after you initiate the gallery. So in your HTML or JS file (not the ideal-image-slide.js file), you should have something like this:

new IdealImageSlider.Slider('#slider'); $(".iis-slide").each(function(){ var href = $(this).data('href'); $(this).attr('href', href); });

make sure that you're not wrapping the images that you want to be a link with an anchor tag, but instead are adding a data attribute to your image tag like so:

<img src="/path/to/myimage.jpg" data-href="http://www.my-link.com" />

[allaroundtheworld1997]

Thanks again! The code below is in my HTML file now. The slider is working, but img2 is not shown as a link :( What am I doing wrong?

<div id="slider">
<img src="1.png" alt="Slide 1" />
<img src="2.png" data-href="http://www.google.de/" alt="Slide 2" />    
<img src="3.png" alt="Slide 3" />
<img src="4.png" alt="Slide 4" />
</div>

<script src="../ideal-image-slider.js"></script>

<script>
new IdealImageSlider.Slider('#slider');   
$(".iis-slide").each(function(){ var href = $(this).data('href'); $(this).attr('href', href); });
slider.start();
</script>

[One4design]

Are you aware that you need Jquery for this patch?

[jaredSiebert]

Yes, that's something I mentioned in the initial solution, last sentence before the code.

[allaroundtheworld1997]

I was aware of that, but thanks for the comment because I double-checked the code and saw that I was referring to a wrong filename for the jquery-js-file. It's working now! Thank you very much to all of you!

However, I have a follow-up question :-): Is it possible to link to a specific frame? To be precise I have to direct every link to _top.

[allaroundtheworld1997]

Sorry to bring this up again, but as I'm not a specialist regarding Jquery: Is there a way in this part:

new IdealImageSlider.Slider('#slider');
$(".iis-slide").each(function(){ var href = $(this).data('href'); $(this).attr('href', href); });

...to direct every href to the _top-frame?

[jaredSiebert]

This should do the trick. (changed the formatting to make things easier to read).

$(".iis-slide").each(function(){ 
    var href = $(this).data('href'); 
    $(this).attr({ 
        href: href, 
        target: '_top'
    }); 
});

Also, here's the jQuery doc about how to add attributes

[allaroundtheworld1997]

Thank you so so much!!! It's working like a charm now!

[ercsey]

Any solution to the problem since then? I'm still facing with the same problem with v1.5.1.