CODEWITHSUNDEEP
javascriptjqueryjquery-backstretch
Jason Lee
Jason Lee

Reputation: 1

How do I add alt tags to an image slideshow using backstretch?

I am trying to add alt tags to an image slideshow using backstretch, but my code below is not working. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="js/min/jquery.backstretch-min.js"></script> 
<script>
    $.backstretch([
     { url: "img/hero/hero11.jpg", alt: "Some alt text" }, 
     { url: "img/hero/hero10.jpg", alt: "Some alt text 2" },
    ],  {duration: 2000, fade: 750});
  });
});

</script>

I added this to jquery.backstretch-min.js:

 $(document).ready(function() { $('.backstretch img').attr('alt', 'this is a purple background image'); });

And it works for the first image, but when the slideshow changes to the next image the alt tag goes away and never reloads.

reeljanie.com for reference, homepage slideshow needs to have alt tags.

I am very new to js, thanks for your help.

Upvotes: -1

Views: 452

Answers (1)

Kosh
Kosh

Reputation: 18444

You don't need to add anything to jquery.backstretch-min.js as it supports alt pretty well.

All you need is to fix your JS which has syntax error due to last two lines.
Just remove them:

    $.backstretch([
     { url: "https://picsum.photos/400/230", alt: "Some alt text" }, 
     { url: "https://picsum.photos/400/230", alt: "Some alt text 2" },
    ],  {duration: 2000, fade: 750});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.1.18/jquery.backstretch.min.js"></script>

Upvotes: 0

Related Questions